/* Atomurus UI V2 — Periodic Table chrome
   Loaded after public-shell.css. Tokens come from assets/ui/index.css.
   Do not restyle .el cells, .ptable grid, heatmap science, or element modals.
   !important is only to beat lab-console / public-shell until Prompt 13. */

html body.ps-body .content {
  font-family: var(--font-ui);
  color: var(--color-text);
}

html body.ps-body .ps-shell .ph-kicker {
  font-family: var(--font-ui) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--color-text-muted) !important;
  margin-bottom: var(--space-3) !important;
}

html body.ps-body .ps-shell .ph-title {
  font-family: var(--font-serif) !important;
  font-size: clamp(34px, 5vw, 48px) !important;
  line-height: var(--leading-tight) !important;
  letter-spacing: -0.02em !important;
  font-weight: 400 !important;
  color: var(--color-text) !important;
  margin: 0 0 var(--space-3) !important;
}

html body.ps-body .ps-shell .ph-desc {
  font-size: var(--text-lg) !important;
  color: var(--color-text-muted) !important;
  max-width: 62ch !important;
  line-height: var(--leading-relaxed) !important;
  margin: 0 0 var(--space-4) !important;
}

html body.ps-body .ps-shell .pt-solver-cta {
  margin: 0 0 var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}
html body.ps-body .ps-shell .pt-solver-cta a {
  color: var(--color-brand);
  font-weight: 600;
}

html body.ps-body .ps-shell .pt-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-1) !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 0 var(--space-5) !important;
  padding: var(--space-1) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  background: color-mix(in oklab, var(--color-surface) 70%, var(--color-bg)) !important;
  box-shadow: none !important;
}
html body.ps-body .ps-shell .pt-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  min-height: 36px !important;
  padding: 6px 12px !important;
  border: 0 !important;
  border-radius: var(--radius-md) !important;
  background: transparent !important;
  color: var(--color-text-muted) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--text-sm) !important;
  font-weight: 550 !important;
  letter-spacing: 0 !important;
}
html body.ps-body .ps-shell .pt-tab.active,
html body.ps-body .ps-shell .pt-tab.active:visited {
  color: var(--color-brand) !important;
  background: color-mix(in oklab, var(--color-brand) 10%, transparent) !important;
}

html body.ps-body .ps-shell .legend {
  gap: var(--space-2) !important;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
html body.ps-body .ps-shell .legend-item,
html body.ps-body .ps-shell .legend-clear {
  min-height: 32px !important;
  padding: 4px 10px !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--text-sm) !important;
  letter-spacing: 0 !important;
}
html body.ps-body .ps-shell .legend-item.active-filter {
  background: color-mix(in oklab, var(--color-brand) 10%, transparent) !important;
  color: var(--color-brand) !important;
  border-color: color-mix(in oklab, var(--color-brand) 40%, var(--color-border)) !important;
}

html body.ps-body .ps-shell .dl-bar {
  gap: var(--space-1);
  margin: var(--space-4) 0;
  font-family: var(--font-ui);
}
html body.ps-body .ps-shell .dl-btn,
html body.ps-body .ps-shell .dl-action {
  min-height: 36px;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-ui) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 600 !important;
}
html body.ps-body .ps-shell .dl-btn.active {
  color: var(--color-brand) !important;
}
html body.ps-body .ps-shell .dl-action {
  background: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
  color: var(--color-on-brand) !important;
}

html body.ps-body .ps-shell .search-box {
  font-family: var(--font-ui);
}
html body.ps-body .ps-shell .search-box input {
  font-family: var(--font-ui);
}