/* Analysis apps (/phasediagram, /pourbaix, /toolkit, /reactioncalculator, /interfacereactions,
 * /reverse-pourbaix) — module CSS (MASTER §4.8: every rule scoped under the page class).
 *
 * Colours: SPREE Materials Hub / UNSW tokens only (docs/BRAND.md §2, defined on :root by
 * assets/10-mp-overrides.css). Yellow is a background with #181716 text (Generate/Calculate buttons,
 * active tab), never text or a thin line on white/light grey; links and focus accents are #3F61C4;
 * hovers use the blue tint, selected rows the yellow tint. Plot colour scales (phase-diagram
 * stability, magma/viridis heatmaps) live in the figure code and are functional, so unchanged.
 *
 * Geometry from the real-site screenshots: TANGO pourbaix_diagram_tutorial__06/__18 and
 * crystal_toolkit_tutorial__02/__03/__06 (2x, ~1178 CSS px viewport), ASSETS "Screen Shot
 * 2022-07-14 at 4.23.05 / 4.27.33 / 4.37.51 / 4.38.07 PM.png", reverse_pourbaix_*.png.
 */

/* ------------------------------------------------------------------ search band */
.mp-page-analysis .mp-search-bar > .container { max-width: 960px; }
.mp-page-analysis .mp-search-bar .mpc-materials-input { margin-bottom: 0; }
.mp-page-analysis .mp-search-bar .mpc-materials-input form { margin-bottom: 0; }
.mp-page-analysis .mp-search-bar { padding-bottom: 1.5rem; }
/* MaterialsInput periodic table: a centred box ~78 % of the 960px bar (≈750 CSS px, ~39px tiles)
 * [OBS TANGO pourbaix_diagram_tutorial__04/__05, ASSETS 4.13.26 PM.png; analysis-apps.md §3.2] */
.mp-page-analysis .mp-search-bar .mpc-materials-input .table-transition-wrapper-small {
  max-width: 750px; margin-left: auto; margin-right: auto;
}
/* grey label addons ("Phase Diagram", "Reactants", "Reactant 1", …): #737373 on #F9F9F9 = 4.5:1 (AA) */
.mp-page-analysis .mp-search-bar .button.is-static {
  background-color: var(--hub-bg-light); border-color: var(--hub-border); color: var(--hub-grey);
}

/* Reaction calculator / interface reactions inputs: same look as the MaterialsInput field */
.mp-page-analysis .mp-analysis-input .field.has-addons { margin-bottom: 0; }
/* 50px tall with 20px input text like the (Bulma is-medium) MaterialsInput field of the PD/Pourbaix
 * bands; addon and button labels stay at 16px [OBS TANGO pourbaix_diagram_tutorial__03] */
.mp-page-analysis .mp-analysis-input .button.is-static {
  background-color: var(--hub-bg-light); border-color: var(--hub-border); color: var(--hub-grey); height: 3.125rem; padding: 0 1em;
}
.mp-page-analysis .mp-analysis-input .input { height: 3.125rem; font-size: 1.25rem; box-shadow: none; }
.mp-page-analysis .mp-analysis-input .input .dash-input-element { height: 100%; width: 100%; font-size: 1.25rem; }
/* "Calculate": hub primary (yellow background, #181716 text) */
.mp-page-analysis .mp-analysis-input .button.is-primary {
  height: 3.125rem; padding: 0 1.25em; background-color: var(--hub-yellow); color: var(--hub-black);
}
.mp-page-analysis .mp-analysis-input .button.is-primary:hover { background-color: var(--hub-yellow-hover); color: var(--hub-black); }
.mp-page-analysis .mp-analysis-input .mp-addon-middle { border-left-width: 0; }

/* ------------------------------------------------------------------ option panels (left column) */
.mp-page-analysis .mp-analysis-columns { align-items: flex-start; }
.mp-page-analysis .mp-options-column { min-width: 260px; }
/* the figure column takes the space the (min 260px) options column leaves, so the two columns fit
 * the page at tablet widths too (Bulma's is-9 = fixed 75 % overflowed at 769–1023px) */
.mp-page-analysis .mp-analysis-columns > .mp-figure-column { flex: 1 1 0; width: auto; min-width: 0; }
.mp-page-analysis .mp-options-panel {
  background: #fff; border-radius: 6px; margin-bottom: 1.5rem;
  box-shadow: 0 .5em 1em -.125em rgba(24,23,22,.1), 0 0 0 1px rgba(24,23,22,.02);
}
/* panel heading: #EBEBEB band with #181716 text (BRAND §2 --hub-band) */
.mp-page-analysis .mp-options-panel .panel-heading {
  background-color: var(--hub-band); color: var(--hub-black); font-size: 1.25em; font-weight: 700; line-height: 1.25;
  padding: .9em 1em; border-radius: 6px 6px 0 0; border-bottom: 1px solid var(--hub-border);
}
.mp-page-analysis .mp-options-panel .panel-block { display: block; border: none; padding: .9rem 1rem 1rem; }
.mp-page-analysis .mp-option-field { margin-bottom: 1.25rem; }
.mp-page-analysis .mp-option-field:last-child { margin-bottom: .25rem; }
.mp-page-analysis .mpc-filter-label { font-weight: 700; color: var(--hub-black); margin-bottom: .5rem; }
.mp-page-analysis .mp-number-input { width: 6rem; text-align: center; }
.mp-page-analysis .mp-filter-label-row { display: flex; align-items: center; }
/* on/off switches (mpc.Switch toggle icon) inherit the surface text colour: #181716 on the white panels,
 * white on the black transformation headers, #181716 on the green enabled header */
.mp-page-analysis .mpc-switch-icon { cursor: pointer; }
/* methodology book button: #181716 icon on the light grey chip, yellow chip on hover */
.mp-page-analysis .mp-docs-book { height: 2rem; width: 2.2rem; background: var(--hub-bg); border: none; color: var(--hub-black); }
.mp-page-analysis .mp-docs-book .icon { color: var(--hub-black); }
.mp-page-analysis .mp-docs-book:hover, .mp-page-analysis .mp-docs-book:focus-visible { background: var(--hub-yellow); color: var(--hub-black); }
/* mpc.Select (react-select): #C8C8C8 control, #3F61C4 focus, blue-tint option hover, #181716 text
 * (the selected option is the shell's #3F61C4 with white text) */
.mp-page-analysis .react-select-container .react-select__control { border-color: var(--hub-border); }
.mp-page-analysis .react-select-container .react-select__control:hover { border-color: var(--hub-grey); }
.mp-page-analysis .react-select-container .react-select__control--is-focused,
.mp-page-analysis .react-select-container .react-select__control--is-focused:hover {
  border-color: var(--hub-link); box-shadow: 0 0 0 1px var(--hub-link);
}
.mp-page-analysis .react-select-container .react-select__single-value { color: var(--hub-black); }
.mp-page-analysis .react-select-container .react-select__option { color: var(--hub-black); }
.mp-page-analysis .react-select-container .react-select__option--is-focused:not(.react-select__option--is-selected),
.mp-page-analysis .react-select-container .react-select__option:not(.react-select__option--is-selected):hover {
  background-color: var(--hub-blue-tint); color: var(--hub-black);
}

/* mpc.RangeSlider (Pourbaix "Composition of {El}", Reverse Pourbaix "Stability Cutoff"). dash-mp-components
 * paints the track as an INLINE gradient (#CCC | old Bulma link blue selected range | #CCC), so a stylesheet
 * cannot swap the colour stops without losing the range. Same fix as the Materials Explorer sliders
 * (assets/30-materials-explorer.css): an overlay inherits that gradient (`background: inherit`) and
 * recolours it with a filter fitted in sRGB, old blue -> #3F61C4 (--hub-link) and #CCC -> #C8C8C8
 * (--hub-border). It matches the 5px inner track, paints under the thumbs and ticks and takes no pointer
 * events, so dragging is unchanged. Thumbs: #C8C8C8 at rest, #3F61C4 while dragged (BRAND §2 slider accent). */
.mp-page-pourbaix .mpc-range-slider .slider-track-inner::before,
.mp-page-reverse-pourbaix .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-page-pourbaix .mpc-range-slider .slider-tick-mark,
.mp-page-reverse-pourbaix .mpc-range-slider .slider-tick-mark { background-color: var(--hub-border) !important; /* inline #CCC */ }
.mp-page-pourbaix .mpc-range-slider .button.is-slider > .inner-slider-button,
.mp-page-reverse-pourbaix .mpc-range-slider .button.is-slider > .inner-slider-button { background-color: var(--hub-border); }
.mp-page-pourbaix .mpc-range-slider .button.is-slider.is-dragged > .inner-slider-button,
.mp-page-reverse-pourbaix .mpc-range-slider .button.is-slider.is-dragged > .inner-slider-button { background-color: var(--hub-link); }

/* ------------------------------------------------------------------ figure box (right column) */
.mp-page-analysis .mp-figure-box { position: relative; min-height: 22rem; padding: 1.25rem; }
/* empty state: bold centred line at the top of a tall white box [OBS TANGO pourbaix__03] */
.mp-page-analysis .mp-empty-state {
  display: flex; align-items: flex-start; justify-content: center; min-height: 32rem; padding: .5rem 2rem; color: var(--hub-black);
}
/* provenance notes: #737373 on white (4.7:1) */
.mp-page-analysis .mp-analysis-note { margin-top: .5rem; color: var(--hub-grey); }
.mp-page-analysis .mp-box-title { margin-bottom: .75rem; }
.mp-page-analysis .mp-table-box { padding: 0; overflow: hidden; }
.mp-page-analysis .mp-table-box > .mp-box-title { padding: 1.25rem 1.25rem 0; }

/* ------------------------------------------------------------------ phase diagram */
.mp-page-phasediagram .mp-pd-figure-box { padding: 0; overflow: hidden; }
.mp-page-phasediagram .mp-pd-figure-box > .mp-empty-state { padding: 2rem; }
.mp-page-phasediagram .mp-pd-figure-box > #pd-message:not(:empty) { padding: 1.25rem; }
/* mpc.Tabs: full-width boxed tabs. Inactive #F9F9F9 with #181716 text; active = hub tab (yellow
 * background, #181716 text, #181716 top rule) [layout OBS 4.27.33 PM / 4.33.40 PM; colours BRAND §2] */
.mp-page-phasediagram .mpc-tabs > .tabs { margin-bottom: 0; overflow: visible; }
.mp-page-phasediagram .mpc-tabs > .tabs ul { border-bottom: none; }
.mp-page-phasediagram .mpc-tabs > .tabs li { flex: 1 1 0; }
.mp-page-phasediagram .mpc-tabs > .tabs li a {
  justify-content: center; padding: 1.1rem 1em; color: var(--hub-black); background: var(--hub-bg-light); font-size: 1.1rem;
  border: none; border-bottom: 1px solid var(--hub-border); border-left: 1px solid var(--hub-border); margin-bottom: 0;
}
.mp-page-phasediagram .mpc-tabs > .tabs li:first-child a { border-left: none; }
.mp-page-phasediagram .mpc-tabs > .tabs li.is-active a {
  background: var(--hub-yellow); color: var(--hub-black); font-weight: 700;
  border-top: 3px solid var(--hub-black); border-bottom-color: var(--hub-yellow);
}
.mp-page-phasediagram .mpc-tabs > .tabs li:not(.is-active) a:hover { background: var(--hub-blue-tint); color: var(--hub-black); }
.mp-page-phasediagram .mp-tab-panel { padding: 1rem 1.25rem 1.25rem; }
.mp-page-phasediagram .mp-pd-graph, .mp-page-phasediagram .mp-cpd-graph { height: 600px; }
.mp-page-phasediagram .mp-cpd-title { margin: .25rem 0 .5rem; font-size: 1.25rem; }
.mp-page-phasediagram .mp-cpd-unavailable { padding: 4rem 1rem; }
.mp-page-phasediagram .mp-pd-table { margin-bottom: 0; }
.mp-page-phasediagram #pd-table-container .box { padding: 0; }

/* ------------------------------------------------------------------ pourbaix */
.mp-page-pourbaix .mp-pbx-figure-box { padding: 1.25rem 1.5rem; }
.mp-page-pourbaix .mp-pbx-graph { height: 550px; }
.mp-page-pourbaix .mp-pbx-conc-heading { color: var(--hub-black); margin: 1.25rem 0 1rem; }
.mp-page-pourbaix .mp-pbx-conc-input { width: 12rem; text-align: center; }
.mp-page-pourbaix .mp-pbx-composition-text { display: block; margin: -.25rem 0 .5rem; color: var(--hub-black); }
.mp-page-pourbaix .mp-pbx-comp-slider { max-width: 260px; }
/* heatmap controls when no offline entry can be used: the switch is greyed out and inert, the select is
 * react-select disabled, and a note says why (#737373 on white, 4.7:1) */
.mp-page-pourbaix .mp-pbx-heatmap-switch.is-disabled { opacity: .45; pointer-events: none; cursor: not-allowed; }
.mp-page-pourbaix #pbx-heatmap-note .mp-pbx-heatmap-note { margin: -.75rem 0 1.25rem; color: var(--hub-grey); }
.mp-page-pourbaix .mp-pbx-heatmap-warning { margin-bottom: 1rem; }
/* "Composition of {El}" number box: normal-size input, ~33px tall, 16px text, ~74px wide
 * [OBS TANGO pourbaix_diagram_tutorial__17/__18] (mpc.RangeSlider renders `input is-small`) */
.mp-page-pourbaix .mp-pbx-comp-slider > input.input {
  font-size: 1rem; height: 2.1rem; width: 4.65rem; padding-left: .75rem; padding-right: .5rem;
}

/* ------------------------------------------------------------------ crystal toolkit */
.mp-page-toolkit .mp-tk-columns { margin-bottom: 1.5rem; }
.mp-page-toolkit .mp-tk-scene-column { display: flex; justify-content: flex-end; }
/* 65vmin square scene box (crystal_toolkit box_size), right-aligned in column is-7 [OBS __02] */
.mp-page-toolkit .mp-tk-scene {
  width: 65vmin; height: 65vmin; min-width: 300px; min-height: 300px; max-width: 600px; max-height: 600px;
  flex: 0 0 auto;
}
.mp-page-toolkit .mp-tk-scene > div { width: 100%; height: 100%; }
.mp-page-toolkit .mp-tk-scene > div > .box { width: 100%; height: 100%; padding: .25rem; overflow: hidden; margin-bottom: 0; }
/* formula H1 ~40px (cap height 28.5 CSS px) and "Load Crystal" ~24px (cap 17 px) next to the 16px
 * "Search materials:" label (cap 11.5 px) [OBS TANGO crystal_toolkit_tutorial__02, 2x] */
.mp-page-toolkit .mp-tk-title h2.title { font-size: 2.5rem; line-height: 1.125; margin-bottom: 2.25rem; margin-top: .25rem; color: var(--hub-black); }
.mp-page-toolkit .mp-tk-reveal > summary { cursor: pointer; display: list-item; list-style-position: inside; font-size: 1.5rem; color: var(--hub-black); }
.mp-page-toolkit .mp-tk-reveal > summary::marker { font-size: 1.05rem; }
.mp-page-toolkit .mp-tk-reveal-title { display: inline-block; vertical-align: middle; font-size: 1.5rem; margin-bottom: 0; }
.mp-page-toolkit .mp-tk-reveal-contents { margin-top: .5rem; margin-left: 1.1rem; }
.mp-page-toolkit .mpc-label { display: block; font-weight: 700; color: var(--hub-black); font-size: 1.05rem; margin-bottom: .2rem; }
/* search field + upload box are ~312px wide [OBS TANGO __02: 1250-1780 at 2x/0.59] */
.mp-page-toolkit .mp-tk-reveal-contents .field.has-addons { max-width: min(312px, 100%); }
.mp-page-toolkit .mp-tk-reveal-contents .field.has-addons > .control:first-child { flex: 1 1 auto; }
.mp-page-toolkit .mp-tk-reveal-contents .field.has-addons > .control:first-child .input { width: 100%; }
.mp-page-toolkit .mp-tk-reveal-contents .input { height: 2.5rem; font-size: 1.05rem; }
.mp-page-toolkit .mp-tk-reveal-contents .button.is-primary { height: 2.5rem; font-size: 1.05rem; }
.mp-page-toolkit .mp-tk-reveal-contents a.is-text { color: var(--hub-link); cursor: pointer; text-decoration: none; }
.mp-page-toolkit .mp-tk-reveal-contents a.is-text:hover { color: var(--hub-link-hover); text-decoration: underline; }
.mp-page-toolkit .mp-tk-reveal-contents .file.is-boxed { max-width: min(312px, 100%) !important; margin-top: .2rem; }
/* bordered on all four sides with the 291px label centred inside the 312px box: .5rem side padding
 * and border-box sizing [OBS TANGO crystal_toolkit_tutorial__02/__09] */
.mp-page-toolkit .mp-tk-reveal-contents .file.is-boxed .file-label { width: 100%; max-width: 100%; box-sizing: border-box; }
.mp-page-toolkit .mp-tk-reveal-contents .file.is-boxed .file-cta {
  padding: 1.4rem .5rem; width: 100%; max-width: 100%; box-sizing: border-box; background: var(--hub-bg-light);
  border-color: var(--hub-border); color: var(--hub-black);
  white-space: normal; text-align: center; align-items: center; justify-content: center;
}
.mp-page-toolkit .mp-tk-reveal-contents .file.is-boxed:hover .file-cta { background: var(--hub-blue-tint); border-color: var(--hub-grey); color: var(--hub-black); }
/* Apply Transformations: aligned with the scene box; dropdown 65vmin wide [OBS __03/__06] */
.mp-page-toolkit .mp-tk-transform-section {
  margin-left: max(0px, calc((100% + 1.5rem) * 0.58333 - 1.5rem - clamp(300px, 65vmin, 600px)));
}
.mp-page-toolkit .mp-tk-transform-title { font-size: 2.25rem; margin-bottom: 1.5rem; }
/* Transformations multi-select: the 2022 react-select (v1) shape [OBS TANGO crystal_toolkit_tutorial__03/
 * __05/__07]: 36px control, radius 4px, grey placeholder, grey "×" clear and ▼ caret (▲ when open),
 * values as removable tags "× Make a slab", plain option rows with selected options left out of the
 * menu. Hub accent (BRAND §2 "react-select selection"): tags #EDF0F9 with #3F61C4 text (4.9:1),
 * #3F61C4 focus border, blue-tint option hover. */
.mp-page-toolkit .mp-tk-choices.dash-dropdown {
  background: #fff; border: 1px solid #ccc; border-color: #d9d9d9 #ccc #b3b3b3; border-radius: 4px;
  min-height: 36px; outline: none; box-shadow: none; color: var(--hub-black); font-size: 1rem; overflow: visible;
}
.mp-page-toolkit .mp-tk-choices.dash-dropdown:hover { box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.mp-page-toolkit .mp-tk-choices.dash-dropdown:focus,
.mp-page-toolkit .mp-tk-choices.dash-dropdown:focus-visible {
  border-color: var(--hub-link); outline: none;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 0 3px rgba(63, 97, 196, .12);
}
.mp-page-toolkit .mp-tk-choices.dash-dropdown[data-state='open'] {
  border-color: #b3b3b3 #ccc #d9d9d9; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none;
}
.mp-page-toolkit .mp-tk-choices .dash-dropdown-trigger { padding: 0 10px; min-height: 34px; gap: 6px; }
.mp-page-toolkit .mp-tk-choices .dash-dropdown-placeholder { color: #aaa; }
.mp-page-toolkit .mp-tk-choices .dash-dropdown-value { white-space: normal; overflow: visible; line-height: 1.4; padding: 2px 0 4px; }
.mp-page-toolkit .mp-tk-choices .dash-dropdown-value-item,
.mp-page-toolkit .mp-tk-choices .dash-dropdown-value > .dash-dropdown-value-item {
  display: inline-flex; align-items: stretch; margin: 4px 5px 0 0; vertical-align: top;
  background: var(--hub-blue-tint); border: 1px solid rgba(63, 97, 196, .35); border-radius: 2px;
  color: var(--hub-link); font-size: .9em; line-height: 1.4;
}
.mp-page-toolkit .mp-tk-choices .dash-dropdown-value-item > * { padding: 2px 5px; }
.mp-page-toolkit .mp-tk-choices .dash-dropdown-value-item::before,
.mp-page-toolkit .mp-tk-choices .dash-dropdown-value-item:not(:first-child)::before {
  content: '\00d7'; display: inline-block; padding: 1px 5px 2px; border-right: 1px solid rgba(63, 97, 196, .35);
  color: var(--hub-link); cursor: pointer; line-height: 1.4;
}
.mp-page-toolkit .mp-tk-choices .dash-dropdown-value-item:hover::before { background: var(--hub-blue-tint-strong); color: var(--hub-link-hover); }
.mp-page-toolkit .mp-tk-choices .dash-dropdown-clear { color: #999; width: 13px; height: 13px; }
.mp-page-toolkit .mp-tk-choices .dash-dropdown-clear:hover { color: #d0021b; }
.mp-page-toolkit .mp-tk-choices .dash-dropdown-clear svg { width: 13px; height: 13px; }
.mp-page-toolkit .mp-tk-choices .dash-dropdown-trigger-icon { color: #999; fill: #999; width: 14px; height: 14px; }
.mp-page-toolkit .mp-tk-choices.dash-dropdown:hover .dash-dropdown-trigger-icon { color: #666; fill: #666; }
.mp-page-toolkit .mp-tk-transform-section .dash-dropdown-content {
  width: var(--radix-popover-trigger-width); max-height: 200px; margin-top: -6px; padding: 0;
  background: #fff; border: 1px solid #ccc; border-top-color: #e6e6e6; border-radius: 0 0 4px 4px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06); color: var(--hub-black); font-size: 1rem;
}
.mp-page-toolkit .mp-tk-transform-section .dash-dropdown-actions,
.mp-page-toolkit .mp-tk-transform-section .dash-dropdown-search-container { display: none; }
.mp-page-toolkit .mp-tk-transform-section .dash-dropdown-option {
  padding: 8px 10px; box-shadow: none; color: var(--hub-black); background: #fff; cursor: pointer;
}
.mp-page-toolkit .mp-tk-transform-section .dash-dropdown-option:hover,
.mp-page-toolkit .mp-tk-transform-section .dash-dropdown-option:focus,
.mp-page-toolkit .mp-tk-transform-section .dash-dropdown-option:focus-within { background: var(--hub-blue-tint); color: var(--hub-black); outline: none; }
.mp-page-toolkit .mp-tk-transform-section .dash-dropdown-option input[type='checkbox'] { display: none; }
.mp-page-toolkit .mp-tk-transform-section .dash-dropdown-option:has(input:checked) { display: none; }
.mp-page-toolkit .mpc-panel-description { font-size: 1.05rem; margin-bottom: .1rem; }
.mp-page-toolkit .mp-tk-transform-section .message { margin-top: 1.25rem; }
.mp-page-toolkit .mp-tk-transform-section .message-header { font-size: 1.1rem; justify-content: flex-start; }
/* disabled transformation: #181716 header with white text (the toggle icon follows currentColor) */
.mp-page-toolkit .mp-tk-transform-section .message.is-dark { background-color: var(--hub-bg-light); }
.mp-page-toolkit .mp-tk-transform-section .message.is-dark .message-header { background-color: var(--hub-black); color: #fff; }
.mp-page-toolkit .mp-tk-transform-section .message.is-dark .message-body { background: var(--hub-bg-light); border-color: var(--hub-black); color: var(--hub-black); }
/* enabled transformation = hub success #48C78E with #181716 text (white on #48C78E is only 2.2:1);
 * green status colour kept from Bulma 0.9.4 (MASTER G-21) [OBS TANGO crystal_toolkit_tutorial__07] */
.mp-page-toolkit .mp-tk-transform-section .message.is-success { background-color: #effaf5; }
.mp-page-toolkit .mp-tk-transform-section .message.is-success .message-header { background-color: var(--hub-success); color: var(--hub-black); }
.mp-page-toolkit .mp-tk-transform-section .message.is-success .message-body { border-color: var(--hub-success); color: #257953; }
.mp-page-toolkit .mp-tk-transform-section .message .mpc-switch { display: inline-block; vertical-align: middle; }
.mp-page-toolkit .mp-tk-transform-section .message-body input[type="number"],
.mp-page-toolkit .mp-tk-transform-section .message-body .input { text-align: center; }

/* ------------------------------------------------------------------ reaction calculator / interface */
.mp-page-reactioncalculator .mp-rxn-equation { font-size: 1.75rem; color: var(--hub-black); margin: .25rem 0 1rem; }
.mp-page-reactioncalculator .mp-rxn-coef { color: var(--hub-black); }
.mp-page-reactioncalculator .mp-rxn-arrow { padding: 0 .35rem; }
.mp-page-reactioncalculator .mp-rxn-energies { max-width: 34rem; }
.mp-page-reactioncalculator .mp-rxn-result-box { min-height: 12rem; }
.mp-page-reactioncalculator .mp-rxn-result-box .mp-empty-state { min-height: 10rem; }
.mp-page-interfacereactions .mp-ir-graph { height: 600px; }
.mp-page-interfacereactions .mp-ir-table td, .mp-page-interfacereactions .mp-ir-table th { vertical-align: middle; border-color: var(--hub-border); }
/* suggested (most negative) reaction row = selected row: yellow tint with #181716 text */
.mp-page-interfacereactions .mp-ir-table tr.is-selected { background-color: var(--hub-yellow-tint); color: var(--hub-black); }
.mp-page-interfacereactions .mp-ir-table tbody tr:not(.is-selected):hover { background-color: var(--hub-bg-light); }
.mp-page-interfacereactions .mp-table-box .table-container { padding: 0 1.25rem 1.25rem; }

/* ------------------------------------------------------------------ reverse pourbaix */
.mp-page-reverse-pourbaix .mp-rpbx-intro { font-size: 15px; color: var(--hub-black); margin: -.25rem 0 1rem; }
.mp-page-reverse-pourbaix .mp-rpbx-left { width: 310px; }
.mp-page-reverse-pourbaix .mp-rpbx-left .panel-heading { font-size: 18px; }
.mp-page-reverse-pourbaix .mp-rpbx-left .panel-block { font-size: 15px; }
.mp-page-reverse-pourbaix .mp-rpbx-conditions { padding: .75rem 1rem; font-size: 15px; line-height: 1.6; }
.mp-page-reverse-pourbaix .mp-rpbx-heatmap-box { padding: .75rem; }
.mp-page-reverse-pourbaix .mp-rpbx-sections { margin-top: .5rem; }
.mp-page-reverse-pourbaix .mp-rpbx-details { border-top: 1px solid var(--hub-border); padding: 1rem 0; }
.mp-page-reverse-pourbaix .mp-rpbx-summary { cursor: pointer; font-weight: 600; font-size: 15px; color: var(--hub-black); }
.mp-page-reverse-pourbaix .mp-rpbx-summary-text { margin-right: .75rem; }
.mp-page-reverse-pourbaix .mp-rpbx-tag { font-weight: 400; vertical-align: middle; }
.mp-page-reverse-pourbaix .mp-rpbx-tag.is-light:not(.is-info) { background: var(--hub-band); color: var(--hub-black); }
/* "N stable materials" (a cell is selected): blue tint with dark link-blue text (7:1) */
.mp-page-reverse-pourbaix .mp-rpbx-tag.is-info.is-light { background: var(--hub-blue-tint); color: var(--hub-link-hover); }
.mp-page-reverse-pourbaix .mp-rpbx-closest-tag.is-dark { background: var(--hub-black); color: #fff; }
.mp-page-reverse-pourbaix .mp-rpbx-details-body { margin-top: 1rem; }
/* table accent strip: #181716 (teal -> black on light surfaces, BRAND §2; no yellow lines on white) */
.mp-page-reverse-pourbaix .mp-rpbx-details-body .dash-table-container {
  background: #fff; border: 1px solid var(--hub-border); border-left: 6px solid var(--hub-black);
}
.mp-page-reverse-pourbaix .mp-rpbx-details-body .dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td { background-color: var(--hub-bg-light); }
.mp-page-reverse-pourbaix .mp-rpbx-details-body .previous-next-container .page-number .current-page-container input.current-page { color: var(--hub-black); }
/* filter-row "Aa" case-sensitivity toggles: dash_table draws them in its default hot pink at 10 % opacity
 * (nearly invisible on white, not a hub colour). Hub look: white chip, #C8C8C8 border, #737373 text
 * (4.7:1); hover/focus #3F61C4; the active (case-sensitive) state is a #3F61C4 border with #3F61C4 text
 * on the blue tint (5.0:1). The selectors outrank dash_table's own th.dash-filter / th:hover rules. */
.mp-page-reverse-pourbaix .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-filter input.dash-filter--case {
  opacity: 1; background-color: #fff; color: var(--hub-grey); border: 1px solid var(--hub-border); border-radius: 3px;
  height: 18px; padding: 0 3px; line-height: 16px; font-size: 10px; font-weight: 700; cursor: pointer;
}
.mp-page-reverse-pourbaix .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-filter input.dash-filter--case:hover,
.mp-page-reverse-pourbaix .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-filter input.dash-filter--case:focus-visible {
  color: var(--hub-link); border-color: var(--hub-link); outline: none;
}
.mp-page-reverse-pourbaix .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-filter input.dash-filter--case--sensitive,
.mp-page-reverse-pourbaix .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-filter input.dash-filter--case--sensitive:hover {
  background-color: var(--hub-blue-tint); color: var(--hub-link); border: 1px solid var(--hub-link);
}
.mp-page-reverse-pourbaix .mp-rpbx-oc20-intro { font-size: 15px; color: var(--hub-black); margin-bottom: 1rem; }
.mp-page-reverse-pourbaix .mp-rpbx-oc20-left { width: 390px; }
.mp-page-reverse-pourbaix .mp-rpbx-oc20-left .mp-option-field { margin-bottom: .75rem; }
.mp-page-reverse-pourbaix .mp-rpbx-buttons { margin: 1rem 0 .5rem; }
/* Bulma's default 2.5em button: 56px tall here (the html.Button keeps content-box sizing, as on the
 * real page) [OBS ASSETS reverse_pourbaix_highlighted_catalyst.png: 191x56 at 1x]; hub primary colours */
.mp-page-reverse-pourbaix .mp-rpbx-buttons .button { background-color: var(--hub-yellow); color: var(--hub-black); border-color: transparent; }
.mp-page-reverse-pourbaix .mp-rpbx-buttons .button:hover { background-color: var(--hub-yellow-hover); color: var(--hub-black); }
.mp-page-reverse-pourbaix .mp-rpbx-help { font-size: 15px; margin-bottom: 1rem; }
.mp-page-reverse-pourbaix .mp-rpbx-additional { margin-top: 1rem; }
.mp-page-reverse-pourbaix .mp-rpbx-additional-table th { width: 40%; color: var(--hub-black); }
.mp-page-reverse-pourbaix .mp-rpbx-scatter { height: 560px; }
.mp-page-reverse-pourbaix .mp-rpbx-closest { margin-top: 1rem; }
.mp-page-reverse-pourbaix .mp-rpbx-closest-tag { margin-bottom: .5rem; }
.mp-page-reverse-pourbaix .mp-rpbx-note { margin: .25rem 0 .5rem; }

@media screen and (max-width: 1023px) {
  .mp-page-reverse-pourbaix .mp-rpbx-left, .mp-page-reverse-pourbaix .mp-rpbx-oc20-left { width: 100%; }
  /* full-width left panels: stack the figure below instead of pushing it past the viewport */
  .mp-page-reverse-pourbaix .mp-rpbx-columns, .mp-page-reverse-pourbaix .mp-rpbx-oc20-columns { flex-wrap: wrap; }
  .mp-page-reverse-pourbaix .mp-rpbx-right, .mp-page-reverse-pourbaix .mp-rpbx-oc20-right { flex: 1 1 100%; min-width: 0; }
  .mp-page-toolkit .mp-tk-scene-column { justify-content: center; }
  .mp-page-toolkit .mp-tk-transform-section { margin-left: 0; }
}
@media screen and (max-width: 768px) {
  /* CSS-MP / MPRC mobile MaterialsInput rules (global-shell.md §2.5), retargeted to .mpc-materials-input:
   * hide the label addon so the input, ?, periodic-table toggle and Generate fit the phone */
  .mp-page-analysis .mp-search-bar .mpc-materials-input .field > .control:first-child:not(.is-expanded) { display: none; }
  .mp-page-analysis .mp-search-bar .mpc-materials-input .field > .control.is-expanded { min-width: 0; }
  .mp-page-analysis .mp-search-bar .mpc-materials-input .field > .control.is-expanded .input { border-radius: 4px 0 0 4px; }
  /* option-label tooltips (core tooltip_label: has-tooltip-right, 15rem multiline) laid out to the
   * right of a long label widened the phone page (PD "finite temperature" label: scrollWidth 523 at
   * 375px); on phones they open below the label, left-aligned, capped to the viewport instead */
  .mp-page-analysis .mp-options-panel .tooltip-label.has-tooltip-right[data-tooltip]::before {
    top: auto; right: auto; bottom: 0; left: 0; margin: 0 0 -5px 0; transform: translate(0, 100%);
    width: min(15rem, calc(100vw - 4rem)); max-width: min(15rem, calc(100vw - 4rem));
  }
  .mp-page-analysis .mp-options-panel .tooltip-label.has-tooltip-right[data-tooltip]::after {
    top: auto; right: auto; bottom: 0; left: 1rem; margin: 0 0 -5px -5px;
    border-color: transparent transparent rgba(24, 23, 22, .9) transparent;
  }
  .mp-page-analysis .mp-analysis-input .field.has-addons { flex-wrap: wrap; }
  .mp-page-analysis .mp-analysis-input .field.has-addons .control.is-expanded { flex-basis: 60%; }
  .mp-page-toolkit .mp-tk-title h2.title { font-size: 2.25rem; }
  /* PD tabs: two-line labels on phones instead of clipping "Chemical Potential Diagram" */
  .mp-page-phasediagram .mpc-tabs > .tabs li a { white-space: normal; text-align: center; font-size: 1rem; padding: .75rem .5em; height: 100%; }
  .mp-page-phasediagram .mpc-tabs > .tabs ul { align-items: stretch; }
}

/* PD entries table: 16px text, 65px rows [OBS Screen Shot 2022-07-14 at 4.37.51 PM.png]; #181716 text,
 * #C8C8C8 row rules, #F9F9F9 header band and row hover */
.mp-page-phasediagram .mp-pd-table .rdt_TableCell,
.mp-page-phasediagram .mp-pd-table .rdt_TableCol { font-size: 1rem; color: var(--hub-black); }
.mp-page-phasediagram .mp-pd-table .rdt_TableHeadRow { min-height: 72px; background-color: var(--hub-bg-light); border-bottom-color: var(--hub-border); }
.mp-page-phasediagram .mp-pd-table .rdt_TableRow { min-height: 65px; }
.mp-page-phasediagram .mp-pd-table .rdt_TableRow:not(:last-of-type) { border-bottom-color: var(--hub-border); }
.mp-page-phasediagram .mp-pd-table .rdt_TableRow:hover { background-color: var(--hub-bg-light); }
.mp-page-phasediagram .mp-pd-table .mpc-paginator { padding: 1rem 1.25rem; }
/* paginator at normal Bulma size: ~42px buttons with 16px text like the table rows
 * [OBS Screen Shot 2022-07-14 at 4.37.51 PM.png] (mpc renders `button is-small` / `pagination is-small`) */
.mp-page-phasediagram .mp-pd-table .mpc-paginator .dropdown-trigger .button.is-small { font-size: 1rem; height: 2.625em; padding-left: 1.1em; padding-right: 1.1em; }
.mp-page-phasediagram .mp-pd-table .mpc-paginator .pagination.is-small { font-size: 1rem; }
.mp-page-phasediagram .mp-pd-table .mpc-paginator .pagination.is-small .pagination-previous,
.mp-page-phasediagram .mp-pd-table .mpc-paginator .pagination.is-small .pagination-next,
.mp-page-phasediagram .mp-pd-table .mpc-paginator .pagination.is-small .pagination-link { height: 2.625em; min-width: 2.625em; }
.mp-page-phasediagram .mp-pd-table .mpc-paginator .pagination-link { border-color: var(--hub-border); color: var(--hub-black); }
.mp-page-phasediagram .mp-pd-table .mpc-paginator .pagination-link.is-current { background-color: var(--hub-link); border-color: var(--hub-link); color: #fff; }
.mp-page-phasediagram .mp-pd-table .mpc-paginator .dropdown-menu { font-size: 1rem; }

/* Dash 4 dcc.Input renders div.dash-input-container(.input) > input.dash-input-element (+ steppers for
 * type=number). The 2022 site used plain Bulma inputs with centred values [OBS 4.23.05 PM, TANGO __06]. */
.mp-page-analysis .mp-number-input .dash-input-stepper,
.mp-page-analysis .mp-pbx-conc-input .dash-input-stepper { display: none; }
.mp-page-analysis .mp-number-input .dash-input-element,
.mp-page-analysis .mp-pbx-conc-input .dash-input-element { text-align: center; width: 100%; }