/* SPREE Materials Hub — static pages (module static-pages, MASTER §5 row 4; docs/BRAND.md §2, §6).
   Every rule is scoped under the page class passed to page_frame(page_class="mp-page-<key>") (MASTER §4.8).
   Colours come from the hub tokens defined by core in 10-mp-overrides.css (var(--hub-*)); contrast rules (WCAG AA):
   yellow is a background with #181716 text, or a colour on #181716 only — never yellow text or thin yellow lines on
   light surfaces. Icons on white are #181716. Geometry (px) still follows the original screenshots:
   home = TANGO apps_analysis_apps_pourbaix_diagram_tutorial__01.png; /apps = docs "Screen Shot 2022-07-14" PNGs. */

/* ======================================================================= home (/) */
/* core: .mp-home .main-section {background: var(--hub-black)}; buttons on the hero: yellow primary,
   white-outlined secondary (10-mp-overrides.css). The content block is vertically centred in the 65vh hero. */
.mp-page-home .mp-home-hero { color: #fff; }
.mp-page-home .mp-home-hero > .hero-body { display: flex; align-items: center; }
.mp-page-home .mp-home-hero .container > .columns { flex: 1 1 auto; min-width: 0; }
.mp-page-home .mp-home-polyhedra { display: flex; align-items: flex-end; height: 50px; }
.mp-page-home .main-section .columns .column img.mp-home-polyhedron { height: 50px; width: auto; margin-right: .85rem; }
.mp-page-home .mp-home-title { color: #fff; font-size: 3rem; font-weight: 700; line-height: 1.125;
  margin-top: .4rem; margin-bottom: .75rem; }
.mp-page-home .main-section .mp-home-subtitle { color: #fff; font-size: 1.375rem; font-weight: 600; line-height: 1.3;
  margin-top: 0; margin-bottom: 1.25rem; }
.mp-page-home .mp-home-tagline { color: #fff; font-size: 1.2rem; line-height: 1.5; margin-bottom: 1.5rem; max-width: 46rem; }
.mp-page-home .mp-home-buttons .button { font-size: 1rem; }
/* highlights band: grey page background, three cards (yellow header bar, white body) */
.mp-page-home .mp-home-news { padding: 3rem 4.5rem; }  /* same inset as the hero (3rem + 1.5rem) */
/* CSS-MP makes every .mp-home .container a centred flex row; the band stacks its heading above the cards */
.mp-page-home .mp-home-news > .container { display: block; }
.mp-page-home .mp-home-news-heading { color: var(--hub-black); margin-bottom: 1.25rem; }
.mp-page-home .mp-news-list { align-items: stretch; }
.mp-page-home .mp-news-list > .column { display: flex; }
.mp-page-home .mp-news-card { display: flex; flex-direction: column; width: 100%; background-color: #fff; border-radius: 4px;
  margin-bottom: 0; box-shadow: 0 .5em 1em -.125em rgba(24, 23, 22, .1), 0 0 0 1px rgba(24, 23, 22, .04); }
.mp-page-home .mp-news-card .message-header { border-radius: 4px 4px 0 0; background-color: var(--hub-yellow);
  color: var(--hub-black); flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .2rem;
  padding: .75rem 1.25rem; }
.mp-page-home .mp-news-card .message-header p { margin: 0; color: var(--hub-black); }
.mp-page-home .mp-news-card .mp-news-title { font-weight: 700; font-size: 1.1rem; line-height: 1.3; }
.mp-page-home .mp-news-card .mp-news-date { font-size: .875rem; font-weight: 400; }
.mp-page-home .mp-news-card .message-body { flex: 1 1 auto; background-color: #fff; color: var(--hub-black); border-width: 0;
  border-radius: 0 0 4px 4px; padding: 1.25rem; }
.mp-page-home .mp-news-text,
.mp-page-home .mp-news-text p,
.mp-page-home .mp-news-text li { font-size: 1.05rem; color: var(--hub-black); line-height: 1.5; }
.mp-page-home .mp-news-text p:not(:last-child) { margin-bottom: .5rem; }
.mp-page-home .mp-news-text ul { list-style: disc outside; margin-left: 1.5em; }
.mp-page-home .mp-news-text ol { list-style: decimal outside; margin-left: 1.5em; }
/* blocks after a list keep the paragraph rhythm */
.mp-page-home .mp-news-text ul:not(:last-child),
.mp-page-home .mp-news-text ol:not(:last-child),
.mp-page-home .mp-news-text pre:not(:last-child),
.mp-page-home .mp-news-text blockquote:not(:last-child) { margin-bottom: .5rem; }
/* links: hub link blue (beats Bulma's ".message a:not(.button)…{color: currentColor}"); external ones keep the
   theme's ↗ (a[target=_blank]::after) */
.mp-page-home .mp-news-card .mp-news-text a:not(.button):not(.tag) { color: var(--hub-link); text-decoration: underline;
  font-weight: 600; }
.mp-page-home .mp-news-card .mp-news-text a:not(.button):not(.tag):hover { color: var(--hub-link-hover); }
.mp-page-home .mp-news-text code { color: inherit; background: var(--hub-bg); }
@media screen and (max-width: 768px) {
  .mp-page-home .mp-home-title { font-size: 2.25rem; }
  .mp-page-home .main-section .mp-home-subtitle { font-size: 1.15rem; }
  .mp-page-home .mp-home-tagline { font-size: 1.05rem; }
  .mp-page-home .mp-home-hero { padding: 1.5rem; }
  .mp-page-home .mp-home-buttons .button,
  .mp-page-home .mp-home-buttons .button:not(:last-child):not(.is-fullwidth) { width: 100%; margin-right: 0; }
  .mp-page-home .mp-home-news { padding: 2rem .75rem; }
}

/* ======================================================================= shared text colours
   Bulma paints .box / .content text #4a4a4a and inline code red (#da1039): body text is #181716 (BRAND §3), and
   inline code is black on the light grey page background. */
.mp-page-about .box, .mp-page-about .content, .mp-page-about-people .box, .mp-page-about-publications .box,
.mp-page-about-cite .box, .mp-page-about-cite .content, .mp-page-about-terms .box, .mp-page-about-terms .content,
.mp-page-changelog .box, .mp-page-changelog .content, .mp-page-api .box, .mp-page-api .content,
.mp-page-dashboard .box, .mp-page-research .content { color: var(--hub-black); }
.mp-page-about :not(pre) > code, .mp-page-about-publications :not(pre) > code, .mp-page-about-cite :not(pre) > code,
.mp-page-about-terms :not(pre) > code, .mp-page-changelog :not(pre) > code, .mp-page-api :not(pre) > code,
.mp-page-dashboard :not(pre) > code { color: var(--hub-black); background-color: var(--hub-bg); }

/* ======================================================================= shared card grid (/apps, /about, /research) */
.mp-page-apps .mp-card-grid,
.mp-page-about .mp-card-grid,
.mp-page-research .mp-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; row-gap: 2rem; }
@media screen and (max-width: 859px) {
  .mp-page-apps .mp-card-grid, .mp-page-about .mp-card-grid, .mp-page-research .mp-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 559px) {
  .mp-page-apps .mp-card-grid, .mp-page-about .mp-card-grid, .mp-page-research .mp-card-grid { grid-template-columns: minmax(0, 1fr); }
}
/* a.card: white, soft shadow; hover = lift + 2px black outline + link-blue title (no yellow lines on white) */
.mp-page-apps a.mp-link-card,
.mp-page-about a.mp-link-card,
.mp-page-research a.mp-link-card { display: block; height: 100%; border-radius: .25rem; color: var(--hub-black); background-color: #fff;
  transition: box-shadow .15s ease, transform .15s ease; }
.mp-page-apps a.mp-link-card:hover, .mp-page-apps a.mp-link-card:focus-visible,
.mp-page-about a.mp-link-card:hover, .mp-page-about a.mp-link-card:focus-visible,
.mp-page-research a.mp-link-card:hover, .mp-page-research a.mp-link-card:focus-visible {
  box-shadow: 0 .75em 1em -.125em rgba(24, 23, 22, .18), 0 0 0 2px var(--hub-black); transform: translateY(-2px); }
.mp-page-apps a.mp-link-card:hover .title.is-5,
.mp-page-about a.mp-link-card:hover .title.is-5,
.mp-page-research a.mp-link-card:hover .title.is-5 { color: var(--hub-link); text-decoration: underline; }
.mp-page-apps .mp-link-card .card-content,
.mp-page-about .mp-link-card .card-content,
.mp-page-research .mp-link-card .card-content,
.mp-page-research .mp-research-hub .card-content { padding: 1.25rem 1.25rem 1.3rem; }
.mp-page-apps .mp-link-card .mp-card-icon,
.mp-page-about .mp-link-card .mp-card-icon,
.mp-page-research .mp-card-icon { font-size: 3rem; height: 3rem; line-height: 1; color: var(--hub-black); display: flex; align-items: center; }
.mp-page-apps .mp-link-card .mp-card-icon > i,
.mp-page-about .mp-link-card .mp-card-icon > i,
.mp-page-research .mp-card-icon > i { top: 0; line-height: 1; }
.mp-page-apps .mp-link-card .mp-card-icon > [class*="icon-fontastic-"]::before { vertical-align: top; }
.mp-page-apps .mp-link-card .title.is-5,
.mp-page-about .mp-link-card .title.is-5,
.mp-page-research .mp-link-card .title.is-5,
.mp-page-research .mp-research-hub .title.is-5 { color: var(--hub-black); font-size: 1.25rem; line-height: 1.125; margin-top: 1.4rem; margin-bottom: .9375rem; }
.mp-page-apps .mp-link-card .mp-card-description,
.mp-page-about .mp-link-card .mp-card-description,
.mp-page-research .mp-card-description { color: var(--hub-black); line-height: 1.5; }
.mp-page-research .mp-link-card .mp-card-ext { color: var(--hub-grey); font-size: .75rem; margin-left: .25rem; display: inline; height: auto; width: auto;
  line-height: 0; vertical-align: super; }

/* ======================================================================= /apps */
.mp-page-apps .mp-apps-section:not(:last-child) { margin-bottom: 3rem; }
.mp-page-apps .mp-apps-heading { font-size: 2rem; font-weight: 700; color: var(--hub-black); line-height: 1.125; margin-bottom: 1.5rem; }

/* ======================================================================= /about (About the Hub) */
/* TOC: core styles .menu-list (black links, blue-tint hover, yellow + black active pill) */
.mp-page-about .mp-about-toc { position: sticky; top: 1.5rem; }
/* label sits on the page background (#F2F2F2): --hub-grey there is 4.24:1, below AA, so use hub black */
.mp-page-about .mp-about-menu .menu-label { margin-bottom: .5rem; color: var(--hub-black); }
.mp-page-about .mp-about-menu .menu-list a { border-radius: 2px; padding: .4em .75em; }
.mp-page-about .mp-about-section { scroll-margin-top: 1rem; }
.mp-page-about .mp-about-section:not(:last-child) { margin-bottom: 2.5rem; }
.mp-page-about .mp-about-section .content { max-width: 52rem; }
.mp-page-about .mp-about-lead { color: var(--hub-black); }
.mp-page-about .mp-about-placeholder { max-width: 36rem; text-align: left; }
.mp-page-about .mp-about-links { columns: 2; column-gap: 2rem; }
@media screen and (max-width: 559px) {
  .mp-page-about .mp-about-links { columns: 1; }
}

/* ======================================================================= /about/people */
.mp-page-about-people .mp-people-intro { max-width: 52rem; margin-bottom: 1rem; }
.mp-page-about-people .mp-people-note { max-width: 52rem; margin-bottom: 1.5rem; }
.mp-page-about-people .mp-person-card { height: 100%; text-align: center; }
.mp-page-about-people .mp-person-placeholder { border: 2px dashed var(--hub-border); box-shadow: none; background: var(--hub-bg-light); }
.mp-page-about-people .mp-person-avatar { width: 64px; height: 64px; margin: 0 auto .75rem; border-radius: 50%;
  background: #fff; border: 2px dashed var(--hub-border); color: var(--hub-grey); display: flex; align-items: center;
  justify-content: center; font-size: 1.5rem; }
.mp-page-about-people .mp-person-name { color: var(--hub-black); }
.mp-page-about-people .mp-person-role { color: var(--hub-grey); font-size: .875rem; }

/* ======================================================================= /about/publications (mpc.BibFilter) */
.mp-page-about-publications .mp-publications-placeholder { margin-bottom: 1.5rem; }
.mp-page-about-publications .mpc-bib-filter-controls { margin-bottom: 1.5rem; }
.mp-page-about-publications .mpc-bib-card.box { margin-bottom: 1rem; }
.mp-page-about-publications .mpc-bib-card-title { font-weight: 600; }
.mp-page-about-publications .mpc-bib-card-buttons { margin-top: .5rem; }
.mp-page-about-publications .mpc-bib-card-buttons a[target="_blank"]::after { content: none; }
.mp-page-about-publications .mp-publications-template { max-width: 52rem; margin-top: 1.5rem; }
.mp-page-about-publications .mp-publications-template pre { background: var(--hub-bg); border-radius: 4px; padding: 0; }
.mp-page-about-publications .mp-publications-template pre code { display: block; background: none; color: var(--hub-black);
  padding: 1rem; white-space: pre; overflow-x: auto; }
/* phones: Bulma .tag is nowrap / 2em high, so long journal names ran off the page (MASTER §2.3) */
@media screen and (max-width: 768px) {
  .mp-page-about-publications .mpc-publication-button.tag { white-space: normal; height: auto; min-height: 2em; max-width: 100%;
    overflow-wrap: anywhere; padding-top: .25em; padding-bottom: .25em; }
  .mp-page-about-publications .mpc-publication-button.tag > svg { flex-shrink: 0; }
}

/* ======================================================================= /about/cite */
.mp-page-about-cite .mp-cite { max-width: 60rem; }
.mp-page-about-cite .mp-cite-intro { margin-bottom: 1.5rem; }
.mp-page-about-cite .mp-cite-box { margin-bottom: 1.5rem; }
.mp-page-about-cite .mp-cite-data { scroll-margin-top: 1rem; margin-top: 2.5rem; }
.mp-page-about-cite .mp-cite-data-heading { margin-bottom: 1rem; }
.mp-page-about-cite .mp-cite-canonical { border-left: 4px solid var(--hub-black); padding: .75rem 1rem; margin: 1rem 0 1.5rem;
  background: var(--hub-bg); color: var(--hub-black); }
.mp-page-about-cite .mp-cite-hub-draft { border-left-style: dashed; }
.mp-page-about-cite .mp-cite-draft { color: var(--hub-black); font-weight: 600; }
.mp-page-about-cite .mp-cite-placeholder { text-align: left; }
.mp-page-about-cite .mp-cite-bibtex-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.mp-page-about-cite pre.mp-cite-pre { background: var(--hub-bg); border-radius: 4px; padding: 0; overflow-x: auto; }
.mp-page-about-cite pre.mp-cite-pre code { display: block; background: none; color: var(--hub-black); white-space: pre-wrap; word-break: break-word;
  font-size: .85rem; padding: 1rem; }
.mp-page-about-cite .mp-cite-property:not(:last-child) { margin-bottom: 1.25rem; }
.mp-page-about-cite .mp-cite-property ol { margin-top: .25rem; }
.mp-page-about-cite .mp-cite-doi { white-space: nowrap; }
@media screen and (max-width: 768px) {
  .mp-page-about-cite .mp-cite-doi { white-space: normal; overflow-wrap: anywhere; }
}

/* copy buttons (dcc.Clipboard inside a Bulma button) */
.mp-page-about-cite .mp-copy-button,
.mp-page-api .mp-copy-button,
.mp-page-dashboard .mp-copy-button { cursor: pointer; color: var(--hub-black); }

/* ======================================================================= /about/terms */
.mp-page-about-terms .mp-terms { max-width: 60rem; }
.mp-page-about-terms .mp-terms-section { scroll-margin-top: 1rem; margin-bottom: 1.5rem; }
.mp-page-about-terms .mp-terms-toc .menu-list { margin-left: 0; }
.mp-page-about-terms .mp-terms-toc .menu-list a { padding: .25em .5em; }

/* ======================================================================= /changelog */
.mp-page-changelog .mp-changelog { max-width: 60rem; }
.mp-page-changelog .mp-changelog-entries h4 { margin-top: 1.5em; margin-bottom: .5em; }
.mp-page-changelog .mp-changelog-entries h4:first-child { margin-top: 0; }
.mp-page-changelog .mp-changelog-db { scroll-margin-top: 1rem; }
.mp-page-changelog .mp-changelog-db h3 { border-top: 1px solid var(--hub-border); padding-top: 1rem; margin-top: 1.5rem; }
/* long unbreakable tokens (code, long link text) wrap instead of widening the page on phones (MASTER §2.3) */
.mp-page-changelog .content :not(pre) > code,
.mp-page-changelog .content a { overflow-wrap: anywhere; }

/* ======================================================================= /api */
.mp-page-api .mp-api-doc { max-width: 60rem; }
.mp-page-api .mp-api-lead { font-size: 1.125rem; }
/* loose numbered list ("Accessing Data" 1./2./3.): items are separated like paragraphs (1em), not Bulma's .25em */
.mp-page-api .mp-api-doc .mp-md-loose > li + li { margin-top: 1em; }
.mp-page-api .mp-api-heading { scroll-margin-top: 1rem; }
.mp-page-api .mp-api-key-widget { margin: 0 0 1.25rem; max-width: 36rem; }
.mp-page-api .mp-api-key-widget .input { font-family: monospace; }
.mp-page-api .mp-api-doc pre { background: var(--hub-bg); border-radius: 4px; padding: 0; }
.mp-page-api .mp-api-doc pre code { background: none; color: var(--hub-black); padding: 1rem; display: block; white-space: pre; overflow-x: auto; }
.mp-page-api .mp-api-doc :not(pre) > code { overflow-wrap: anywhere; }

/* ======================================================================= /dashboard */
.mp-page-dashboard .mp-dashboard-box { height: 100%; }
.mp-page-dashboard .mp-dashboard-profile th { width: 9rem; color: var(--hub-black); }
.mp-page-dashboard .mp-dashboard-demo-note { color: var(--hub-grey); }
.mp-page-dashboard .mp-dashboard-key .input { font-family: monospace; }
.mp-page-dashboard .mp-dashboard-key { margin-top: .75rem; }
.mp-page-dashboard #dash-api-key-reveal { min-width: 6rem; }
.mp-page-dashboard #dash-contributions p { margin-bottom: 1rem; }
/* Dash 4 component theme (purple #7f4bc4 by default) -> hub palette: link-blue focus, #C8C8C8 borders */
.mp-page-dashboard { --Dash-Fill-Interactive-Strong: #3F61C4; --Dash-Text-Strong: #181716; --Dash-Stroke-Strong: #C8C8C8; }

/* ======================================================================= /research */
.mp-page-research .mp-research-intro { color: var(--hub-black); max-width: 52rem; }
/* four research areas: a 2 x 2 grid on desktop (one column on phones, from the shared grid rules) */
@media screen and (min-width: 560px) {
  .mp-page-research .mp-card-grid.mp-research-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mp-page-research .mp-research-hub { margin-top: 2rem; border-radius: .25rem; background: #fff; color: var(--hub-black); }
.mp-page-research .mp-research-hub-links { list-style: disc outside; margin-left: 1.5em; margin-top: .75rem; }
.mp-page-research .mp-research-hub-links li + li { margin-top: .35rem; }
.mp-page-research .mp-research-more { margin-top: 2rem; max-width: 60rem; }