/* Targeted compatibility overrides for legacy selectors with direct light literals.
   The dark palette still comes from semantic tokens; scientific map palettes are untouched. */
html[data-theme="bitumen"] body {
  color: var(--color-text-primary);
  background:
    radial-gradient(circle at 18% 8%, rgba(24, 199, 189, .08), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(80, 124, 196, .10), transparent 30%),
    linear-gradient(135deg, #07111b 0%, var(--color-page-bg) 52%, #0a1825 100%);
}
html[data-theme="bitumen"] body.auth-page {
  background:
    radial-gradient(circle at 16% 12%, rgba(24, 199, 189, .11), transparent 31%),
    radial-gradient(circle at 88% 18%, rgba(80, 124, 196, .12), transparent 28%),
    linear-gradient(135deg, #07111b, #0b1a28);
}
html[data-theme="bitumen"] .glass {
  background: var(--color-surface-glass);
  border-color: var(--color-border);
  box-shadow: var(--shadow-card);
}
html[data-theme="bitumen"] :where(
  .sidebar, .details-panel, .topbar, .page-topbar, .workspace-global-topbar,
  .session-menu-dropdown, .sidebar-account-card, .upload-drop,
  .card-surface, .chart-card, .info-card, .result-card, .metric-card,
  .pool-modal, .card-modal, .create-case-modal, .delete-card-modal,
  .data-asset-modal, .data-asset-versions-modal, .data-import-modal,
  .problems-drawer, .portal-tile, .portal-card, .learning-card,
  .learning-task-card, .task-card, .knowledge-card, .knowledge-loading,
  .knowledge-course-card, .knowledge-section-card, .knowledge-reading,
  .admin-panel, .admin-card, .admin-content, .admin-section,
  .admin-shell, .admin-sidebar, .task-builder-panel, .empty-tool-box,
  .result-callout, .svg-box, .log-box, .tool-section, .workspace-canvas
) {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
html[data-theme="bitumen"] :where(
  input:not([type="checkbox"]):not([type="radio"]), select, textarea,
  .select, .field-input, .form-control, .search-input
) {
  background: var(--color-surface-secondary);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
html[data-theme="bitumen"] :where(input, textarea)::placeholder { color: var(--color-text-muted); opacity: 1; }
html[data-theme="bitumen"] :where(option) { background: var(--color-surface-raised); color: var(--color-text-primary); }
html[data-theme="bitumen"] :where(
  .helper, .muted, .subtitle, .page-subtitle, .modal-subtitle,
  .brand-subtitle, .session-menu-kicker, .session-menu-copy span,
  .card-note, .upload-note, .admin-note, .knowledge-meta,
  .task-meta, .learning-meta, .empty-state-copy, small
) { color: var(--color-text-secondary); }
html[data-theme="bitumen"] :where(
  .session-menu-link, .admin-nav-item, .knowledge-main-nav a,
  .pool-modal-tab, .bf-top-tab, .tab-button, .tool-tab
) { color: var(--color-text-secondary); }
html[data-theme="bitumen"] :where(
  .session-menu-link:hover, .admin-nav-item:hover, .knowledge-main-nav a:hover,
  .pool-modal-tab:hover, .bf-top-tab:hover, .tab-button:hover, .tool-tab:hover
) { background: var(--color-surface-hover); color: var(--color-text-primary); }
html[data-theme="bitumen"] :where(
  .admin-nav-item.active, .knowledge-main-nav a.active, .pool-modal-tab.active,
  .bf-top-tab.active, .tab-button.active, .tool-tab.active
) { background: var(--color-surface-active); color: var(--color-link); border-color: var(--color-accent); }
html[data-theme="bitumen"] :where(table, .ui-table) { color: var(--color-text-primary); }
html[data-theme="bitumen"] :where(th) { background: var(--color-surface-secondary); color: var(--color-text-secondary); border-color: var(--color-divider); }
html[data-theme="bitumen"] :where(td) { border-color: var(--color-divider); }
html[data-theme="bitumen"] :where(tr:hover td) { background: var(--color-surface-hover); }
html[data-theme="bitumen"] :where(.btn.ghost, .icon-btn, .map-reset, .mobile-nav-btn) {
  color: var(--color-text-primary);
  background: var(--color-surface-secondary);
  border-color: var(--color-border);
}
html[data-theme="bitumen"] :where(.btn.ghost:hover, .icon-btn:hover, .map-reset:hover) { background: var(--color-surface-hover); border-color: var(--color-accent); }
html[data-theme="bitumen"] :where(.btn, button) { outline-color: var(--color-focus-ring); }
html[data-theme="bitumen"] .modal-backdrop { background: var(--color-overlay); }
html[data-theme="bitumen"] :where(.chart-wrap, .chart-svg, .reservoir-svg) { color: var(--chart-text); }
html[data-theme="bitumen"] :where(.chart-legend, .chart-status, .map-zoom-hint, .pm-map-readout) { color: var(--color-text-secondary); }
html[data-theme="bitumen"] .chart-legend > div { background: var(--color-surface-secondary); border-color: var(--color-border); }
html[data-theme="bitumen"] :where(.auth-panel, .auth-intro, .intro-note) { color: var(--color-text-primary); }
html[data-theme="bitumen"] .auth-shell { border-color: var(--color-border); background: var(--color-surface-raised); }
html[data-theme="bitumen"] .auth-intro { background: linear-gradient(150deg, rgba(24,199,189,.13), rgba(43,78,101,.10)); }
html[data-theme="bitumen"] .auth-error { color: #ffb1b8; background: rgba(146,35,51,.25); border-color: rgba(255,124,134,.40); }
html[data-theme="bitumen"] .sidebar-account { background: linear-gradient(to bottom, rgba(8,19,31,0), rgba(8,19,31,.96) 24%); }
html[data-theme="bitumen"] :where(.upload-drop, .empty-tool-box, .ui-empty-state) { border-style: dashed; }
html[data-theme="bitumen"] :where(code, pre, .log-box) { background: #0b1723; color: #dcebf1; border-color: var(--color-border); }
html[data-theme="bitumen"] :where(.knowledge-reading, .knowledge-content, .learning-task-content) img {
  background: #f4f7f8;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-medium);
}
html[data-theme="bitumen"] :where(.portal-tile, .course-card, .knowledge-course-card) { box-shadow: var(--shadow-card); }
html[data-theme="bitumen"] :where(hr, .divider) { border-color: var(--color-divider); }

/* High-specificity corrections for legacy compound selectors. */
html[data-theme="bitumen"] body .workspace {
  background:
    linear-gradient(rgba(181, 207, 220, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(181, 207, 220, .055) 1px, transparent 1px),
    var(--color-page-bg-secondary);
  background-size: 44px 44px;
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-modal);
}
html[data-theme="bitumen"] body .upload-drop {
  background: linear-gradient(145deg, var(--color-surface-raised), var(--color-surface-secondary));
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}
html[data-theme="bitumen"] body .btn.ghost,
html[data-theme="bitumen"] body .icon-btn,
html[data-theme="bitumen"] body .map-reset {
  color: var(--color-link);
  background: var(--color-surface-secondary);
  border-color: var(--color-border-strong);
  box-shadow: none;
}
html[data-theme="bitumen"] body .btn.ghost:hover,
html[data-theme="bitumen"] body .icon-btn:hover,
html[data-theme="bitumen"] body .map-reset:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-hover);
  border-color: var(--color-accent);
}
html[data-theme="bitumen"] body .empty-hint { color: var(--color-text-muted); }
html[data-theme="bitumen"] body .splitter::before { background: var(--color-border-strong); }


/* Stage 3: finish the navy dark theme. Legacy calculation cards and reading blocks
   contained direct light literals; these selectors reconnect them to semantic roles. */
html[data-theme="bitumen"] :where(.knowledge-article, .knowledge-toc, .knowledge-hero, .knowledge-course-card,
  .knowledge-section-row, .knowledge-continue, .knowledge-search-results) {
  background: var(--color-reading-surface);
  color: var(--color-reading-text);
  border-color: var(--color-border);
}
html[data-theme="bitumen"] .knowledge-content,
html[data-theme="bitumen"] .knowledge-content :where(p, li, dd, dt, strong, b, em) {
  color: var(--color-reading-text);
}
html[data-theme="bitumen"] .knowledge-content :where(h2, h3, h4, h5, h6),
html[data-theme="bitumen"] .knowledge-article h1 {
  color: var(--color-text-primary);
}
html[data-theme="bitumen"] :where(.knowledge-inline-formula, .knowledge-formula-expression) {
  color: var(--color-link);
}
html[data-theme="bitumen"] :where(.knowledge-formula, .knowledge-task, .knowledge-exercise,
  .knowledge-task-condition, .knowledge-task-solution, .knowledge-options label,
  .knowledge-subsection-nav, .knowledge-reading-mode, .knowledge-source-row,
  .knowledge-admin-course, .knowledge-admin-chapter, .knowledge-admin-section) {
  background: var(--color-surface-secondary);
  color: var(--color-reading-text);
  border-color: var(--color-border);
}
html[data-theme="bitumen"] .knowledge-task {
  background: linear-gradient(145deg, var(--color-surface-secondary), var(--color-surface));
}
html[data-theme="bitumen"] .knowledge-reading-mode button.active {
  color: var(--color-link);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-small);
}
html[data-theme="bitumen"] .knowledge-table-wrap { border-color: var(--color-border); }
html[data-theme="bitumen"] .knowledge-table-wrap :where(th, td) { border-color: var(--color-divider); }
html[data-theme="bitumen"] .knowledge-table-wrap th { color: var(--color-link); background: var(--color-surface-secondary); }
html[data-theme="bitumen"] .knowledge-answer-result.correct { color: var(--color-success); background: var(--color-success-soft); }
html[data-theme="bitumen"] .knowledge-answer-result.wrong { color: var(--color-danger); background: var(--color-danger-soft); }
html[data-theme="bitumen"] .knowledge-content figcaption { color: var(--color-text-secondary); }

html[data-theme="bitumen"] body :where(.modal-shell, .card-modal-shell) {
  background:
    radial-gradient(circle at 12% 12%, rgba(24, 199, 189, .08), transparent 34%),
    radial-gradient(circle at 88% 20%, rgba(80, 124, 196, .09), transparent 30%),
    linear-gradient(135deg, #07111b, var(--color-page-bg-secondary));
}
html[data-theme="bitumen"] body :where(.pool-modal, .card-modal) {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-modal);
}
html[data-theme="bitumen"] body .pool-modal-header {
  background: linear-gradient(135deg, var(--color-surface-raised), var(--color-surface));
  color: var(--color-text-primary);
  border-color: var(--color-divider);
}
html[data-theme="bitumen"] body :where(.pool-modal-body, .card-modal-body) {
  background: var(--color-surface-inset);
  color: var(--color-text-primary);
}
html[data-theme="bitumen"] body .pool-modal-tabs { background: var(--color-surface-secondary); }
html[data-theme="bitumen"] .unified-tool-template {
  --tool-surface: var(--color-surface);
  --tool-surface-strong: var(--color-surface-raised);
  --tool-border: var(--color-border);
}
html[data-theme="bitumen"] .unified-tool-template :where(.tool-left-panel, .card-surface,
  .source-status-card, .tool-kpi-list > div, .bf-side-kpis > div, .bf-kpi-grid > div,
  .bp-kpi-grid > div, .metric-mini, .unified-result-table) {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
  box-shadow: none;
}
html[data-theme="bitumen"] .unified-tool-template :where(.source-status-card.ok, .well-pick.active) {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
}
html[data-theme="bitumen"] .unified-tool-template :where(.bf-top-tabs, .builder-tabs) {
  background: var(--color-surface-secondary);
  border-color: var(--color-border);
}
html[data-theme="bitumen"] .unified-tool-template :where(.bf-tab.active, .bp-tab.active, .prototype-tab.active) {
  color: var(--color-link);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-small);
}
html[data-theme="bitumen"] .unified-tool-template :where(input:not([type="checkbox"]):not([type="range"]), select, textarea) {
  color: var(--color-text-primary);
  background: var(--color-control-bg);
  border-color: var(--color-border-strong);
}
html[data-theme="bitumen"] .unified-tool-template :where(.plot-card, .prototype-result-card,
  .property-map-card, .bf-result-card, .bp-result-card) {
  background: var(--color-surface-raised);
}
html[data-theme="bitumen"] .unified-tool-template :where(.chart-wrap, .property-map-2d-viewer,
  .property-map-3d-viewer, .expert-plot, .curve-box, .svg-box) {
  background: var(--chart-plot-bg);
  color: var(--chart-text);
  border-color: var(--color-border);
}
html[data-theme="bitumen"] .unified-result-table th { background: var(--color-surface-secondary); color: var(--color-text-secondary); }
html[data-theme="bitumen"] :where(.tool-left-panel, .well-pick, .tool-kpi-list > div, .metric-mini) {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
html[data-theme="bitumen"] :where(.chart-with-axes text, .curve-svg text) { stroke: var(--chart-plot-bg); }

/* Shale: dark shell + neutral light cards + turquoise interaction. It is not a
   half-applied Bitumen mode; every mixed surface is intentional and token-driven. */
html[data-theme="shale"] body {
  color: var(--color-text-primary);
  background:
    radial-gradient(circle at 14% 8%, rgba(24, 191, 181, .10), transparent 31%),
    radial-gradient(circle at 88% 18%, rgba(72, 111, 146, .14), transparent 30%),
    linear-gradient(135deg, #7f8e96, var(--color-page-bg) 54%, #a6b1b7);
}
html[data-theme="shale"] body.auth-page {
  background: linear-gradient(135deg, #84939b, #a8b3b9);
}
html[data-theme="shale"] .glass {
  background: var(--color-surface-glass);
  color: var(--color-text-primary);
  border-color: rgba(255,255,255,.42);
  box-shadow: var(--shadow-card);
}
html[data-theme="shale"] :where(.sidebar, .details-panel, .topbar, .page-topbar,
  .workspace-global-topbar, .session-menu-dropdown, .sidebar-account-card,
  .card-surface, .info-card, .result-card, .metric-card, .admin-panel, .admin-card,
  .admin-content, .admin-section, .knowledge-card, .knowledge-course-card,
  .knowledge-section-card, .learning-card, .learning-task-card, .task-card) {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
html[data-theme="shale"] body .workspace {
  background:
    linear-gradient(rgba(245, 249, 250, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 249, 250, .10) 1px, transparent 1px),
    var(--color-surface-inset);
  background-size: 44px 44px;
  border-color: rgba(245,249,250,.28);
  box-shadow: var(--shadow-modal);
}
html[data-theme="shale"] :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  color: var(--color-text-primary);
  background: var(--color-control-bg);
  border-color: var(--color-border-strong);
}
html[data-theme="shale"] :where(input, textarea)::placeholder { color: var(--color-text-muted); opacity: 1; }
html[data-theme="shale"] :where(option) { color: var(--color-text-primary); background: var(--color-control-bg); }
html[data-theme="shale"] :where(.helper, .muted, .subtitle, .page-subtitle, .modal-subtitle,
  .brand-subtitle, .session-menu-kicker, .session-menu-copy span, .card-note,
  .upload-note, .admin-note, .knowledge-meta, .task-meta, .learning-meta, small) {
  color: var(--color-text-secondary);
}
html[data-theme="shale"] body :where(.modal-shell, .card-modal-shell) {
  background:
    radial-gradient(circle at 12% 12%, rgba(24, 191, 181, .11), transparent 33%),
    linear-gradient(135deg, #6f7e87, #98a5ac);
}
html[data-theme="shale"] body :where(.pool-modal, .card-modal) {
  background: var(--color-surface-inset);
  border-color: rgba(242,248,250,.34);
  box-shadow: var(--shadow-modal);
}
html[data-theme="shale"] body .pool-modal-header {
  background: linear-gradient(135deg, #eef2f3, #dbe2e4);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
html[data-theme="shale"] body :where(.pool-modal-body, .card-modal-body) {
  color: var(--color-text-primary);
  background: var(--color-surface-inset);
}
html[data-theme="shale"] .unified-tool-template {
  --tool-surface: rgba(222, 227, 229, .98);
  --tool-surface-strong: rgba(244, 246, 247, .99);
  --tool-border: rgba(25, 53, 70, .15);
}
html[data-theme="shale"] .unified-tool-template :where(.tool-left-panel, .card-surface,
  .source-status-card, .tool-kpi-list > div, .bf-side-kpis > div, .bf-kpi-grid > div,
  .bp-kpi-grid > div, .metric-mini, .unified-result-table) {
  color: var(--color-text-primary);
  border-color: var(--tool-border);
}
html[data-theme="shale"] .unified-tool-template :where(input:not([type="checkbox"]):not([type="range"]), select, textarea) {
  color: var(--color-text-primary);
  background: var(--color-control-bg);
  border-color: rgba(160, 179, 188, .55);
}
html[data-theme="shale"] .unified-tool-template :where(.chart-wrap, .property-map-2d-viewer,
  .property-map-3d-viewer, .expert-plot, .curve-box, .svg-box) {
  background: var(--chart-plot-bg);
  color: var(--chart-text);
  border-color: var(--color-border);
}
html[data-theme="shale"] .unified-tool-template .unified-result-table th { background: #e6ecee; }
html[data-theme="shale"] :where(.knowledge-article, .knowledge-toc, .knowledge-hero,
  .knowledge-course-card, .knowledge-section-row, .knowledge-continue, .knowledge-search-results) {
  background: var(--color-reading-surface);
  color: var(--color-reading-text);
  border-color: var(--color-border);
}
html[data-theme="shale"] .knowledge-content { color: var(--color-reading-text); }
html[data-theme="shale"] .knowledge-content :where(h2, h3, h4, h5, h6) { color: var(--color-text-primary); }
html[data-theme="shale"] :where(.knowledge-formula, .knowledge-task, .knowledge-exercise,
  .knowledge-task-condition, .knowledge-task-solution, .knowledge-options label,
  .knowledge-reading-mode) {
  color: var(--color-reading-text);
  background: var(--color-surface-raised);
  border-color: var(--color-border);
}
html[data-theme="shale"] :where(.chart-with-axes text, .curve-svg text) { stroke: var(--chart-plot-bg); }

/* Legacy unified-card input rule has several pseudo-class components and therefore
   needs an equally explicit bridge in Bitumen mode. Shale intentionally keeps these controls light. */
html[data-theme="bitumen"] body .unified-tool-template input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-theme="bitumen"] body .unified-tool-template select,
html[data-theme="bitumen"] body .unified-tool-template textarea {
  color: var(--color-text-primary);
  background: var(--color-control-bg);
  border-color: var(--color-border-strong);
  box-shadow: none;
}
html[data-theme="bitumen"] body .unified-tool-template input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
html[data-theme="bitumen"] body .unified-tool-template select:focus,
html[data-theme="bitumen"] body .unified-tool-template textarea:focus {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}

/* Stage 4: Bitumen is a fully dark theme. These high-specificity bridges cover
   legacy white card literals that intentionally remain light in the other themes. */
html[data-theme="bitumen"] body :where(.library-card, .desk-card) {
  color: var(--color-text-primary);
  background: var(--color-surface-secondary);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-card);
}
html[data-theme="bitumen"] body .library-card.selected {
  color: var(--color-text-primary);
  background: linear-gradient(135deg, var(--color-surface-raised), var(--color-surface-secondary));
  border-color: var(--color-accent);
}
html[data-theme="bitumen"] body :where(.library-icon, .handle-btn) {
  color: var(--color-link);
  background: var(--color-accent-soft);
}
html[data-theme="bitumen"] body :where(.session-menu-trigger, .workspace-session-menu .session-menu-trigger,
  .portal-session-menu .session-menu-trigger, .page-topbar .session-menu-trigger) {
  color: var(--color-text-primary);
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-card);
}
html[data-theme="bitumen"] body :where(.session-menu:hover .session-menu-trigger,
  .session-menu:focus-within .session-menu-trigger) {
  color: var(--color-text-primary);
  background: var(--color-surface-raised);
  border-color: var(--color-accent);
}
html[data-theme="bitumen"] body :where(.session-menu-chevron, .session-menu-copy span:last-child) {
  color: var(--color-text-secondary);
}
html[data-theme="bitumen"] body .session-menu .session-menu-trigger {
  color: var(--color-contrast-text);
  background: var(--color-contrast-surface);
  border-color: var(--color-border-strong);
}
html[data-theme="bitumen"] body .session-menu:hover .session-menu-trigger,
html[data-theme="bitumen"] body .session-menu:focus-within .session-menu-trigger,
html[data-theme="bitumen"] body .session-menu.open .session-menu-trigger {
  color: var(--color-contrast-text);
  background: var(--color-contrast-surface-hover);
  border-color: var(--color-accent);
}
html[data-theme="bitumen"] body :where(.knowledge-main-nav, .knowledge-search input,
  .session-density select, .theme-choice-option, .density-control select) {
  color: var(--color-text-primary);
  background: var(--color-surface-secondary);
  border-color: var(--color-border-strong);
}
html[data-theme="bitumen"] body .knowledge-search input:focus {
  background: var(--color-surface-raised);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}
html[data-theme="bitumen"] body .knowledge-main-nav a.active,
html[data-theme="bitumen"] body .theme-choice-option:has(input:checked) {
  color: var(--color-link);
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
}
html[data-theme="bitumen"] body :where(.portal-brand, .topbar-brand) {
  color: var(--color-text-primary);
  background: var(--color-surface);
  border-color: var(--color-border);
}
html[data-theme="bitumen"] body :where(.knowledge-progress-ring::before) {
  background: var(--color-surface);
}

/* Shale: calm cool-gray daylight. It keeps soft mineral surfaces and avoids the
   black control blocks reserved for Anthracite. */
html[data-theme="shale"] body :where(.library-card, .desk-card, .session-menu-trigger,
  .knowledge-main-nav, .knowledge-search input, .session-density select,
  .theme-choice-option, .density-control select) {
  color: var(--color-text-primary);
  background: var(--color-surface-raised);
  border-color: var(--color-border);
}
html[data-theme="shale"] body :where(.sidebar, .details-panel, .topbar, .page-topbar,
  .workspace-global-topbar, .session-menu-dropdown, .card-surface, .info-card,
  .result-card, .metric-card, .knowledge-card, .knowledge-course-card,
  .knowledge-section-card, .learning-card, .learning-task-card, .task-card) {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
html[data-theme="shale"] body .workspace {
  background:
    linear-gradient(rgba(248, 251, 252, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248, 251, 252, .10) 1px, transparent 1px),
    var(--color-surface-inset);
  background-size: 44px 44px;
  border-color: rgba(248, 251, 252, .28);
}
html[data-theme="shale"] body :where(.session-menu:hover .session-menu-trigger,
  .session-menu:focus-within .session-menu-trigger, .library-card.selected) {
  background: linear-gradient(135deg, var(--color-surface-raised), var(--color-surface-secondary));
  border-color: var(--color-accent);
}

/* Anthracite: graphite shell, light calculation cards, dark parameter controls
   and turquoise actions with dark lettering. */
html[data-theme="anthracite"] body {
  color: var(--color-text-primary);
  background:
    radial-gradient(circle at 14% 8%, rgba(19, 155, 150, .075), transparent 31%),
    radial-gradient(circle at 88% 18%, rgba(104, 128, 143, .13), transparent 30%),
    linear-gradient(135deg, #344149, var(--color-page-bg) 54%, #4b5961);
}
html[data-theme="anthracite"] body.auth-page {
  background: linear-gradient(135deg, #344149, #4a5861);
}
html[data-theme="anthracite"] .glass {
  color: var(--color-text-primary);
  background: var(--color-surface-glass);
  border-color: rgba(244, 248, 249, .38);
  box-shadow: var(--shadow-card);
}
html[data-theme="anthracite"] :where(.sidebar, .details-panel, .topbar, .page-topbar,
  .workspace-global-topbar, .session-menu-dropdown, .sidebar-account-card,
  .card-surface, .info-card, .result-card, .metric-card, .admin-panel, .admin-card,
  .admin-content, .admin-section, .knowledge-card, .knowledge-course-card,
  .knowledge-section-card, .learning-card, .learning-task-card, .task-card) {
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  border-color: var(--color-border);
}
html[data-theme="anthracite"] body .workspace {
  background:
    linear-gradient(rgba(222, 232, 235, .065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(222, 232, 235, .065) 1px, transparent 1px),
    var(--color-surface-inset);
  background-size: 44px 44px;
  border-color: rgba(235, 242, 244, .18);
  box-shadow: var(--shadow-modal);
}
html[data-theme="anthracite"] body :where(.library-card, .desk-card) {
  color: var(--color-text-primary);
  background: var(--color-surface-raised);
  border-color: rgba(255, 255, 255, .58);
  box-shadow: var(--shadow-card);
}
html[data-theme="anthracite"] body .library-card.selected {
  background: linear-gradient(135deg, var(--color-surface-raised), #d5e8e7);
  border-color: var(--color-accent);
}
html[data-theme="anthracite"] body :where(.session-menu-trigger, .workspace-session-menu .session-menu-trigger,
  .portal-session-menu .session-menu-trigger, .page-topbar .session-menu-trigger,
  .knowledge-main-nav) {
  color: var(--color-contrast-text);
  background: var(--color-contrast-surface);
  border-color: rgba(126, 158, 174, .30);
  box-shadow: var(--shadow-card);
}
html[data-theme="anthracite"] body :where(.session-menu-trigger .session-menu-kicker,
  .knowledge-main-nav a.active) { color: var(--color-accent-secondary); }
html[data-theme="anthracite"] body :where(.session-menu-trigger .session-menu-copy strong) { color: var(--color-contrast-text); }
html[data-theme="anthracite"] body :where(.session-menu-trigger .session-menu-copy span:last-child,
  .session-menu-trigger .session-menu-chevron, .knowledge-main-nav a) { color: var(--color-contrast-muted); }
html[data-theme="anthracite"] body :where(.session-menu:hover .session-menu-trigger,
  .session-menu:focus-within .session-menu-trigger) {
  background: var(--color-contrast-surface-hover);
  border-color: var(--color-accent);
}
html[data-theme="anthracite"] body :where(.knowledge-main-nav a.active) {
  background: rgba(19, 155, 150, .13);
}
html[data-theme="anthracite"] body :where(.knowledge-search input, .session-density select,
  .density-control select, .unified-tool-template input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .unified-tool-template select, .unified-tool-template textarea) {
  color: var(--color-contrast-text);
  background: var(--color-control-bg);
  border-color: rgba(126, 158, 174, .38);
}
html[data-theme="anthracite"] body :where(input, textarea)::placeholder {
  color: var(--color-contrast-muted);
  opacity: 1;
}
html[data-theme="anthracite"] body :where(option) {
  color: var(--color-contrast-text);
  background: var(--color-control-bg);
}
html[data-theme="anthracite"] body :where(.btn:not(.ghost), .library-add-btn) {
  color: var(--color-accent-contrast);
}
html[data-theme="anthracite"] body :where(.btn.ghost, .icon-btn, .map-reset,
  .theme-choice-option, .handle-btn) {
  color: var(--color-contrast-text);
  background: var(--color-contrast-surface);
  border-color: rgba(126, 158, 174, .30);
  box-shadow: none;
}
html[data-theme="anthracite"] body :where(.btn.ghost:hover, .icon-btn:hover, .map-reset:hover,
  .theme-choice-option:hover, .handle-btn:hover) {
  color: var(--color-contrast-text);
  background: var(--color-contrast-surface-hover);
  border-color: var(--color-accent);
}
html[data-theme="anthracite"] body .theme-choice-option:has(input:checked) {
  color: var(--color-accent-contrast);
  background: var(--color-accent);
  border-color: var(--color-accent);
}
html[data-theme="anthracite"] body :where(.modal-shell, .card-modal-shell) {
  background:
    radial-gradient(circle at 12% 12%, rgba(19, 155, 150, .075), transparent 33%),
    linear-gradient(135deg, #334149, #4a5861);
}
html[data-theme="anthracite"] body :where(.pool-modal, .card-modal) {
  color: var(--color-text-primary);
  background: var(--color-surface-inset);
  border-color: rgba(235, 242, 244, .24);
  box-shadow: var(--shadow-modal);
}
html[data-theme="anthracite"] body .pool-modal-header {
  color: var(--color-text-primary);
  background: linear-gradient(135deg, var(--color-surface-raised), var(--color-surface-secondary));
  border-color: var(--color-border);
}
html[data-theme="anthracite"] body :where(.pool-modal-body, .card-modal-body) {
  color: var(--color-text-primary);
  background: var(--color-surface-inset);
}
html[data-theme="anthracite"] .unified-tool-template {
  --tool-surface: rgba(208, 213, 215, .98);
  --tool-surface-strong: rgba(238, 241, 242, .99);
  --tool-border: rgba(22, 45, 57, .18);
}
html[data-theme="anthracite"] .unified-tool-template :where(.tool-left-panel, .card-surface,
  .source-status-card, .tool-kpi-list > div, .bf-side-kpis > div, .bf-kpi-grid > div,
  .bp-kpi-grid > div, .metric-mini, .unified-result-table) {
  color: var(--color-text-primary);
  border-color: var(--tool-border);
}
html[data-theme="anthracite"] .unified-tool-template :where(.bf-top-tabs, .builder-tabs,
  .card-mode-strip) {
  color: var(--color-contrast-text);
  background: var(--color-contrast-surface);
  border-color: rgba(126, 158, 174, .30);
}
html[data-theme="anthracite"] .unified-tool-template :where(.bf-tab, .bp-tab, .prototype-tab,
  .mode-pill) { color: var(--color-contrast-muted); }
html[data-theme="anthracite"] .unified-tool-template :where(.bf-tab.active, .bp-tab.active,
  .prototype-tab.active, .mode-pill.active) {
  color: var(--color-accent-contrast);
  background: var(--color-accent);
  box-shadow: none;
}
html[data-theme="anthracite"] .unified-tool-template :where(.chart-wrap, .property-map-2d-viewer,
  .property-map-3d-viewer, .expert-plot, .curve-box, .svg-box) {
  color: var(--chart-text);
  background: var(--chart-plot-bg);
  border-color: var(--color-border);
}
html[data-theme="anthracite"] :where(.knowledge-article, .knowledge-toc, .knowledge-hero,
  .knowledge-course-card, .knowledge-section-row, .knowledge-continue, .knowledge-search-results) {
  color: var(--color-reading-text);
  background: var(--color-reading-surface);
  border-color: var(--color-border);
}
html[data-theme="anthracite"] .knowledge-content { color: var(--color-reading-text); }
html[data-theme="anthracite"] :where(.knowledge-formula, .knowledge-task, .knowledge-exercise,
  .knowledge-task-condition, .knowledge-task-solution, .knowledge-options label,
  .knowledge-reading-mode) {
  color: var(--color-reading-text);
  background: var(--color-surface-raised);
  border-color: var(--color-border);
}
html[data-theme="anthracite"] body .knowledge-interactive-model :where(input:not([type="range"]), select, textarea),
html[data-theme="anthracite"] body .unified-tool-template :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  color: var(--color-contrast-text) !important;
  -webkit-text-fill-color: var(--color-contrast-text);
  background: var(--color-control-bg) !important;
  border-color: rgba(126, 158, 174, .42) !important;
  opacity: 1;
}
html[data-theme="anthracite"] body .knowledge-interactive-model :where(input, textarea)::placeholder,
html[data-theme="anthracite"] body .unified-tool-template :where(input, textarea)::placeholder {
  color: var(--color-contrast-muted);
  -webkit-text-fill-color: var(--color-contrast-muted);
}
html[data-theme="anthracite"] body :where(.knowledge-toc nav a, .knowledge-toc-tasks summary) { color: #526a74; }
html[data-theme="anthracite"] body .knowledge-toc nav a.active { color: var(--color-link); background: var(--color-accent-soft); }
html[data-theme="anthracite"] :where(.chart-with-axes text, .curve-svg text) { stroke: var(--chart-plot-bg); }

/* Compound legacy session selectors have higher specificity than `.glass` bridges. */
html[data-theme="anthracite"] body .workspace-session-menu .session-menu-trigger,
html[data-theme="anthracite"] body .portal-session-menu .session-menu-trigger,
html[data-theme="anthracite"] body .page-topbar .session-menu-trigger {
  color: var(--color-contrast-text);
  background: var(--color-contrast-surface);
  border-color: rgba(126, 158, 174, .30);
  box-shadow: var(--shadow-card);
}
html[data-theme="anthracite"] body .workspace-session-menu:hover .session-menu-trigger,
html[data-theme="anthracite"] body .portal-session-menu:hover .session-menu-trigger,
html[data-theme="anthracite"] body .page-topbar .session-menu:hover .session-menu-trigger,
html[data-theme="anthracite"] body .workspace-session-menu:focus-within .session-menu-trigger,
html[data-theme="anthracite"] body .portal-session-menu:focus-within .session-menu-trigger,
html[data-theme="anthracite"] body .page-topbar .session-menu:focus-within .session-menu-trigger {
  background: var(--color-contrast-surface-hover);
  border-color: var(--color-accent);
}


/* Stage 4.2: focused bridges for legacy pool and calculation-card literals. */
.session-menu-link-icon {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  place-items: center;
  border-radius: 8px;
  color: currentColor;
  background: var(--color-accent-soft);
  font-size: 13px;
  font-weight: 900;
}
.session-menu-link[aria-current="page"] {
  color: var(--color-link);
  background: var(--color-surface-active);
}

html[data-theme]:not([data-theme="condensate"]) body .data-assets-summary {
  color: var(--color-text-primary);
  background: linear-gradient(135deg, var(--color-accent-soft), var(--color-surface-raised));
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-card);
}
html[data-theme]:not([data-theme="condensate"]) body .data-assets-summary :where(h3, .overview-caption) {
  color: var(--color-text-primary);
}
html[data-theme]:not([data-theme="condensate"]) body .data-assets-summary p {
  color: var(--color-text-secondary);
}
html[data-theme]:not([data-theme="condensate"]) body .data-assets-metrics span {
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
html[data-theme]:not([data-theme="condensate"]) body .data-assets-metrics b {
  color: var(--color-text-primary);
}
html[data-theme]:not([data-theme="condensate"]) body :where(.data-asset-card, .data-asset-version-stack::before, .data-asset-version-stack::after) {
  color: var(--color-text-primary);
  background: var(--color-surface-raised);
  border-color: var(--color-border-strong);
}
html[data-theme]:not([data-theme="condensate"]) body :where(.data-asset-title, .data-asset-values b, .data-state-column-head b, .data-assets-section > .info-title) {
  color: var(--color-text-primary);
}
html[data-theme]:not([data-theme="condensate"]) body :where(.data-asset-card code, .data-asset-values, .data-asset-values small,
  .data-asset-empty, .data-asset-footer > span, .data-state-column-head, .data-state-empty) {
  color: var(--color-text-secondary);
}
html[data-theme]:not([data-theme="condensate"]) body :where(.data-asset-meta span, .data-asset-source span, .data-state-column-head span) {
  background: var(--color-surface-secondary);
  border-color: var(--color-border);
}

html[data-theme="anthracite"] body .unified-tool-template .tool-grid label,
html[data-theme="anthracite"] body .unified-tool-template :where(.pm-settings-title, .pm-map-select),
html[data-theme="bitumen"] body .unified-tool-template .tool-grid label,
html[data-theme="bitumen"] body .unified-tool-template :where(.pm-settings-title, .pm-map-select) {
  color: var(--color-text-primary);
}
html[data-theme="anthracite"] body .unified-tool-template .tool-grid input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-theme="anthracite"] body .unified-tool-template .tool-grid select,
html[data-theme="anthracite"] body .unified-tool-template .pm-map-select select,
html[data-theme="bitumen"] body .unified-tool-template .tool-grid input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-theme="bitumen"] body .unified-tool-template .tool-grid select,
html[data-theme="bitumen"] body .unified-tool-template .pm-map-select select {
  color: var(--color-contrast-text);
  background: var(--color-control-bg);
  border-color: var(--color-border-strong);
  box-shadow: none;
}
html[data-theme="anthracite"] body .unified-tool-template :where(.source-status-card, .bf-kpi-grid > div, .bp-kpi-grid > div, .tool-kpi-list > div, .metric-mini) {
  color: var(--color-text-primary);
  background: var(--color-surface-raised);
}
html[data-theme="anthracite"] body .unified-tool-template :where(.source-status-card, .bf-kpi-grid > div, .bp-kpi-grid > div, .tool-kpi-list > div, .metric-mini) :where(strong, span, small, b) {
  color: inherit;
}


/* 2026-08-11 · Card Shell v1.2 cross-theme fixes.
   The source line sits on the dark modal canvas in Anthracite, while the three zones remain light.
   Bitumen must not re-introduce legacy nested card surfaces inside the shell. */
html[data-theme="anthracite"] body .card-shell-v1 .card-shell-source-line {
  color: var(--color-contrast-muted);
}
html[data-theme="anthracite"] body .card-shell-v1 .card-shell-source-line span {
  color: var(--color-contrast-muted);
}
html[data-theme="anthracite"] body .card-shell-v1 .card-shell-source-line b {
  color: var(--color-contrast-text);
}
html[data-theme="bitumen"] body .card-shell-v1 .card-shell-zone-content > .card-surface,
html[data-theme="bitumen"] body .card-shell-v1 .card-shell-zone-content > .plot-card,
html[data-theme="bitumen"] body .card-shell-v1 .card-shell-zone-content > .property-map-card,
html[data-theme="bitumen"] body .card-shell-v1 .card-shell-zone-content > .bf-result-card {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html[data-theme="bitumen"] body .card-shell-v1 .result-callout.muted {
  color: var(--color-text-secondary);
  background: var(--color-surface-secondary);
  border-color: var(--color-border);
}

/* 2026-08-11 · Card Shell v1.3 / session control readability.
   The older .page-topbar selector is more specific than the generic Bitumen
   override, so pin the density selector to the dark control palette here. */
html[data-theme="bitumen"] body .page-topbar .session-density select {
  color: var(--color-contrast-text) !important;
  background: var(--color-control-bg) !important;
  border-color: var(--color-border-strong) !important;
  color-scheme: dark;
}
html[data-theme="bitumen"] body .page-topbar .session-density select option {
  color: var(--color-contrast-text);
  background: var(--color-control-bg);
}

/* 2026-08-27 · One platform chrome on every page.
   Theme surfaces belong to the two header cards, never to the full-width row. */
html body :where(.portal-topbar-minimal, .page-topbar, .workspace-global-topbar) {
  position: relative;
  top: auto;
  z-index: 100;
  display: flex;
  width: 100%;
  min-height: var(--platform-topbar-min, 82px);
  box-sizing: border-box;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--platform-section-gap, 16px);
  margin: 0 0 var(--platform-section-gap, 16px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
}

html body :where(.portal-brand, .topbar-brand) {
  height: 74px;
  min-height: 74px;
  box-sizing: border-box;
  margin: 0;
  padding: var(--platform-brand-pad-y, 12px) var(--platform-brand-pad-x, 16px);
  border: 1px solid var(--color-border);
  border-radius: var(--platform-panel-radius, 24px);
  color: var(--color-text-primary);
  background: var(--color-surface-glass) !important;
  box-shadow: var(--shadow-small) !important;
}

html body :where(.portal-topbar-minimal, .page-topbar) .session-menu {
  margin: 0 0 0 auto;
}

html body :where(.portal-topbar-minimal, .page-topbar) .session-menu-trigger {
  min-width: var(--platform-session-width, 286px);
  height: 74px;
  min-height: 74px;
  grid-template-columns: minmax(0, 1fr) var(--platform-session-avatar, 48px) 14px;
  gap: 12px;
  padding: var(--platform-brand-pad-y, 12px) 14px var(--platform-brand-pad-y, 12px) var(--platform-brand-pad-x, 16px);
  border: 1px solid var(--color-border);
  border-radius: var(--platform-panel-radius, 24px);
  color: var(--color-text-primary) !important;
  background: var(--color-surface-glass) !important;
  box-shadow: var(--shadow-small) !important;
}

html body :where(.portal-topbar-minimal, .page-topbar) .session-menu-trigger :where(.session-menu-copy strong, .session-menu-kicker, .session-menu-copy span:last-child, .session-menu-chevron) {
  color: inherit;
}

html body :where(.portal-topbar-minimal, .page-topbar) .session-menu-trigger .session-menu-copy strong {
  color: var(--color-text-primary) !important;
}

html body :where(.portal-topbar-minimal, .page-topbar) .session-menu-trigger .session-menu-kicker,
html body :where(.portal-topbar-minimal, .page-topbar) .session-menu-trigger .session-menu-copy span:last-child,
html body :where(.portal-topbar-minimal, .page-topbar) .session-menu-trigger .session-menu-chevron {
  color: var(--color-text-secondary) !important;
}

html body :where(.portal-topbar-minimal, .page-topbar) .session-menu-avatar {
  width: var(--platform-session-avatar, 48px);
  height: var(--platform-session-avatar, 48px);
}

/* Text directly on the page canvas needs its own contrast role. Panels keep
   using --color-text-primary because Anthracite intentionally has light cards. */
html body :where(.knowledge-material-section > header h2, .knowledge-smart-header h1, .page-canvas-title) {
  color: var(--color-page-text-primary, var(--color-text-primary));
}
html body :where(.knowledge-material-section > header p, .page-canvas-copy) {
  color: var(--color-page-text-secondary, var(--color-text-secondary));
}

html[data-theme="anthracite"] body .knowledge-hero-actions .btn.ghost {
  color: var(--color-text-primary);
  background: var(--color-surface-secondary);
  border-color: var(--color-border);
}
html[data-theme="anthracite"] body .knowledge-hero-actions .btn.ghost:hover {
  color: var(--color-accent-active);
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
}

@media (max-width: 760px) {
  html body :where(.portal-topbar-minimal, .page-topbar, .workspace-global-topbar) {
    min-height: 0;
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }
  html body :where(.portal-brand, .topbar-brand, .portal-topbar-minimal .session-menu, .page-topbar .session-menu, .portal-topbar-minimal .session-menu-trigger, .page-topbar .session-menu-trigger) {
    width: 100%;
  }
}