/* Material detail (/materials/<id>) and task (/tasks/<id>) pages — material-detail module CSS.
 * Every rule is scoped under .mp-page-material-detail (MASTER §4.8).
 *
 * Colours: SPREE Materials Hub / UNSW tokens defined in 10-mp-overrides.css (docs/BRAND.md §2):
 *   links, clickable values and TOC entries var(--hub-link) #3F61C4; text, headings and icons on the
 *   light page var(--hub-black) #181716; rules and table lines var(--hub-border) #C8C8C8; active TOC
 *   pill var(--hub-yellow) #FFDC00 with black text; loading dots black (BRAND: dcc.Loading #181716).
 *   Contrast (WCAG AA): never yellow text or thin yellow lines on the light page; muted text that can
 *   sit on the #F2F2F2 page uses --md-muted (#5F5F5F, 5.7:1), muted text inside white boxes
 *   var(--hub-grey) (#737373, 4.7:1). Scientific colours (structure legend, plots, thumbnails) are
 *   functional and untouched.
 *
 * Geometry measured on ASSETS/BaTiO3.jpg, "Screen Shot 2022-07-14 at 3.31.57 PM.png" (1557 CSS px)
 * and TANGO materials_explorer__06/__09/__10 (1440 CSS px) — unchanged by the rebrand:
 *   left column is-3 (TOC pill 318px wide), right column is-9; summary row is-7 | is-5;
 *   thumbnail column ~120px before the formula; formula title is-2, id subtitle is-4;
 *   TOC label ~58px below the id, 36px TOC row pitch, active pill (now yellow with black text);
 *   description box 218-220px tall (text clipped), 1px rule between top-level sections.
 */

.mp-page-material-detail {
  --md-muted: #5F5F5F;
  /* Dash 4 components (dcc.Slider isosurface/phonon sliders, inputs) take their accent from these
   * variables, defined on :root by Dash's injected CSS (purple #7f4bc4): hub link-blue on this page */
  --Dash-Fill-Interactive-Strong: var(--hub-link);
  --Dash-Fill-Interactive-Weak: rgba(63, 97, 196, 0.08);
}

/* formula crumbs (BaTiO₃) must not make the header band taller than for Si */
.mp-page-material-detail .mp-app-header .breadcrumb sub {
  line-height: 0;
}
/* formula subscripts: small and clearly lowered (BaTiO3.jpg: the "3" is ~49% of the cap height in
 * the H1 and ~52% in the breadcrumb, its foot 0.09-0.12em below the baseline) */
.mp-page-material-detail .mp-md-formula sub,
.mp-page-material-detail .mp-app-header .breadcrumb sub {
  font-size: 0.5em;
  vertical-align: -0.2em;
  line-height: 0;
}

/* ---------------------------------------------------------------- left column (sticky) */

@media screen and (min-width: 769px) {
  .mp-page-material-detail .mp-md-left {
    align-self: flex-start;
    position: sticky;
    top: 1rem;
  }
  .mp-page-material-detail .mp-md-sticky {
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

.mp-page-material-detail .mp-md-material-header {
  display: flex;
  align-items: center;
  margin-bottom: 2.75rem;
  min-height: 90px;
}
.mp-page-material-detail .mp-md-thumb {
  flex: 0 0 120px;
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 1rem;
}
.mp-page-material-detail .mp-md-thumb-img {
  display: block;
  width: 84px;
  height: 84px;
  object-fit: contain;
}
.mp-page-material-detail .mp-md-titles {
  min-width: 0;
}
.mp-page-material-detail .mp-md-formula {
  margin-bottom: 0;
  line-height: 1.125;
  word-break: break-word;
}
.mp-page-material-detail .title.mp-md-formula:not(.is-spaced) + .subtitle {
  margin-top: 0.25rem;
}
.mp-page-material-detail .mp-md-id {
  color: var(--hub-black);
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 0;
}

/* Scrollspy TOC: entries are hub link-blue (as on the upstream page, Bulma default is #4a4a4a);
 * the active entry is the yellow pill with black text (BRAND §2 "active TOC pill") */
.mp-page-material-detail .mp-md-toc .menu-label {
  margin-bottom: 1.25em;
  color: var(--md-muted);
}
.mp-page-material-detail .mp-md-toc .menu-list a {
  color: var(--hub-link);
  line-height: 1.25;
  padding: 0.5em 0.75em;
  border-radius: 4px;
}
.mp-page-material-detail .mp-md-toc .menu-list a:hover {
  background-color: var(--hub-blue-tint);
  color: var(--hub-link-hover);
}
.mp-page-material-detail .mp-md-toc .menu-list a.is-active,
.mp-page-material-detail .mp-md-toc .menu-list a.is-active:hover {
  background-color: var(--hub-yellow);
  color: var(--hub-black);
  font-weight: 600;
}
.mp-page-material-detail .mp-md-toc .menu-list li ul {
  border-left: 1px solid var(--hub-border);
  margin: 0.75em;
  padding-left: 0.75em;
}

/* ---------------------------------------------------------------- headings, rules, anchors */

.mp-page-material-detail .mp-md-anchor {
  height: 0;
  overflow: hidden;
}
.mp-page-material-detail .mp-md-divider {
  background-color: var(--hub-border);
  height: 1px;
  margin: 2.25rem 0 2.75rem;
}
.mp-page-material-detail h2.mp-md-heading,
.mp-page-material-detail h4.mp-md-subheading {
  color: var(--hub-black);
}
.mp-page-material-detail h2.mp-md-heading {
  margin-bottom: 1.25rem;
  scroll-margin-top: 1rem;
}
.mp-page-material-detail h4.mp-md-subheading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  scroll-margin-top: 1rem;
}
.mp-page-material-detail h2.mp-md-heading + .mp-md-section-properties,
.mp-page-material-detail h2.mp-md-heading + h4.mp-md-subheading {
  margin-top: 0.5rem;
}
.mp-page-material-detail .mp-md-docs-link a {
  color: var(--hub-black);
  font-size: 1rem;
}
.mp-page-material-detail .mp-md-docs-link a:hover,
.mp-page-material-detail .mp-md-docs-link a:focus-visible {
  color: var(--hub-link);
}
.mp-page-material-detail .mp-md-docs-link a.mp-no-ext-icon::after,
.mp-page-material-detail .mp-md-docs-link a[target="_blank"]::after {
  content: none !important;
  display: none !important;
}
.mp-page-material-detail .section-heading-offset-link {
  margin-left: auto;
  font-size: 1rem;
  font-weight: 400;
}

/* ---------------------------------------------------------------- boxes and tables */

/* Bulma .box/.card text is #4a4a4a (KaTeX tensors, lattice sentence, contributed-data cards inherit it):
 * hub body text (BRAND §2 #4A4A4A -> #181716) */
.mp-page-material-detail .box,
.mp-page-material-detail .card {
  color: var(--hub-black);
}

.mp-page-material-detail .mp-md-box-title {
  color: var(--hub-grey);
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 0.75rem;
}
.mp-page-material-detail .mp-md-box-title .tooltip-label {
  border-bottom: 1px dotted var(--hub-grey);
}
.mp-page-material-detail .mp-md-table {
  background-color: transparent;
}
.mp-page-material-detail .mp-md-table td,
.mp-page-material-detail .mp-md-table th {
  vertical-align: middle;
  padding: 0.5em 1em;
}
.mp-page-material-detail .mp-md-table .label {
  margin-bottom: 0;
  font-weight: 700;
  color: var(--hub-black);
}
.mp-page-material-detail .mp-md-table td,
.mp-page-material-detail .mp-md-table th {
  border-color: var(--hub-border);
  color: var(--hub-black);
}
.mp-page-material-detail .mp-md-table tr:last-child td {
  border-bottom-width: 0;
}
.mp-page-material-detail .mp-md-lattice-table td:first-child,
.mp-page-material-detail .mp-md-symmetry-table td:first-child,
.mp-page-material-detail .mp-md-misc-table td:first-child {
  width: 45%;
}
/* summary properties: plain Bulma table in a Bulma box (box padding 1.25rem, cells .5em .75em) with
 * automatic column widths, as get_data_list renders it: at 1557px "Experimentally Observed" stays on
 * one line and "-3.492 eV/atom" wraps (BaTiO3.jpg, values at x≈1336); at 1440px "Predicted Formation
 * Energy" and "Experimentally Observed" wrap (TANGO materials_explorer_tutorial__06/__08) */
.mp-page-material-detail .mp-md-summary-table td {
  padding: 0.5em 0.75em;
}
.mp-page-material-detail .mp-md-thermo-table td:first-child {
  width: 55%;
}
.mp-page-material-detail .mp-md-prop-table td:last-child {
  white-space: nowrap;
}
.mp-page-material-detail .mp-md-value,
.mp-page-material-detail a.mp-md-value {
  color: var(--hub-link);
}
.mp-page-material-detail a.mp-md-value:hover {
  color: var(--hub-link-hover);
  text-decoration: underline;
}
.mp-page-material-detail span.mp-md-value {
  color: var(--hub-black);
}
.mp-page-material-detail .mp-md-header-table thead th {
  color: var(--hub-black);
  font-weight: 700;
  border-bottom-color: var(--hub-black);
}
.mp-page-material-detail .mp-md-header-table tbody tr:hover {
  background-color: var(--hub-bg-light);
}

/* summary row */
.mp-page-material-detail .mp-md-summary-columns {
  margin-bottom: 0;
}
.mp-page-material-detail .mp-md-scene-wrap {
  width: 100%;
}
.mp-page-material-detail .mp-md-scene-missing {
  min-height: 12rem;
}
.mp-page-material-detail .mp-md-summary-right > .box:not(:last-child) {
  margin-bottom: 1.5rem;
}
.mp-page-material-detail .mp-md-summary-box {
  padding: 1.25rem;
}
/* BaTiO3.jpg / TANGO materials_explorer__09: 403x218 box, text inset 20px on every side, 24px line
 * pitch (1rem/1.5); the text is clipped 20px above the box bottom, so the clipping lives on an
 * inner wrapper and the box keeps its padding below the cut-off line. */
.mp-page-material-detail .mp-md-description-box {
  display: flex;
  flex-direction: column;
  height: 218px;
  overflow: hidden;
  padding: 1.25rem;
}
.mp-page-material-detail .mp-md-description-box .mp-md-box-title {
  flex: none;
  line-height: 1.125;
  margin-bottom: 0.5rem;
}
.mp-page-material-detail .mp-md-description-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.mp-page-material-detail .mp-md-description-text {
  color: var(--hub-black);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

/* crystal structure */
.mp-page-material-detail .mp-md-cs-row > .column > .box {
  height: 100%;
}
.mp-page-material-detail .mp-md-setting-sentence {
  color: var(--hub-black); /* Bulma .box text is #4a4a4a; hub body text (BRAND §2) */
  line-height: 2.6;
  margin-top: 0.5rem;
}
.mp-page-material-detail .mp-md-inline-select {
  display: inline-block;
  width: 8rem;
  vertical-align: middle;
  margin: 0 0.25rem;
  line-height: 1.5;
}
/* the live select shows only the value ("conventional"), no separator or arrow (TANGO __10, 3.31.57 PM) */
.mp-page-material-detail .mp-md-inline-select .react-select__indicators {
  display: none;
}
.mp-page-material-detail .mp-md-inline-select .react-select__value-container {
  padding: 2px 10px;
}
.mp-page-material-detail .mp-md-inline-select .react-select__single-value {
  overflow: visible;
  color: var(--hub-black);
}
.mp-page-material-detail .mp-md-inline-select .react-select__control {
  cursor: pointer;
}
/* open menus of every react-select (mpc.Select) on the page -- lattice setting, Thermodynamic
 * "Functional", XRD "Radiation source"/"Peak Profile" -- look like the live select (3.31.57 PM.png):
 * attached right under the control, 1px border, no gap; the focused option is dark text on the hub
 * blue tint and the selected one bold on the stronger tint (material-detail.md §4.1, BRAND §2
 * "dropdown menu hover"), never react-select's white-on-blue default; focus border hub link-blue */
.mp-page-material-detail .react-select__control {
  border-color: var(--hub-border); /* dash-mp-components: #dbdbdb */
}
.mp-page-material-detail .react-select__control:hover {
  border-color: var(--hub-grey);
}
/* react-select's emotion defaults (#ccc arrow and separator) as on /materials (30-materials-explorer.css) */
.mp-page-material-detail .react-select__indicator {
  color: var(--hub-grey);
}
.mp-page-material-detail .react-select__indicator:hover {
  color: var(--hub-black);
}
.mp-page-material-detail .react-select__indicator-separator {
  background-color: var(--hub-border);
}
.mp-page-material-detail .react-select__control--is-focused,
.mp-page-material-detail .react-select__control--menu-is-open,
.mp-page-material-detail .react-select__control--is-focused:hover,
.mp-page-material-detail .react-select__control--menu-is-open:hover {
  border-color: var(--hub-link);
  box-shadow: none;
}
.mp-page-material-detail .react-select__control--menu-is-open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.mp-page-material-detail .react-select__menu {
  margin-top: -1px;
  border: 1px solid var(--hub-border);
  border-top-color: #e2e2e2;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.08);
  overflow: hidden;
  z-index: 20;
}
.mp-page-material-detail .react-select__menu-list {
  padding: 0;
}
.mp-page-material-detail .react-select__option {
  line-height: 1.5;
  padding: 0.375rem 0.6rem;
  color: var(--hub-black);
  background-color: #ffffff;
  font-weight: 400;
  cursor: pointer;
}
.mp-page-material-detail .react-select__option:active,
.mp-page-material-detail .react-select__option--is-focused {
  background-color: var(--hub-blue-tint);
  color: var(--hub-black);
}
.mp-page-material-detail .react-select__option--is-selected {
  background-color: var(--hub-blue-tint-strong);
  color: var(--hub-black);
}
.mp-page-material-detail .react-select__option--is-selected {
  font-weight: 600;
}
/* the inline lattice select uses the sentence's 1rem text */
.mp-page-material-detail .mp-md-inline-select .react-select__option {
  font-size: 1rem;
}
.mp-page-material-detail .mp-md-positions-table th:first-child,
.mp-page-material-detail .mp-md-positions-table td:first-child {
  padding-left: 1em;
}

/* lazy sections */
.mp-page-material-detail .mp-md-section-body {
  min-height: 3rem;
}
.mp-page-material-detail .mp-md-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 6rem;
}
.mp-page-material-detail .mp-md-dots span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 4px;
  border-radius: 50%;
  background: var(--hub-black);
  animation: mp-md-dot 1.2s infinite ease-in-out both;
}
.mp-page-material-detail .mp-md-dots span:nth-child(1) { animation-delay: -0.32s; }
.mp-page-material-detail .mp-md-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes mp-md-dot {
  0%, 80%, 100% { transform: scale(0); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* controls (Path convention / Label convention / Projection, PD functional, ...) */
.mp-page-material-detail .mp-md-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin: 1rem 0 1.5rem;
}
.mp-page-material-detail .mp-md-field {
  margin-bottom: 1rem;
}
.mp-page-material-detail .mp-md-field > .mpc-label {
  display: block;
  font-weight: 700;
  color: var(--hub-black);
  margin-bottom: 0.5rem;
}
.mp-page-material-detail .mp-md-graph-box {
  padding: 0.75rem;
}
.mp-page-material-detail .mp-md-hint {
  font-size: 0.875rem;
  color: var(--hub-black);
  margin: 0.5rem 0 1rem;
}
.mp-page-material-detail .mp-md-note {
  color: var(--md-muted);
}
.mp-page-material-detail .mp-md-bz {
  max-width: 500px;
}
.mp-page-material-detail .mp-md-tab-panel {
  padding-top: 1rem;
}
.mp-page-material-detail .mp-md-tabs .tabs {
  margin-bottom: 0;
}

/* XRD: CT gives "Radiation source" / "Peak Profile" style={"width": "10rem"} (diffraction.py:200-246);
 * mpc.Select drops that prop, so it is applied here */
.mp-page-material-detail .react-select-container[id*="CTmd-xrd"][id*="rad_source"],
.mp-page-material-detail .react-select-container[id*="CTmd-xrd"][id*="peak_profile"] {
  width: 10rem;
}
/* compact indicator (dcc.Dropdown-like arrow zone) so "CuKα (1.542 Å)" fits the 10rem control */
.mp-page-material-detail .react-select-container[id*="CTmd-xrd"] .react-select__indicator-separator {
  display: none;
}
.mp-page-material-detail .react-select-container[id*="CTmd-xrd"] .react-select__dropdown-indicator {
  padding: 4px 6px 4px 2px;
}
.mp-page-material-detail .react-select-container[id*="CTmd-xrd"] .react-select__value-container {
  padding: 2px 4px 2px 10px;
}

/* XRD "Scherrer crystallite size / nm" range slider (mpc.RangeSlider via CT get_slider_input).
 * 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. As on /materials
 * (30-materials-explorer.css), 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 thumb and ticks, and takes no pointer events. */
.mp-page-material-detail .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-material-detail .mpc-range-slider .slider-tick-mark {
  background-color: var(--hub-border) !important; /* inline #CCC */
}
.mp-page-material-detail .mpc-range-slider .button.is-slider > .inner-slider-button {
  background-color: var(--hub-border);
}
.mp-page-material-detail .mpc-range-slider .button.is-slider.is-dragged > .inner-slider-button {
  background-color: var(--hub-link);
}

/* mpc.Tabs (XRD/TEM, elastic IEEE/structure, ...): Bulma draws the tab rules in #dbdbdb */
.mp-page-material-detail .tabs ul,
.mp-page-material-detail .tabs a {
  border-bottom-color: var(--hub-border);
}

/* TEM controls (CT diffraction_tem.py) */
.mp-page-material-detail .mp-md-tem-controls .input.mp-md-tem-number {
  width: 10rem;
}
.mp-page-material-detail .mp-md-tem-controls .input.mp-md-tem-beam {
  width: 10rem;
}
.mp-page-material-detail .mp-md-tem-advanced {
  margin-bottom: 1rem;
}
.mp-page-material-detail .mp-md-tem-advanced > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--hub-black);
  margin-bottom: 0.75rem;
}
.mp-page-material-detail .mp-md-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.mp-page-material-detail .mp-md-tem-note {
  font-size: 0.875rem;
}

/* piezoelectric right box: long vectors wrap inside the card instead of pushing the rules out */
.mp-page-material-detail .mp-md-piezo-table {
  table-layout: fixed;
}
.mp-page-material-detail .mp-md-piezo-table td:first-child {
  width: 58%;
}
.mp-page-material-detail .mp-md-piezo-table td {
  overflow-wrap: anywhere;
  white-space: normal;
}

/* phonon animation */
.mp-page-material-detail .mp-md-ph-button {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.mp-page-material-detail .mp-md-ph-anim {
  margin-bottom: 1rem;
}
/* the panel is in the layout from the start (all callback ids exist) but collapsed until
 * "Generate Phonon Animation" is clicked; it keeps its box sizes so the WebGL scene mounts at
 * 400px instead of 0x0 (a display:none parent would give the renderer a zero-size canvas) */
.mp-page-material-detail .mp-md-ph-anim.is-collapsed {
  height: 0;
  overflow: hidden;
  visibility: hidden;
  margin: 0;
  padding: 0;
}
.mp-page-material-detail .mp-md-ph-tip {
  display: inline-flex;
  border: 0.5px dashed var(--hub-black);
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.75rem;
}
.mp-page-material-detail .mp-md-ph-anim-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.mp-page-material-detail .mp-md-ph-scene {
  width: 400px;
  max-width: 100%;
}
.mp-page-material-detail .mp-md-ph-controls {
  width: 16rem;
}
.mp-page-material-detail .mp-md-ph-hr {
  background-color: var(--hub-border);
  border: none;
  height: 1px;
  margin: 8px 0;
}
.mp-page-material-detail .mp-md-ph-scales {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.mp-page-material-detail .mp-md-ph-scale {
  width: 4rem;
}
.mp-page-material-detail .mp-md-ph-color {
  width: 10rem;
  margin: 0 auto;
}

/* KaTeX tensors */
.mp-page-material-detail .mp-md-matrix-wrap {
  overflow-x: auto;
}
.mp-page-material-detail .mp-md-matrix-units {
  margin-top: 0.25rem;
}
.mp-page-material-detail .mp-md-compliance > summary {
  cursor: pointer;
  color: var(--hub-link);
  margin-bottom: 0.75rem;
}

/* XAS */
.mp-page-material-detail .mp-md-xas-label {
  font-weight: 700;
  color: var(--hub-black);
  margin: 0.5rem 0 0.25rem;
}
.mp-page-material-detail .mp-md-xas-controls label.mp-md-radio {
  margin-right: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.mp-page-material-detail .mp-md-xas-controls input[type="radio"],
.mp-page-material-detail .mp-md-controls input[type="checkbox"] {
  accent-color: var(--hub-link);
}
.mp-page-material-detail .mp-md-xas-controls .mp-md-xas-label:not(:first-child) {
  margin-top: 1rem;
}
.mp-page-material-detail .mp-md-xas-description {
  color: var(--hub-black);
  margin-bottom: 0.5rem;
}

/* substrates DataTable */
.mp-page-material-detail .mp-md-substrates .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th {
  color: var(--hub-black);
}
.mp-page-material-detail .mp-md-substrates .dash-cell-value a,
.mp-page-material-detail .mp-md-substrates .cell-markdown a {
  color: var(--hub-link);
}
.mp-page-material-detail .mp-md-substrates .cell-markdown p {
  margin: 0;
}
.mp-page-material-detail .mp-md-table-help {
  font-size: 0.875rem;
  color: var(--hub-grey);
}
.mp-page-material-detail .mp-md-table-help p {
  margin-bottom: 0.75rem;
}
/* filter operators (`<`, `>`, ...) in black on the light hub grey instead of Bulma's red code text */
.mp-page-material-detail .mp-md-table-help code {
  color: var(--hub-black);
  background-color: var(--hub-bg);
}

/* contributed data (card_bulma) */
.mp-page-material-detail .mp-md-contrib-card:not(:last-child) {
  margin-bottom: 1.5rem;
}
.mp-page-material-detail .mp-md-contrib-card .card {
  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
}
/* card_bulma cards are has-background-light (#f5f5f5): white like every other box on the #F2F2F2 page */
.mp-page-material-detail .mp-md-contrib-card .card.has-background-light {
  background-color: #fff !important;
}
/* project title link: was teal; BRAND §2 maps teal text on light to #181716 (hover: hub link-blue) */
.mp-page-material-detail .mp-md-contrib-card .is-primary.is-size-4 {
  color: var(--hub-black);
  font-weight: 600;
}
.mp-page-material-detail .mp-md-contrib-card .is-primary.is-size-4:hover,
.mp-page-material-detail .mp-md-contrib-card .is-primary.is-size-4:focus-visible {
  color: var(--hub-link);
  text-decoration: underline;
}
/* card_bulma data tables: Bulma .table cells are #363636 text on #dbdbdb rules */
.mp-page-material-detail .mp-md-contrib-card .table td,
.mp-page-material-detail .mp-md-contrib-card .table th {
  border-color: var(--hub-border);
  color: var(--hub-black);
}
.mp-page-material-detail .mp-md-contrib-card a.mp-md-reveal {
  cursor: pointer;
}
.mp-page-material-detail .mp-md-contrib-intro {
  margin-bottom: 1rem;
}
.mp-page-material-detail .mp-md-empty {
  color: var(--md-muted);
}

/* structure legend chips (Ba²⁺ ...): background is the element colour (inline, functional); the Bulma
 * .button.is-static border #dbdbdb becomes the hub border */
.mp-page-material-detail .button.is-static {
  border-color: var(--hub-border);
}

/* tags (External Links database ids, provenance tags, BY-NC licence tag) in hub colours */
.mp-page-material-detail .tag.is-dark {
  background-color: var(--hub-black);
  color: #fff;
}
.mp-page-material-detail .tag.is-link.is-light {
  background-color: var(--hub-blue-tint);
  color: var(--hub-link);
}
.mp-page-material-detail a.tag.is-link.is-light:hover {
  background-color: var(--hub-blue-tint-strong);
  color: var(--hub-link-hover);
}
.mp-page-material-detail .tag.is-warning {
  background-color: var(--hub-yellow);
  color: var(--hub-black);
}
.mp-page-material-detail .notification.mp-md-deprecated {
  background-color: var(--hub-yellow);
  color: var(--hub-black);
}

/* literature */
.mp-page-material-detail .mp-md-bibfilter .mpc-bib-card.box {
  margin-bottom: 1rem;
}
/* journal / BibTeX buttons: Bulma .tag text #4a4a4a -> hub body text */
.mp-page-material-detail .mp-md-bibfilter .mpc-bib-card .mpc-publication-button,
.mp-page-material-detail .mp-md-bibfilter .mpc-bib-card .mpc-bibtex-button {
  color: var(--hub-black);
}

/* not found */
.mp-page-material-detail .mp-md-not-found {
  max-width: 40rem;
}

/* task page */
.mp-page-task-detail .mp-md-task-table td:first-child {
  width: 45%;
}

/* tablet / small desktop: the is-3 column is too narrow for thumbnail + formula side by side */
@media screen and (min-width: 769px) and (max-width: 1215px) {
  .mp-page-material-detail .mp-md-material-header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1.75rem;
  }
  .mp-page-material-detail .mp-md-thumb {
    flex: 0 0 auto;
    padding-left: 0;
    margin-bottom: 0.5rem;
  }
  .mp-page-material-detail .mp-md-formula {
    font-size: 2rem;
  }
  .mp-page-material-detail .mp-md-id {
    font-size: 1.25rem;
  }
}

@media screen and (max-width: 768px) {
  .mp-page-material-detail .mp-md-material-header {
    margin-bottom: 1.5rem;
  }
  .mp-page-material-detail .mp-md-controls > .mp-md-field {
    width: 100% !important;
  }
}