/* Other explorers (molecules, JCESR, batteries, synthesis, catalysis, MOFs, XAS, contribs,
 * matscholar) — module CSS (MASTER §4.8: every rule is scoped under the module page class
 * .mp-oe-page, which page_frame() puts next to the per-page .mp-page-<key> class).
 *
 * Colours: SPREE Materials Hub / UNSW tokens only (docs/BRAND.md §2, defined in 10-mp-overrides.css):
 * text var(--hub-black), muted text var(--oe-muted) (#5F5F5F, the AA-safe muted grey on the #F2F2F2
 * page, see the SearchUI hub theme section at the end), links var(--hub-link), borders var(--hub-border),
 * active TOC pill / tabs = var(--hub-yellow) background with var(--hub-black) text, hovers and
 * highlights in the blue / yellow tints. Yellow is never used as a text or thin-line colour on a
 * light surface. Scientific colour scales (heatmap, element colours, plot traces) are untouched.
 *
 * Geometry notes (CSS px, measured on the real-site screenshots):
 *   TANGO battery__09/__11 (1792 px wide): detail = Bulma .container (1344 px at fullhd) with a
 *   is-3 left column (title 2.5rem, id 1.5rem, TOC) and the sections on the right.
 *   ASSETS 2023-11-02 10.58.15 AM: molecule detail, same container, scene box 575 px wide.
 *   TANGO catalysis__05: tabs right under the header band, detail in a .container.
 */

/* ------------------------------------------------------------------ SearchUI small sizes
 * Same correction as the Materials Explorer: the real theme renders Bulma "small" controls at
 * .85rem (TANGO battery__01 "Showing 1-15", synthesis__06 pills, catalysis__04 paginator). */
.mp-oe-page .mpc-search-ui .button.is-small,
.mp-oe-page .mpc-search-ui .input.is-small,
.mp-oe-page .mpc-search-ui .select.is-small,
.mp-oe-page .mpc-search-ui .pagination.is-small,
.mp-oe-page .mpc-search-ui .tabs.is-small,
.mp-oe-page .mpc-search-ui .subtitle.is-7,
.mp-oe-page .mpc-search-ui .tag:not(body):not(.is-medium):not(.is-large) {
  font-size: .85rem;
}
.mp-oe-page .mpc-search-ui .is-size-7 {
  font-size: .85rem !important;
}
.mp-oe-page .mp-search-bar > .container {
  max-width: 960px;
}
.mp-oe-page .mp-search-bar {
  padding-bottom: 1.5rem;
}
.mp-oe-page .mp-search-bar .mpc-materials-input {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ detail template */
.mp-oe-page .mp-oe-detail {
  padding-top: .25rem;
}
.mp-oe-page .mp-oe-detail-sticky {
  position: sticky;
  top: 1rem;
}
.mp-oe-page .mp-oe-detail-formula {
  font-size: 2.5rem;
  line-height: 1.15;
  color: var(--hub-black);
}
.mp-oe-page .mp-oe-detail-id {
  font-size: 1.5rem;
  color: var(--hub-black);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.mp-oe-page .mp-oe-toc {
  margin-top: 2rem;
}
.mp-oe-page .mp-oe-toc .menu-label {
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--oe-muted);
  margin-bottom: 1.25rem;
}
.mp-oe-page .mp-oe-toc .menu-list a {
  color: var(--hub-link);
  border-radius: 2px;
  padding: .45em .75em;
  line-height: 1.35;
}
.mp-oe-page .mp-oe-toc .menu-list a:hover {
  background-color: var(--hub-blue-tint);
  color: var(--hub-link-hover);
}
/* active TOC pill: yellow background, black text (BRAND §2) */
.mp-oe-page .mp-oe-toc .menu-list a.is-active,
.mp-oe-page .mp-oe-toc .menu-list a.is-active:hover {
  background-color: var(--hub-yellow);
  color: var(--hub-black);
  font-weight: 600;
}
.mp-oe-page .mp-oe-toc .menu-list li ul {
  border-left: 1px solid var(--hub-border);
  margin: .5em .75em .5em .85em;
  padding-left: .75em;
}
.mp-oe-page .mp-oe-section {
  scroll-margin-top: 1rem;
}
.mp-oe-page .mp-oe-section-title {
  font-size: 2rem;
  margin-bottom: 1.75rem !important;
}
.mp-oe-page .mp-oe-subsection {
  margin-bottom: 1.5rem;
  scroll-margin-top: 1rem;
}
.mp-oe-page .mp-oe-subsection-title {
  font-size: 1.5rem;
  margin-bottom: 1.25rem !important;
}
.mp-oe-page .mp-oe-section-rule {
  background-color: var(--hub-border);
  height: 1px;
  margin: 3.5rem 0 3rem;
}
.mp-oe-page .mp-oe-scene-box {
  padding: .75rem;
}
.mp-oe-page .mp-oe-viewer {
  position: relative;
}
.mp-oe-page .mp-oe-plot-box {
  padding: 1rem;
}

/* ------------------------------------------------------------------ batteries */
.mp-page-battery-detail.mp-oe-page .mp-oe-battery-props {
  max-width: 370px;
}
.mp-page-battery-detail.mp-oe-page .mp-oe-battery-props .mp-data-list td:first-child {
  width: 55%;
}
.mp-page-battery-detail.mp-oe-page .mp-oe-xaxis-select {
  max-width: 360px;
  margin: 1.75rem 0 1.5rem;
}
/* the voltage plot keeps its height across x-axis changes (the dcc.Loading wrapper it sits in
 * collapses to 0 px while a new figure loads; a percentage height would follow it) */
.mp-page-battery-detail.mp-oe-page .mp-oe-voltage-graph {
  height: 450px !important;
}
.mp-page-battery-detail.mp-oe-page .mp-oe-live-button .icon {
  margin-right: .25rem;
}
.mp-page-battery-detail.mp-oe-page .mp-oe-live-note {
  font-size: .9rem;
  margin-top: .4rem;
  color: var(--hub-black);
}
.mp-page-battery-detail.mp-oe-page .mp-oe-pairs-table .title.is-6,
.mp-page-battery-detail.mp-oe-page .mp-oe-pairs-header {
  font-weight: 400;
  color: var(--oe-muted);
}
.mp-page-battery-detail.mp-oe-page .mp-oe-oer-soon {
  font-size: 1.1rem;
  line-height: 1.6;
}
.mp-page-battery-detail.mp-oe-page .mp-oe-framework .mp-oe-subsection-title {
  margin-top: 1rem;
}

/* ------------------------------------------------------------------ synthesis */
.mp-page-synthesis.mp-oe-page .mp-oe-loading-placeholder {
  min-height: 60vh;
}
.mp-page-synthesis.mp-oe-page .mp-oe-band-placeholder {
  min-height: 9rem;
}

/* ------------------------------------------------------------------ molecules / JCESR */
.mp-oe-page .mp-oe-title-with-thumb {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.mp-oe-page .mp-oe-thumb {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
}
.mp-oe-page .mp-oe-subtitle-line {
  margin: 0;
  line-height: 1.35;
}
.mp-oe-page .mp-oe-molecule-id {
  margin-top: .5rem;
  font-size: 1rem;
}
.mp-oe-page .mp-oe-mol-selects .mpc-filter-field,
.mp-oe-page .mp-oe-mol-selects > div {
  margin-top: 1.5rem;
}
.mp-oe-page .mp-oe-solvent-string {
  font-size: .75rem;
  word-break: break-all;
}
.mp-oe-page .mp-point-group sub {
  font-size: .75em;
}
/* ASSETS/molecule_explorer_3.png (2x): a 200 px square drawing in a 240 px card, then a
 * 660 px data card whose table only takes its content width; the drawing area (beige #f5f5dc on
 * the original) uses the hub's light yellow tint */
.mp-page-jcesr-detail.mp-oe-page .mp-oe-jc-svg-box {
  padding: 20px;
}
.mp-page-jcesr-detail.mp-oe-page .mp-oe-jc-svg {
  display: block;
  width: 200px;
  height: 200px;
  object-fit: contain;
  background: var(--hub-yellow-tint-light);
}
/* molecules without an ``svg``: the message sits inside the same 200 x 200 tinted area */
.mp-page-jcesr-detail.mp-oe-page .mp-oe-jc-nosvg {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  font-size: .875rem;
  line-height: 1.4;
}
.mp-page-jcesr-detail.mp-oe-page .mp-oe-jc-data {
  max-width: 660px;
  padding: 1.25rem 1.25rem 1rem;
}
.mp-page-jcesr-detail.mp-oe-page .mp-oe-jc-data .mp-data-list {
  width: auto;
  min-width: 330px;
}

/* ------------------------------------------------------------------ catalysis (dcc.Tabs) */
.mp-oe-page .mp-oe-tabs {
  border-bottom: 1px solid var(--hub-border);
}
/* Dash 2 "classic" tab geometry (TANGO catalysis__01-05) in the hub palette instead of the Dash 4
 * theme (purple top border, navy label, translucent inactive tabs): inactive tabs #F9F9F9 with
 * black text, the selected tab yellow with black text and a 2px black top rule (BRAND §2) */
.mp-oe-page .mp-oe-tabs {
  --Dash-Fill-Interactive-Strong: var(--hub-black);
  --tabs-primary: var(--hub-black);
  --tabs-border: var(--hub-border);
  --tabs-background: var(--hub-bg-light);
}
.mp-oe-page .mp-oe-tabs .tab {
  font-size: 1rem;
  padding: 1.25rem;
  background-color: var(--hub-bg-light);
  color: var(--hub-black);
  border: 1px solid var(--hub-border);
  border-bottom: none;
  text-align: center;
}
.mp-oe-page .mp-oe-tabs .tab + .tab {
  border-left: none;
}
.mp-oe-page .mp-oe-tabs .tab:last-of-type {
  border-bottom: 1px solid var(--hub-border);
}
.mp-oe-page .mp-oe-tabs .tab:hover {
  background-color: var(--hub-blue-tint);
  color: var(--hub-black);
}
#react-entry-point .mp-oe-page .mp-oe-tabs .tab.tab--selected,
#react-entry-point .mp-oe-page .mp-oe-tabs .tab.tab--selected:hover {
  background-color: var(--hub-yellow);
  color: var(--hub-black);
  font-weight: 600;
  border-top: 2px solid var(--hub-black);
  border-bottom: none;
}
.mp-page-catalysis.mp-oe-page .mp-oe-cat-content {
  padding-top: 1.5rem;
}
/* the SearchUI band is full-bleed (TANGO catalysis__01/__04: sidebar edge to page edge) although
 * it sits inside the tab body: it breaks out of the 1.5rem content padding, and the Dash 4 tab
 * wrappers (overflow: hidden) must not clip it back to the tab width */
.mp-page-catalysis.mp-oe-page .mp-oe-cat-content .mp-search-bar {
  margin: -1.5rem -1.5rem 0;
}
.mp-page-catalysis.mp-oe-page .mp-oe-cat-content .tab-parent,
.mp-page-catalysis.mp-oe-page .mp-oe-cat-content .tab-content {
  overflow: visible;
}
.mp-page-catalysis.mp-oe-page .mp-oe-cat-content .mp-search-ui-content {
  padding-left: 0;
  padding-right: 0;
  min-height: 0;
}
.mp-page-catalysis.mp-oe-page .mp-oe-cat-detail {
  padding-top: .5rem;
}
.mp-page-catalysis.mp-oe-page .mp-oe-cat-detail .mp-oe-cat-title {
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--hub-black);
  margin-bottom: .25rem;
  line-height: 1.2;
}
.mp-page-catalysis.mp-oe-page .mp-oe-cat-detail .mp-oe-cat-subtitle {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--hub-black);
  margin-top: 0;
  margin-bottom: 1.75rem;
}
/* TANGO catalysis__05: ~41 px data-list rows (standard Bulma table cells) */
.mp-page-catalysis.mp-oe-page .mp-oe-cat-data .mp-data-list td {
  padding: .5em .75em;
  font-size: 1rem;
}
.mp-page-catalysis.mp-oe-page .mp-oe-cat-data .mp-data-list .label {
  font-size: 1rem;
}
/* "How to Cite" info message: hub link-blue header with white text (was rgb(84,140,203)) */
.mp-page-catalysis.mp-oe-page .mp-oe-cite .message-header {
  background-color: var(--hub-link);
  color: #fff;
}
.mp-page-catalysis.mp-oe-page .mp-oe-cite .message-body {
  color: var(--hub-black);
}
.mp-page-catalysis.mp-oe-page .mp-oe-cat-detail .message {
  font-size: 1.1rem;
}
.mp-page-catalysis.mp-oe-page .mp-oe-cat-detail .message p {
  margin-bottom: 0;
}
/* TANGO catalysis__05: the structure sits in a narrow column, 500 px wide (CT default scene) */
.mp-page-catalysis.mp-oe-page .mp-oe-cat-viz .mp-oe-cat-scene {
  width: 500px !important;
  max-width: 100%;
}
@media screen and (max-width: 768px) {
  .mp-page-catalysis.mp-oe-page .mp-oe-cat-viz .mp-oe-cat-scene {
    width: 100% !important;
  }
}
.mp-page-catalysis.mp-oe-page .mp-oe-cat-controls .mpc-filter-field,
.mp-page-catalysis.mp-oe-page .mp-oe-cat-controls > div {
  margin-bottom: 1rem;
}
.mp-page-catalysis.mp-oe-page .mp-oe-cat-controls {
  max-width: 420px;
}

/* ------------------------------------------------------------------ XAS */
.mp-page-xas.mp-oe-page .mp-oe-xas-plot {
  position: relative;
  padding: .5rem 1rem;
  overflow: hidden;
}
/* CT xas.py: "XANES pattern not available for this selection." over the empty figure */
.mp-page-xas.mp-oe-page .mp-oe-xas-plot-message {
  position: absolute;
  top: .75rem;
  left: 1rem;
  right: 1rem;
  z-index: 2;
}
.mp-page-xas.mp-oe-page .mp-oe-xas-plot-message:empty {
  display: none;
}
.mp-page-xas.mp-oe-page .mp-oe-popover-link {
  white-space: nowrap;
  line-height: 1.6;
}
/* the LINK_POPOVER popover (absolute, z-index 50) must not be clipped by the responsive table
 * wrapper (overflow: auto) — last row / single-row results cut its border (review r1) */
@media screen and (min-width: 769px) {
  .mp-page-xas.mp-oe-page .mpc-search-ui-data-table .react-data-table,
  .mp-page-xas.mp-oe-page .mpc-search-ui-data-table .rdt_Table,
  .mp-page-xas.mp-oe-page .mpc-search-ui-data-table .rdt_TableBody {
    overflow: visible;
  }
}

/* ------------------------------------------------------------------ MOF detail */
.mp-page-mof-detail.mp-oe-page .mp-oe-mof-summary,
.mp-page-mof-detail.mp-oe-page .mp-oe-mof-props {
  max-width: 720px;
}
.mp-page-mof-detail.mp-oe-page .mp-oe-mof-props .mp-data-list td:first-child,
.mp-page-mof-detail.mp-oe-page .mp-oe-mof-summary .mp-data-list td:first-child {
  width: 45%;
}
.mp-page-mof-detail.mp-oe-page .mp-oe-download-list li {
  margin-bottom: .35rem;
  overflow-wrap: anywhere;
}
.mp-page-mof-detail.mp-oe-page .mp-oe-download-link {
  cursor: pointer;
}

/* ------------------------------------------------------------------ contribs (portal look) */
.mp-page-contribs.mp-oe-page .mp-oe-ctb-tabs-wrap {
  padding: 1.5rem 1.5rem 0;
}
.mp-page-contribs.mp-oe-page .mp-oe-ctb-browse {
  padding-left: 0;
  padding-right: 0;
  min-height: 0;
}
.mp-page-contribs.mp-oe-page .mp-oe-ctb-tabs-wrap .mp-search-bar {
  margin: 1.5rem -1.5rem 0;
}
.mp-page-contribs.mp-oe-page .mp-oe-ctb-tabs-wrap .tab-parent,
.mp-page-contribs.mp-oe-page .mp-oe-ctb-tabs-wrap .tab-content {
  overflow: visible;  /* Dash 4 tab wrappers would clip the full-bleed band */
}
.mp-page-contribs.mp-oe-page .mp-oe-ctb-tabs-wrap .mp-search-ui-content {
  padding-left: 0;
  padding-right: 0;
}
.mp-page-contribs.mp-oe-page .mp-oe-ctb-filter {
  max-width: 560px;
}
.mp-oe-page .mp-oe-browse-table,
.mp-oe-page .mp-oe-contribs-table {
  white-space: nowrap;
}
.mp-oe-page .mp-oe-browse-table td,
.mp-oe-page .mp-oe-browse-table th {
  vertical-align: middle;
}
.mp-oe-page .mp-oe-browse-table .mp-oe-sum-row th {
  border-top: 2px solid var(--hub-border);
}
.mp-oe-page .mp-oe-browse-table tbody tr:hover,
.mp-oe-page .mp-oe-contribs-table tbody tr:hover {
  background-color: var(--hub-blue-tint);
}
.mp-oe-page .mp-oe-author-link {
  color: var(--hub-link);
}
.mp-oe-page span.mp-oe-author-link {
  color: var(--hub-black);
}
.mp-oe-page .mp-oe-reveal-trigger {
  cursor: pointer;
}
.mp-oe-page .mp-oe-reveal-target.is-block:not([hidden]) {
  display: block;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-landing-refs .breadcrumb {
  vertical-align: baseline;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-landing-description {
  margin-bottom: .75rem;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-other-summary {
  cursor: pointer;
  font-weight: 600;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-other-table {
  margin-top: .5rem;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-license {
  vertical-align: super;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-ctb-level {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-ctb-level .heading {
  letter-spacing: .1em;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-ctb-field-select {
  width: 11rem;
  font-size: .85rem;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-ctb-field-select .Select-control {
  height: 30px;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-ctb-columns {
  position: relative;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-ctb-columns > summary {
  list-style: none;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-ctb-columns > summary::-webkit-details-marker {
  display: none;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-ctb-columns-menu {
  position: absolute;
  z-index: 20;
  min-width: 14rem;
  max-height: 22rem;
  overflow: auto;
  margin-top: .25rem;
  font-size: .875rem;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-group-header {
  border-bottom-width: 1px;
  color: var(--oe-muted);
  font-weight: 600;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-contribs-table td,
.mp-page-contribs-project.mp-oe-page .mp-oe-contribs-table th {
  font-size: .875rem;
  vertical-align: middle;
}
.mp-oe-page .mp-oe-sort-link {
  color: var(--hub-black);
}
.mp-oe-page .mp-oe-component-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}
.mp-oe-page .mp-oe-component-tag {
  margin-bottom: 0 !important;
}
.mp-oe-page .mp-oe-component-tag .tag {
  margin-bottom: 0 !important;
}
.mp-oe-page .mp-oe-cid-tag .icon {
  margin-right: .15rem;
}
.mp-page-contribs-contribution.mp-oe-page .mp-oe-ctb-card .card {
  margin-bottom: 1.5rem;
}
.mp-page-contribs-contribution.mp-oe-page .mp-oe-ctb-contribution-level {
  margin-bottom: 1.5rem;
}

/* ------------------------------------------------------------------ matscholar */
.mp-page-matscholar.mp-oe-page .mp-oe-ms-notes {
  padding: 1.5rem 1.5rem 0;
}

/* ------------------------------------------------------------------ small screens */
@media screen and (max-width: 768px) {
  .mp-oe-page .mp-oe-detail-sticky {
    position: static;
  }
  .mp-oe-page .mp-oe-detail-formula {
    font-size: 2rem;
  }
  .mp-page-catalysis.mp-oe-page .mp-oe-cat-heatmap-box {
    min-width: 0 !important;
    overflow-x: auto;
  }
  .mp-page-contribs-project.mp-oe-page .mp-oe-ctb-level {
    display: block;
  }
}

/* ------------------------------------------------------------------ link-coloured tags
 * Linked Bulma tags use the hub link blue (TANGO synthesis__06: precursor chips and the
 * "Journal, Year" publication tag; #3960E3 on the original -> #3F61C4). */
.mp-oe-page .mpc-search-ui a.tag:not(.is-link):not(.is-primary),
.mp-oe-page a.mpc-publication-button {
  color: var(--hub-link);
}
.mp-oe-page .mpc-search-ui a.tag:not(.is-link):not(.is-primary):hover,
.mp-oe-page a.mpc-publication-button:hover {
  color: var(--hub-link-hover);
  background-color: var(--hub-blue-tint);
}
.mp-oe-page a.mpc-publication-button::after {
  content: none !important;
}

/* landing table: centred cells like the portal's Handsontable (htCenter), one-line component tags */
.mp-page-contribs-project.mp-oe-page .mp-oe-contribs-table td,
.mp-page-contribs-project.mp-oe-page .mp-oe-contribs-table th {
  text-align: center !important;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-component-tags {
  flex-wrap: nowrap;
  justify-content: center;
}

/* CT scenes carry Bulma's .box margin; inside a fixed-height viewer it would overflow */
.mp-oe-page .mp-oe-viewer .box {
  margin-bottom: 0;
}
.mp-page-molecule-detail.mp-oe-page .mp-oe-summary {
  margin-bottom: 3rem;
}
/* [OBS 2023-11-02 10.58.15 AM, 1x] header border y=110 -> summary cards and the sidebar start
 * 24 px below it (card top y=135, formula glyphs from y=143); "C2H4" at 2rem (76 px wide)
 * starts 119 px right of the TOC's left edge, after the ~60 px thumbnail (visible centre
 * ~68 px right of that edge, vertically centred on the formula / charge / spin block);
 * charge / spin lines 20 px apart. */
.mp-page-molecule-detail.mp-oe-page .mp-oe-detail {
  padding-top: 0;
}
.mp-page-molecule-detail.mp-oe-page .mp-oe-title-with-thumb {
  align-items: center;
  gap: 0;
}
.mp-page-molecule-detail.mp-oe-page .mp-oe-thumb-cell {
  flex: 0 0 119px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 18px;
  padding-bottom: 6px; /* visible molecule centred ~40 px below the card top */
}
.mp-page-molecule-detail.mp-oe-page .mp-oe-thumb {
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
}
.mp-page-molecule-detail.mp-oe-page .mp-oe-mol-formula {
  font-size: 2rem;
  line-height: 1.125;
  margin-bottom: .3125rem !important;
}
.mp-page-molecule-detail.mp-oe-page .mp-oe-subtitle-line {
  line-height: 1.25;
}
/* TABLE OF CONTENTS label 131 px below the card top (glyphs y=266) */
.mp-page-molecule-detail.mp-oe-page .mp-oe-toc {
  margin-top: 2.4375rem;
}
.mp-page-molecule-detail.mp-oe-page .mp-oe-molecule-id {
  margin-top: .75rem;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-component-tag.tags {
  flex-wrap: nowrap;
  flex: 0 0 auto;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-landing-description .mp-oe-other-info {
  margin-top: 1rem;
}

/* ------------------------------------------------------------------ synthesis cards / page size
 * Card header chips keep the component size (.mpc-data-block-header .tag{font-size:.75em}: 15 px
 * on the 20 px header, TANGO synthesis__06) — the SearchUI "small" correction above is for the
 * data header and paginator only. */
.mp-oe-page .mpc-search-ui .mpc-data-block-header .tag:not(body):not(.is-medium):not(.is-large) {
  font-size: .75em;
}
/* /synthesis: the API serves at most 10 recipes per request (MASTER C-16), so the hard-coded
 * 15/30/50/75 per-page choices of the SearchUI menus would show 10 cards while counting more
 * ("Showing 1-23", one page); only "10" is offered */
.mp-page-synthesis.mp-oe-page [data-testid="results-per-page-menu"] .dropdown-content > :not(:first-child),
.mp-page-synthesis.mp-oe-page .mpc-search-ui .dropdown.is-hidden-touch:not([data-testid="mpc-jump-to-page-menu"]) .dropdown-content > :not(:first-child) {
  display: none;
}

/* ------------------------------------------------------------------ battery "Choice of x-axis"
 * TANGO battery__09/__10: the Dash 2 dcc.Dropdown look (react-select v1) — 36 px control with
 * #ccc border, grey ×, a ▼/▲ triangle caret and no separator; in the menu the selected option is
 * bold on white and the focused one light blue. */
.mp-page-battery-detail.mp-oe-page .mp-oe-xaxis-select .react-select__control {
  min-height: 36px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: none;
}
.mp-page-battery-detail.mp-oe-page .mp-oe-xaxis-select .react-select__control:hover {
  border-color: #ccc;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}
.mp-page-battery-detail.mp-oe-page .mp-oe-xaxis-select .react-select__control--menu-is-open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-color: #b3b3b3 #ccc #d9d9d9;
}
.mp-page-battery-detail.mp-oe-page .mp-oe-xaxis-select .react-select__single-value {
  color: #333;
}
.mp-page-battery-detail.mp-oe-page .mp-oe-xaxis-select .react-select__indicator-separator {
  display: none;
}
.mp-page-battery-detail.mp-oe-page .mp-oe-xaxis-select .react-select__clear-indicator {
  color: #999;
  padding: 0 4px;
}
.mp-page-battery-detail.mp-oe-page .mp-oe-xaxis-select .react-select__clear-indicator svg {
  width: 14px;
  height: 14px;
}
.mp-page-battery-detail.mp-oe-page .mp-oe-xaxis-select .react-select__clear-indicator:hover {
  color: #d0021b;
}
.mp-page-battery-detail.mp-oe-page .mp-oe-xaxis-select .react-select__dropdown-indicator {
  width: 25px;
  padding: 0 10px 0 0;
  justify-content: center;
}
.mp-page-battery-detail.mp-oe-page .mp-oe-xaxis-select .react-select__dropdown-indicator svg {
  display: none;
}
.mp-page-battery-detail.mp-oe-page .mp-oe-xaxis-select .react-select__dropdown-indicator::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-color: #999 transparent transparent;
  border-style: solid;
  border-width: 5px 5px 2.5px;
}
.mp-page-battery-detail.mp-oe-page .mp-oe-xaxis-select .react-select__control--menu-is-open .react-select__dropdown-indicator::after {
  border-color: transparent transparent #999;
  border-width: 0 5px 5px;
  position: relative;
  top: -2px;
}
.mp-page-battery-detail.mp-oe-page .mp-oe-xaxis-select .react-select__menu {
  margin-top: -1px;
  border: 1px solid #ccc;
  border-top-color: #e6e6e6;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}
.mp-page-battery-detail.mp-oe-page .mp-oe-xaxis-select .react-select__menu-list {
  padding: 0;
}
.mp-page-battery-detail.mp-oe-page .mp-oe-xaxis-select .react-select__option {
  padding: 8px 10px;
  /* same 16 px as the selected value (TANGO battery__09: "Gravimetric Capacity" ≈151 px wide) */
  font-size: 1rem;
  line-height: 1.4;
  color: #333;
  background-color: #fff;
}
.mp-page-battery-detail.mp-oe-page .mp-oe-xaxis-select .react-select__option--is-selected {
  font-weight: 700;
  color: #333;
  background-color: #fff;
}
.mp-page-battery-detail.mp-oe-page .mp-oe-xaxis-select .react-select__option--is-focused {
  background-color: var(--hub-blue-tint);
  color: #333;
}
.mp-page-battery-detail.mp-oe-page .mp-oe-xaxis-select .react-select__control--is-focused {
  border-color: var(--hub-link);
  box-shadow: 0 0 0 3px rgba(63, 97, 196, .12);
}

/* ------------------------------------------------------------------ contribs browse table
 * Handsontable look of the portal browse table (Screen Shot 2022-07-28 at 3.34.55 PM): full grid,
 * centred cells, grey header row with a ▼ menu button per column, bold link-blue title links,
 * link-blue mailto authors, raw grey numbers — in the hub tokens (#C8C8C8 grid, #F2F2F2 header,
 * #737373 numbers, #3F61C4 links). */
.mp-oe-page .mp-oe-ht-table {
  background-color: #fff;
  border-collapse: collapse;
}
.mp-oe-page .mp-oe-ht-table th,
.mp-oe-page .mp-oe-ht-table td {
  border: 1px solid var(--hub-border);
  text-align: center !important;
  vertical-align: middle;
  padding: .4em .75em;
}
.mp-oe-page .mp-oe-ht-table thead th {
  background-color: var(--hub-bg);
  color: var(--hub-black);
  font-weight: 400;
  padding: .35em 1.9em .35em .75em;
}
.mp-oe-page .mp-oe-ht-table tbody tr:hover {
  background-color: transparent;
}
.mp-oe-page .mp-oe-ht-table td:nth-child(2),
.mp-oe-page .mp-oe-ht-table .mp-oe-ht-num,
.mp-oe-page .mp-oe-ht-table tfoot th {
  color: var(--oe-muted);
  font-weight: 400;
}
.mp-oe-page .mp-oe-ht-table .mp-oe-sum-row th {
  border-top: 1px solid var(--hub-border);
  background-color: #fff;
}
.mp-oe-page .mp-oe-ht-table td a,
.mp-oe-page .mp-oe-ht-table td a b {
  color: var(--hub-link);
}
.mp-oe-page .mp-oe-ht-table td a:hover,
.mp-oe-page .mp-oe-ht-table td a:hover b {
  color: var(--hub-link-hover);
}
.mp-oe-page .mp-oe-ht-th {
  position: static;
}
.mp-oe-page .mp-oe-ht-table thead th {
  position: relative;
}
.mp-oe-page .mp-oe-ht-menu-wrap {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  text-align: left;
}
.mp-oe-page .mp-oe-ht-menu-button {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--hub-border);
  background-color: var(--hub-bg-light);
  color: var(--oe-muted);
  font-size: 8px;
  line-height: 1;
  cursor: pointer;
}
.mp-oe-page .mp-oe-ht-menu-button::-webkit-details-marker {
  display: none;
}
.mp-oe-page .mp-oe-ht-menu {
  position: absolute;
  right: 0;
  top: 20px;
  z-index: 30;
  min-width: 10rem;
  font-size: .875rem;
  padding: .25rem 0;
  border: 1px solid var(--hub-border);
  border-radius: 0;
  box-shadow: 0 2px 6px rgba(24, 23, 22, .15);
}
.mp-oe-page .mp-oe-ht-menu .dropdown-item {
  padding: .3rem 1rem;
  cursor: pointer;
}
/* ▼ menu = Handsontable "Filter by condition" + action bar (portal browse.js dropdownMenu) */
.mp-oe-page .mp-oe-ht-menu-wrap .mp-oe-ht-menu {
  min-width: 14rem;
  padding: .5rem .6rem .6rem;
  font-size: .8125rem;
  font-weight: 400;
  color: var(--hub-black);
  background-color: #fff;
}
.mp-oe-page .mp-oe-ht-menu-label {
  margin-bottom: .35rem;
  font-weight: 400;
  text-align: left;
}
.mp-oe-page .mp-oe-ht-menu .dash-dropdown-wrapper {
  margin-bottom: .35rem;
}
.mp-oe-page .mp-oe-ht-menu .mp-oe-ht-cond-select {
  width: 100%;
  min-height: 28px;
  border-radius: 0;
  font-size: .8125rem;
}
.mp-oe-page .mp-oe-ht-menu .dash-dropdown-content {
  font-size: .8125rem;
}
.mp-oe-page .mp-oe-ht-cond-value.input {
  width: 100%;
  height: 28px;
  margin-bottom: .5rem;
  border-radius: 0;
  box-shadow: none;
}
.mp-oe-page .mp-oe-ht-action-bar {
  justify-content: flex-start;
  margin-bottom: 0 !important;
}
.mp-oe-page .mp-oe-ht-action-bar .button {
  margin-bottom: 0;
  border-radius: 0;
  min-width: 4rem;
}
.mp-oe-page .mp-oe-ht-action-bar .mp-oe-ht-ok {
  background-color: var(--hub-bg);
  border-color: var(--hub-border);
}
/* a filtered column: its menu button is marked in the link blue */
.mp-oe-page .mp-oe-ht-menu-wrap.is-filtered .mp-oe-ht-menu-button {
  border-color: var(--hub-link);
  background-color: var(--hub-blue-tint);
  color: var(--hub-link);
}
/* sum row: numeric cells keep the Handsontable numeric alignment (right; 3.34.55 PM: 408, 772881) */
.mp-oe-page .mp-oe-ht-table tfoot th.mp-oe-ht-sum {
  text-align: right !important;
}
/* "Enter Keyword": borderless input of intrinsic width next to the primary (yellow) Filter (3.34.55 PM) */
.mp-page-contribs.mp-oe-page .mp-oe-ctb-filter .input {
  width: 12.5rem;  /* the portal's size=20 text input (~200 px at 100 % zoom) */
}
.mp-page-contribs.mp-oe-page .mp-oe-ctb-filter .input:not(:focus-within) {
  border-color: transparent;
  box-shadow: none;
}

/* ------------------------------------------------------------------ contribs landing page */
/* the portal title lives in the landing header (references → title → author), not in the band */
.mp-page-contribs-project.mp-oe-page .mp-simple-header .mp-page-title {
  display: none;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-landing-refs {
  color: var(--hub-black);
  margin-bottom: .2rem;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-landing-refs .breadcrumb {
  font-size: .75rem;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-landing-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: .4rem !important;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-landing-authors {
  margin-top: 0 !important;  /* Bulma .title + .subtitle pulls it up by 1.25rem */
  color: var(--hub-black);
}
.mp-page-contribs-project.mp-oe-page .mp-oe-landing-mail {
  background-color: var(--hub-bg);
  color: var(--hub-black);
  vertical-align: middle;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-landing-mail:hover {
  background-color: var(--hub-blue-tint);
  color: var(--hub-link);
}
.mp-page-contribs-project.mp-oe-page .mp-oe-ctb-download-dd {
  position: relative;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-ctb-download-dd > summary {
  list-style: none;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-ctb-download-dd > summary::-webkit-details-marker {
  display: none;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-ctb-download-button .icon {
  margin-left: .35rem !important;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-ctb-download-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: .25rem;
  z-index: 30;
  min-width: 12rem;
  font-size: .875rem;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-ctb-collapse-all {
  margin-bottom: .3rem;
  text-align: center;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-ctb-columns-button {
  flex-wrap: nowrap;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-ctb-columns-button .button {
  margin-bottom: 0;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-ctb-columns-count {
  background-color: var(--hub-bg);
  border-color: var(--hub-border);
  color: var(--hub-black);
}
.mp-page-contribs-project.mp-oe-page .mp-oe-ctb-checkradio {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  border: 1px solid var(--hub-border);
  border-radius: 3px;
  background-color: #fff;
  margin-right: .6em;
}
/* landing table: Handsontable grid with the nested group rows and ⊖/⊕ toggles */
.mp-page-contribs-project.mp-oe-page .mp-oe-contribs-table {
  border-collapse: collapse;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-contribs-table td,
.mp-page-contribs-project.mp-oe-page .mp-oe-contribs-table th {
  border: 1px solid var(--hub-border);
}
.mp-page-contribs-project.mp-oe-page .mp-oe-contribs-table thead th {
  background-color: var(--hub-bg);
  color: var(--hub-black);
  font-weight: 400;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-group-header {
  position: relative;
  color: var(--hub-black);
  font-weight: 400;
  padding-right: 1.6rem;
  height: 1.75rem;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-collapse-toggle {
  position: absolute;
  right: .4rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--oe-muted);
  font-size: .8rem;
  line-height: 1;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-component-name {
  color: var(--hub-link);
}

/* ------------------------------------------------------------------ contribs landing table (round 2)
 * The table scrolls sideways inside its card (Handsontable preventOverflow:'horizontal'), never the
 * page; dmc injects ``.table-container{overflow:visible}``, so the wrapper has its own class.
 * Handsontable density (4.22.15 PM): rowHeights 23 -> ~25 px rows of 13 px text, ~25 px header
 * rows, compact chips; COUNT is ``p.subtitle > b``; "et al." reveals an inline author list. */
.mp-page-contribs-project.mp-oe-page .mp-oe-ctb-table-box {
  display: block;
  max-width: 100%;
  overflow: hidden;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-ctb-table-scroll {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-ctb-table-scroll .mp-oe-contribs-table {
  margin-bottom: 0;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-contribs-table td,
.mp-page-contribs-project.mp-oe-page .mp-oe-contribs-table th {
  font-size: 13px;
  line-height: 20px;
  height: 25px;
  padding: 1px 6px;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-contribs-table .mp-oe-group-header {
  height: 25px;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-contribs-table .tag {
  height: 20px;
  font-size: 12px;
  line-height: 20px;
  padding: 0 .5em;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-contribs-table .tags,
.mp-page-contribs-project.mp-oe-page .mp-oe-contribs-table .tags .tag {
  margin-bottom: 0;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-contribs-table .icon.is-small {
  height: 1em;
  width: 1em;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-sort-indicator {
  color: var(--hub-black);
}
.mp-page-contribs-project.mp-oe-page .mp-oe-ctb-count {
  font-size: 1.25rem;
  margin-top: 0;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-landing-authors .mp-oe-reveal-trigger {
  margin-left: .3em;
}
.mp-page-contribs-project.mp-oe-page .mp-oe-ctb-more {
  margin-top: -1rem;
  color: var(--oe-muted);
}

/* ------------------------------------------------------------------ hub palette for dash-mp-components
 * The components inject their own <style> blocks; these rules are more specific (page scope).
 * Synthesis recipe cards (dmc SynthesisRecipeCard): keyword hits are
 * ``span.has-background-warning.has-text-grey-darker`` inside ``.mpc-synthesis-card-paragraph``
 * (Bulma #ffdd57 on the original) -> yellow tint #FFF5B2 with black text, set in bold with a dark
 * underline so the hit does not rely on colour alone; excerpt text #4a4a4a -> #181716; quote bar
 * #b5b5b5 -> #C8C8C8; "show operations" #3960e3 -> link blue. */
.mp-oe-page .mpc-synthesis-card-paragraph,
.mp-oe-page .mpc-synthesis-card-paragraph.has-text-grey-dark {
  color: var(--hub-black) !important;
}
.mp-oe-page .mpc-synthesis-card-paragraph > :first-child {
  border-left-color: var(--hub-border);
}
.mp-oe-page .mpc-synthesis-card-paragraph .has-background-warning,
.mp-oe-page .mpc-synthesis-card-highlight-hit {
  background-color: var(--hub-yellow-tint) !important;
  color: var(--hub-black) !important;
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--hub-black);
  border-radius: 2px;
  padding: 0 .1em;
}
.mp-oe-page .mpc-synthesis-card-collapse-operations {
  color: var(--hub-link);
}
.mp-oe-page .mpc-synthesis-card-collapse-operations:hover {
  color: var(--hub-link-hover);
}
/* DataBlock cards (synthesis): #ddd rules and icon ring -> hub border, black glyph */
.mp-oe-page .mpc-data-block-expandable,
.mp-oe-page .mpc-data-block-footer {
  border-top-color: var(--hub-border);
}
.mp-oe-page .mpc-data-block-icon {
  border-color: var(--hub-border);
  color: var(--hub-black);
}
.mp-oe-page .mpc-data-block-header .heading {
  color: var(--oe-muted);
}
/* XAS LINK_POPOVER: #dbdbdb ring -> hub border, grey loading text */
.mp-oe-page .mpc-link-popover-cell-popover {
  border-color: var(--hub-border);
}
.mp-oe-page .mpc-link-popover-cell-loading {
  color: var(--oe-muted);
}

/* ================================================================== SearchUI hub theme (shared look)
 * The explorers on this module's pages (molecules, JCESR, batteries, synthesis, catalysis, MOFs, XAS,
 * contribs) are the same dash-mp-components SearchUI as /materials. Core (10-mp-overrides.css) themes the
 * global states; the rules below mirror the SPREE theme of 30-materials-explorer.css under .mp-oe-page so
 * every explorer shows the same colours as /materials (docs/BRAND.md §2). They mostly target styles that
 * dash-mp-components injects at runtime. Old -> new: #4A4A4A / #363636 text -> --hub-black;
 * #DBDBDB / #CCC / #EEE lines -> --hub-border; #F5F5F5 / #F3F3F3 fills -> --hub-bg; #7A7A7A / #B5B5B5
 * muted text -> --oe-muted; #3273DC accents -> --hub-link.
 *
 * Muted text: --oe-muted (#5F5F5F). The hub grey #737373 is 4.24:1 on the #F2F2F2 page and on the
 * #F2F2F2 addon / header fills, below WCAG AA (4.5:1) for small text; #5F5F5F is 5.7:1 on #F2F2F2,
 * 5.4:1 on the #EBEBEB band and 6.4:1 on white (same value as material-detail's --md-muted).
 * Contrast: no yellow text or thin yellow lines on these light pages; yellow is only a background under
 * #181716 text. Periodic-table family colours are scientific and stay unchanged. */
.mp-oe-page {
  --oe-muted: #5F5F5F;
}

/* ---- muted text and menu labels on the light page (TOC "Table of Contents", "QMOF Database version",
 * battery "Sample data" note, contribs "N projects." note, empty-state lines) */
.mp-oe-page .has-text-grey {
  color: var(--oe-muted) !important;
}
.mp-oe-page .menu-label,
.mp-oe-page .mp-oe-toc .menu-label {
  color: var(--oe-muted);
}

/* ---- search band: the materials input */
.mp-oe-page .mpc-materials-input .input,
.mp-oe-page .mpc-search-ui .input {
  color: var(--hub-black);
}
/* "Search" while a request runs: Bulma's white spinner on the yellow primary button -> black */
.mp-oe-page .mpc-materials-input .button.is-primary.is-loading::after {
  border-color: transparent transparent var(--hub-black) var(--hub-black) !important;
}
/* "Molecules" / "Batteries" / "MOFs" / "Synthesis recipes" / "Catalysts" addon */
.mp-oe-page .mpc-materials-input .button.is-static {
  background-color: var(--hub-bg);
  border-color: var(--hub-border);
  color: var(--oe-muted);
}
/* "?" examples button: Bulma .has-text-grey-light (#B5B5B5, 2:1 on white) -> muted grey that passes AA */
.mp-oe-page .mpc-materials-input .input-help-button.has-text-grey-light {
  color: var(--oe-muted) !important;
}
.mp-oe-page .mpc-materials-input .input-help-button.has-text-grey-light:hover {
  color: var(--hub-black) !important;
}
.mp-oe-page .mpc-materials-input .input-help-button:hover,
.mp-oe-page .mpc-materials-input .input-help-button:focus {
  border-color: var(--hub-border);
}
.mp-oe-page .mpc-materials-input .control [data-tooltip]:hover {
  border-left-color: var(--hub-grey);
}
/* periodic-table toggle: a black glyph on white (BRAND §2: icons on light backgrounds are #181716; the
 * global `i.is-active` rule would make it link blue). While the table is shown the button reads as pressed. */
.mp-oe-page .mpc-materials-input [data-testid="materials-input-toggle-button"] > i,
.mp-oe-page .mpc-materials-input [data-testid="materials-input-toggle-button"] > i.is-active {
  color: var(--hub-black);
}
.mp-oe-page .mpc-materials-input [data-testid="materials-input-toggle-button"]:has(> i.is-active) {
  background-color: var(--hub-bg);
}
/* autocomplete and examples menus under the field */
.mp-oe-page .mpc-materials-input .autocomplete,
.mp-oe-page .mpc-materials-input .input-help-menu {
  border-color: var(--hub-border);
  color: var(--hub-black);
}
.mp-oe-page .mpc-materials-input .autocomplete .dropdown-item {
  color: var(--hub-black);
}
.mp-oe-page .mpc-materials-input .autocomplete-label {
  color: var(--oe-muted);
}
.mp-oe-page .mpc-materials-input .input-help-menu .tag {
  background-color: var(--hub-bg);
}

/* ---- periodic table (family colours unchanged) */
.mp-oe-page .mpc-materials-input .table-legend-container.box {
  border-color: var(--hub-border);
  color: var(--hub-black);
}
.mp-oe-page .mpc-materials-input .mat-element {
  color: var(--hub-black);
}
/* selected elements: a crisp black frame instead of 25% black */
.mp-oe-page .mpc-materials-input .mat-element.enabled {
  border-color: var(--hub-black);
}
/* mode pill: inactive halves get the hub border; the active half stays yellow with black text (core) */
.mp-oe-page .mpc-pt-mode-switcher .tabs.is-toggle li:not(.is-active) a {
  border-color: var(--hub-border);
  color: var(--hub-black);
}
.mp-oe-page .mpc-pt-mode-switcher .tabs.is-toggle li:not(.is-active) a:hover {
  background-color: var(--hub-bg-light);
  border-color: var(--hub-grey);
}
/* wildcard key, formula keypad and the help text box */
.mp-oe-page .mpc-materials-input .second-span button,
.mp-oe-page .mpc-materials-input .mpc-pt-mode-content .pt-description > * {
  border-color: var(--hub-border);
}

/* ---- filters panel */
.mp-oe-page .mpc-search-ui .panel-block {
  border-bottom-color: var(--hub-bg);
  color: var(--hub-black);
}
.mp-oe-page .mpc-search-ui .panel-block-title > .button:hover {
  color: var(--hub-black) !important;
}
/* "N active" count next to a group name: an active marker, so yellow with black text like the other
 * active pills. The group name around it is drawn at 70% opacity; black on yellow keeps AA there
 * (white on the faded link blue did not: about 3.1:1). */
.mp-oe-page .mpc-search-ui .panel-block-title .tag.is-link {
  background-color: var(--hub-yellow);
  color: var(--hub-black);
  font-weight: 600;
}
.mp-oe-page .mpc-search-ui .mpc-filter-label,
.mp-oe-page .mpc-search-ui .checkbox,
.mp-oe-page .mpc-search-ui .checkbox:hover {
  color: var(--hub-black);
}

/* range sliders (SearchUI filters and the catalysis "Target adsorption enthalpy" / "Color scale range"
 * mpc.RangeSliders). dash-mp-components paints the track as an INLINE gradient
 * (#CCC | #3273DC selected range | #CCC), so a stylesheet cannot swap the colour stops without losing the
 * range. An overlay inherits that same gradient (`background: inherit`) and recolours it with a filter
 * fitted in sRGB: #3273DC -> #3F61C4 (--hub-link) and #CCC -> #C8C8C8 (--hub-border). The overlay matches
 * the 5px inner track (.slider-track, transform: scale(1), is its containing block), paints under the
 * thumbs and ticks, and takes no pointer events, so dragging is unchanged. */
.mp-oe-page .mpc-range-slider .slider-track-inner::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 5px;
  margin-top: -2.5px;
  background: inherit;
  filter: hue-rotate(9deg) saturate(.77) brightness(.93) contrast(1.17);
  pointer-events: none;
}
.mp-oe-page .mpc-range-slider .slider-tick-mark {
  background-color: var(--hub-border) !important; /* inline #CCC */
}
.mp-oe-page .mpc-range-slider .button.is-slider > .inner-slider-button {
  background-color: var(--hub-border);
}
.mp-oe-page .mpc-range-slider .button.is-slider.is-dragged > .inner-slider-button {
  background-color: var(--hub-link);
}

/* react-select inside SearchUI filters (Emotion classes are single class selectors, so these page-scoped
 * rules win). The battery "Choice of x-axis" select is outside .mpc-search-ui and keeps its own look. */
.mp-oe-page .mpc-search-ui .react-select__control {
  border-color: var(--hub-border);
}
.mp-oe-page .mpc-search-ui .react-select__control:hover {
  border-color: var(--hub-grey);
}
.mp-oe-page .mpc-search-ui .react-select__control--is-focused,
.mp-oe-page .mpc-search-ui .react-select__control--is-focused:hover {
  border-color: var(--hub-link);
  box-shadow: 0 0 0 1px var(--hub-link);
}
.mp-oe-page .mpc-search-ui .react-select__single-value,
.mp-oe-page .mpc-search-ui .react-select__input-container,
.mp-oe-page .mpc-search-ui .react-select__option {
  color: var(--hub-black);
}
.mp-oe-page .mpc-search-ui .react-select__placeholder,
.mp-oe-page .mpc-search-ui .react-select__indicator {
  color: var(--oe-muted);
}
.mp-oe-page .mpc-search-ui .react-select__indicator:hover {
  color: var(--hub-black);
}
.mp-oe-page .mpc-search-ui .react-select__indicator-separator {
  background-color: var(--hub-border);
}
.mp-oe-page .mpc-search-ui .react-select__option--is-focused,
.mp-oe-page .mpc-search-ui .react-select__option:not(.react-select__option--is-selected):hover {
  background-color: var(--hub-blue-tint);
  color: var(--hub-black);
}
.mp-oe-page .mpc-search-ui .react-select__option:active {
  background-color: var(--hub-blue-tint-strong);
}
.mp-oe-page .mpc-search-ui .react-select__option--is-selected {
  background-color: var(--hub-link);
  color: #FFFFFF;
}
.mp-oe-page .mpc-search-ui .react-select__multi-value {
  background-color: var(--hub-blue-tint-strong);
}
.mp-oe-page .mpc-search-ui .react-select__multi-value__label {
  color: var(--hub-black);
}

/* ---- results header: count, active-filter chips, Columns / per-page menus */
.mp-oe-page .mpc-search-ui .mpc-search-ui-data-header,
.mp-oe-page .mpc-search-ui .mpc-search-ui-data-header .subtitle {
  color: var(--hub-black);
}
.mp-oe-page .mpc-search-ui .mpc-active-filter-button .button {
  background-color: #FFFFFF;
  border-color: var(--hub-border);
  color: var(--hub-black);
}
.mp-oe-page .mpc-search-ui .mpc-active-filter-button .button:hover,
.mp-oe-page .mpc-search-ui .mpc-active-filter-button .button:focus {
  background-color: var(--hub-blue-tint);
  border-color: var(--hub-link);
  color: var(--hub-black);
}
.mp-oe-page .mpc-search-ui .dropdown-content,
.mp-oe-page .mpc-search-ui .dropdown-item {
  color: var(--hub-black);
}

/* ---- results table and paginator */
.mp-oe-page .mpc-search-ui .rdt_TableHeadRow,
.mp-oe-page .mpc-search-ui .rdt_TableRow {
  color: var(--hub-black);
}
.mp-oe-page .mpc-search-ui .rdt_TableRow:hover {
  background-color: var(--hub-bg-light);
}
.mp-oe-page .mpc-search-ui .pagination-link,
.mp-oe-page .mpc-search-ui .pagination-previous,
.mp-oe-page .mpc-search-ui .pagination-next {
  border-color: var(--hub-border);
  color: var(--hub-black);
}
.mp-oe-page .mpc-search-ui .pagination-link:hover,
.mp-oe-page .mpc-search-ui .pagination-previous:hover,
.mp-oe-page .mpc-search-ui .pagination-next:hover {
  border-color: var(--hub-grey);
  color: var(--hub-black);
}
.mp-oe-page .mpc-search-ui .pagination-link.is-current {
  background-color: var(--hub-link);
  border-color: var(--hub-link);
  color: #FFFFFF;
}
.mp-oe-page .mpc-search-ui .pagination-previous[disabled],
.mp-oe-page .mpc-search-ui .pagination-next[disabled] {
  background-color: var(--hub-bg);
  border-color: var(--hub-border);
  color: var(--oe-muted);
}
.mp-oe-page .mpc-search-ui .pagination-ellipsis {
  color: var(--oe-muted);
}