/* SPREE Materials Hub — UNSW theme and shell CSS (docs/BRAND.md §2–§5; layout per MASTER §2.6).
   Loaded after 00-mp-main.css (Font Awesome 5 + Bulma 0.9.1 + bulma-tooltip + the stock dash-mp-components
   rules, never edited) and before the module stylesheets 3x-*.css.

   Palette: UNSW colour tokens (BRAND §2). Contrast rules (WCAG AA): yellow is a BACKGROUND (with #181716 text)
   or a text/line colour on #181716 / #1A1E2B only — never yellow text or thin yellow lines on white/light grey.
   Icons on light backgrounds are #181716; on dark backgrounds #FFFFFF (#FFDC00 for the active one).
   Scientific colour scales (periodic table families, phase-diagram stability, heatmaps, band traces) are
   functional and deliberately untouched. Class names keep their internal mp-* prefix (BRAND §7). */

:root {
  --hub-yellow: #FFDC00;
  --hub-yellow-hover: #F0CF00;
  --hub-black: #181716;
  --hub-navy: #1A1E2B;
  --hub-link: #3F61C4;
  --hub-link-hover: #2F4A99;
  --hub-grey: #737373;
  /* muted text that may sit on the #F2F2F2 page background or the #EBEBEB band: #737373 reaches WCAG AA
     only on white / #F9F9F9 (4.24:1 on #F2F2F2), #5E5E5E is 5.8:1 on #F2F2F2 and 5.4:1 on #EBEBEB */
  --hub-grey-on-bg: #5E5E5E;
  --hub-border: #C8C8C8;
  --hub-bg: #F2F2F2;
  --hub-bg-light: #F9F9F9;
  --hub-band: #EBEBEB;
  --hub-yellow-tint: #FFF5B2;
  --hub-yellow-tint-light: #FFFAD9;
  --hub-blue-tint: #EDF0F9;
  --hub-blue-tint-strong: #E2E7F6;
  --hub-success: #48C78E;
  --hub-danger: #F14668;
  --hub-warning: #FFDC00;
  --hub-font-heading: Clancy, Arial, Helvetica, sans-serif;  /* UNSW licensed font: referenced by name only */
  --hub-font-body: Arial, Helvetica, sans-serif;
  /* legacy token names (internal identifiers kept, BRAND §7) mapped onto the hub palette */
  --mp-navbar: var(--hub-black);
  --mp-navy: var(--hub-navy);
  --mp-teal: var(--hub-yellow);
  --mp-link: var(--hub-link);
  --mp-band: var(--hub-band);
  --mp-border: var(--hub-border);
  --mp-footer-link: #FFFFFF;
  --mp-sidebar-width: 50px;
}

/* ---------------------------------------------------------------- typography (BRAND §3) */
html, html body, .body { background: var(--hub-bg) !important; }
body, button, input, optgroup, select, textarea { font-family: var(--hub-font-body); }
body { color: var(--hub-black); font-size: 1em; }
.is-family-primary, .is-family-secondary, .is-family-sans-serif { font-family: var(--hub-font-body) !important; }
h1, h2, h3, h4, h5, h6, .title, .subtitle, .navbar-brand > .navbar-item { font-family: var(--hub-font-heading); }
.title, .content h1, .content h2, .content h3, .content h4, .content h5, .content h6, strong, .label { color: var(--hub-black); }
.subtitle { color: var(--hub-black); }
/* Bulma's #4A4A4A text colour -> #181716 everywhere (BRAND §2), not page by page */
pre, .box, .card, .tag:not(body), .file-cta, .dropdown-item, .react-select-container .react-select__option,
.message-body, .panel-list a, .button.is-text { color: var(--hub-black); }
.control.has-icons-left .input:focus ~ .icon, .control.has-icons-left .select:focus ~ .icon,
.control.has-icons-right .input:focus ~ .icon, .control.has-icons-right .select:focus ~ .icon { color: var(--hub-black); }
.message-header { background-color: var(--hub-black); }
/* muted text: utility classes can land on any light surface (white box, #F2F2F2 page, #EBEBEB band), so they use
   the grey that passes AA on all of them; menu labels in the white navbar dropdown / mobile panel keep --hub-grey */
.has-text-grey { color: var(--hub-grey-on-bg) !important; }
.menu-label { color: var(--hub-grey-on-bg); }
[data-tooltip]:not(.is-loading)::before, [data-tooltip]:not(.is-loading)::after,
.tooltip .tooltiptext, .tooltip::after { font-family: var(--hub-font-body); }

/* ---------------------------------------------------------------- links (#3F61C4 on light) */
a { color: var(--hub-link); }
a:hover { color: var(--hub-link-hover); }
.breadcrumb a { color: var(--hub-link); }
.breadcrumb a:hover { color: var(--hub-link-hover); }
.breadcrumb li + li::before { color: var(--hub-grey); }
.has-text-link { color: var(--hub-link) !important; }
.has-background-link { background-color: var(--hub-link) !important; }
.help.is-link { color: var(--hub-link); }
a.box:hover, a.box:focus { box-shadow: 0 .5em 1em -.125em rgba(10, 10, 10, .1), 0 0 0 1px var(--hub-link); }
.panel-list a:hover { color: var(--hub-link); }
.badge { background: var(--hub-link); }
i.is-active, span.is-active, p.is-active, svg.is-active { color: var(--hub-link); }

/* focus rings: link blue on light surfaces, yellow on dark surfaces */
a:focus-visible, button:focus-visible, .button:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--hub-link); outline-offset: 2px; }
.navbar :focus-visible, .mp-footer :focus-visible, .mp-sidebar :focus-visible,
.mp-home .main-section :focus-visible, .mp-on-dark :focus-visible { outline-color: var(--hub-yellow); }
/* ... except the white panels inside the navbar (desktop dropdowns, mobile slide-in menu): link blue again */
.navbar .navbar-dropdown :focus-visible, .navbar-mobile .navbar-mobile-menu :focus-visible { outline-color: var(--hub-link); }

/* ---------------------------------------------------------------- buttons */
.button { border-color: var(--hub-border); color: var(--hub-black); }
.button:hover, .button.is-hovered { border-color: var(--hub-grey); color: var(--hub-black); }
.button:focus, .button.is-focused { border-color: var(--hub-link); color: var(--hub-black); }
.button:focus:not(:active), .button.is-focused:not(:active) { box-shadow: 0 0 0 .125em rgba(63, 97, 196, .25); }
/* primary = yellow background, black text (BRAND §2) */
.button.is-primary, .button.is-primary[disabled], fieldset[disabled] .button.is-primary,
.file.is-primary .file-cta {
  background-color: var(--hub-yellow); border-color: transparent; color: var(--hub-black); font-weight: 600; }
.button.is-primary:hover, .button.is-primary.is-hovered,
.file.is-primary:hover .file-cta, .file.is-primary.is-hovered .file-cta {
  background-color: var(--hub-yellow-hover); border-color: transparent; color: var(--hub-black); }
.button.is-primary:focus, .button.is-primary.is-focused { border-color: transparent; color: var(--hub-black); }
.button.is-primary:focus:not(:active), .button.is-primary.is-focused:not(:active),
.file.is-primary:focus .file-cta, .file.is-primary.is-focused .file-cta { box-shadow: 0 0 0 .125em rgba(24, 23, 22, .45); color: var(--hub-black); }
.button.is-primary:active, .button.is-primary.is-active { background-color: #E6C600; border-color: transparent; color: var(--hub-black); }
.button.is-primary.is-light, .notification.is-primary.is-light, .tag:not(body).is-primary.is-light {
  background-color: var(--hub-yellow-tint-light); color: var(--hub-black); }
.button.is-primary.is-light:hover, .button.is-primary.is-light.is-hovered,
.button.is-primary.is-light:active, .button.is-primary.is-light.is-active { background-color: var(--hub-yellow-tint); color: var(--hub-black); }
/* outlined / inverted primary on light surfaces: black outline (no thin yellow lines on white) */
.button.is-primary.is-outlined, .button.is-primary.is-outlined[disabled], fieldset[disabled] .button.is-primary.is-outlined {
  background-color: transparent; border-color: var(--hub-black); color: var(--hub-black); }
.button.is-primary.is-outlined:hover, .button.is-primary.is-outlined.is-hovered,
.button.is-primary.is-outlined:focus, .button.is-primary.is-outlined.is-focused {
  background-color: var(--hub-yellow); border-color: var(--hub-yellow); color: var(--hub-black); }
.button.is-primary.is-outlined.is-loading::after { border-color: transparent transparent var(--hub-black) var(--hub-black) !important; }
.button.is-primary.is-inverted, .button.is-primary.is-inverted[disabled], fieldset[disabled] .button.is-primary.is-inverted,
.button.is-primary.is-inverted.is-outlined:hover, .button.is-primary.is-inverted.is-outlined.is-hovered,
.button.is-primary.is-inverted.is-outlined:focus, .button.is-primary.is-inverted.is-outlined.is-focused {
  background-color: #fff; color: var(--hub-black); }
/* link buttons */
.button.is-link, .button.is-link[disabled], fieldset[disabled] .button.is-link, .file.is-link .file-cta {
  background-color: var(--hub-link); border-color: transparent; color: #fff; }
.button.is-link:hover, .button.is-link.is-hovered { background-color: var(--hub-link-hover); color: #fff; }
.button.is-link:focus:not(:active), .button.is-link.is-focused:not(:active) { box-shadow: 0 0 0 .125em rgba(63, 97, 196, .25); }
.button.is-link.is-outlined, .button.is-link.is-outlined[disabled] { background-color: transparent; border-color: var(--hub-link); color: var(--hub-link); }
.button.is-link.is-outlined:hover, .button.is-link.is-outlined.is-hovered,
.button.is-link.is-outlined:focus, .button.is-link.is-outlined.is-focused { background-color: var(--hub-link); border-color: var(--hub-link); color: #fff; }
.button.is-link.is-inverted { color: var(--hub-link); }
/* buttons on dark surfaces (navbar, footer, home hero, .mp-on-dark): white outline, yellow hover */
.mp-home .main-section .button.is-outlined:not(.is-primary), .mp-on-dark .button.is-outlined:not(.is-primary),
.mp-home .main-section .button.is-primary.is-outlined, .mp-on-dark .button.is-primary.is-outlined {
  background-color: transparent; border-color: #fff; color: #fff; }
.mp-home .main-section .button.is-outlined:hover, .mp-on-dark .button.is-outlined:hover,
.mp-home .main-section .button.is-outlined:focus, .mp-on-dark .button.is-outlined:focus {
  background-color: var(--hub-yellow); border-color: var(--hub-yellow); color: var(--hub-black); }

/* ---------------------------------------------------------------- Bulma "primary" (was teal) and "link" states */
.has-text-primary { color: var(--hub-black) !important; }  /* teal glyph/text on light -> black (BRAND §2) */
.navbar .has-text-primary, .mp-footer .has-text-primary, .mp-sidebar .has-text-primary,
.mp-home .main-section .has-text-primary, .mp-on-dark .has-text-primary { color: var(--hub-yellow) !important; }
.has-background-primary { background-color: var(--hub-yellow) !important; color: var(--hub-black); }
.has-text-primary-dark { color: var(--hub-black) !important; }
.has-text-primary-light { color: var(--hub-yellow-tint) !important; }
.has-background-primary-light { background-color: var(--hub-yellow-tint-light) !important; }
.has-background-primary-dark { background-color: var(--hub-black) !important; }
.notification.is-primary, .tag:not(body).is-primary, .hero.is-primary, .navbar.is-primary,
.panel.is-primary .panel-heading, .message.is-primary .message-header, .table td.is-primary, .table th.is-primary {
  background-color: var(--hub-yellow); border-color: var(--hub-yellow); color: var(--hub-black); }
.hero.is-primary .title, .hero.is-primary .subtitle { color: var(--hub-black); }
.message.is-primary { background-color: var(--hub-yellow-tint-light); }
.message.is-primary .message-body { border-color: var(--hub-black); color: var(--hub-black); }
.panel.is-primary .panel-tabs a.is-active { border-bottom-color: var(--hub-black); }
.panel.is-primary .panel-block.is-active .panel-icon { color: var(--hub-black); }
.help.is-primary { color: var(--hub-black); }
.is-primary.input, .is-primary.textarea, .select.is-primary select { border-color: var(--hub-black); }
.select.is-primary:not(:hover)::after { border-color: var(--hub-black); }
.progress.is-primary::-webkit-progress-value { background-color: var(--hub-black); }
.progress.is-primary::-moz-progress-bar { background-color: var(--hub-black); }
.progress.is-primary:indeterminate { background-image: linear-gradient(to right, var(--hub-black) 30%, var(--hub-bg) 30%); }
.progress.is-link::-webkit-progress-value { background-color: var(--hub-link); }
.progress.is-link::-moz-progress-bar { background-color: var(--hub-link); }
.notification.is-link, .tag:not(body).is-link, .hero.is-link, .table td.is-link, .table th.is-link,
.panel.is-link .panel-heading, .message.is-link .message-header { background-color: var(--hub-link); color: #fff; }
.message.is-link .message-body { border-color: var(--hub-link); color: var(--hub-link-hover); }
.panel.is-link .panel-block.is-active .panel-icon { color: var(--hub-link); }
.pagination-link.is-current { background-color: var(--hub-link); border-color: var(--hub-link); color: #fff; }
.pagination-previous:focus, .pagination-next:focus, .pagination-link:focus { border-color: var(--hub-link); }
.panel-block.is-active { border-left-color: var(--hub-link); color: var(--hub-black); }
.panel-block.is-active .panel-icon { color: var(--hub-link); }
/* selected rows: yellow tint */
.table tr.is-selected, .table td.is-selected, .table th.is-selected { background-color: var(--hub-yellow-tint); color: var(--hub-black); }
.table tr.is-selected a, .table tr.is-selected strong { color: inherit; }
.table.is-hoverable tbody tr:not(.is-selected):hover { background-color: var(--hub-bg-light); }
.table td, .table th { border-color: var(--hub-border); }
.Select--multi .Select-value { background-color: var(--hub-yellow); border-color: var(--hub-black); color: var(--hub-black); }

/* ---------------------------------------------------------------- active pills, tabs, menus (yellow bg + black text) */
.menu-list a { color: var(--hub-black); }
.menu-list a:hover { background-color: var(--hub-blue-tint); color: var(--hub-black); }
.menu-list a.is-active, .menu-list li.is-active > a { background-color: var(--hub-yellow); color: var(--hub-black); font-weight: 600; }
.tabs a { border-bottom-color: var(--hub-border); color: var(--hub-black); }
.tabs a:hover { border-bottom-color: var(--hub-black); color: var(--hub-black); }
.tabs li.is-active a { background-color: var(--hub-yellow); border-bottom-color: var(--hub-black); color: var(--hub-black); font-weight: 600; }
.tabs.is-boxed li.is-active a { background-color: var(--hub-yellow); border-color: var(--hub-yellow); }
.tabs.is-toggle li.is-active a, .toggle-buttons .is-active, .buttons.has-addons .button.is-active,
.buttons.has-addons .button.is-selected {
  background-color: var(--hub-yellow); border-color: var(--hub-yellow); color: var(--hub-black); }
a.dropdown-item.is-active, button.dropdown-item.is-active, .dropdown-item.is-active,
.react-select-container .react-select__option--is-selected { background-color: var(--hub-link); color: #fff; }
.dropdown-item:hover, a.dropdown-item:hover, button.dropdown-item:hover { background-color: var(--hub-blue-tint); color: var(--hub-black); }
/* dcc.Tabs (Dash default #1975FA top border); modules may still restyle their own tabs */
#react-entry-point .tab.tab--selected { background-color: var(--hub-yellow); color: var(--hub-black);
  border-top-color: var(--hub-black); }
/* dash-mp-components injected styles (SearchUI): higher specificity than the injected <style> blocks */
body .mpc-search-ui .button.is-active { background: var(--hub-yellow); border-color: var(--hub-yellow); color: var(--hub-black); }
body .mpc-search-ui .panel-block.is-active { border-left-color: var(--hub-link); }
body .mpc-range-slider .button.is-slider.is-dragged > .inner-slider-button { background-color: var(--hub-link); }
body .mat-element.active { background: var(--hub-yellow-tint); }

/* ---------------------------------------------------------------- form controls */
.input, .textarea, .select select { border-color: var(--hub-border); }
.input:focus, .textarea:focus, .select select:focus, .is-focused.input, .is-focused.textarea, .select select.is-focused,
.input:active, .textarea:active, .select select:active, .is-active.input, .is-active.textarea, .select select.is-active {
  border-color: var(--hub-link); box-shadow: 0 0 0 .125em rgba(63, 97, 196, .25); }
.select:not(.is-multiple):not(.is-loading)::after { border-color: var(--hub-black); }
.checkbox input, .radio input, input[type="checkbox"], input[type="radio"] { accent-color: var(--hub-link); }

/* ---------------------------------------------------------------- status colours (toasts, messages); dark text keeps AA */
.notification.is-success, .button.is-success { background-color: var(--hub-success); color: var(--hub-black); }
.notification.is-danger, .button.is-danger { background-color: var(--hub-danger); color: var(--hub-black); }
.notification.is-warning, .button.is-warning { background-color: var(--hub-warning); color: var(--hub-black); }
.notification.is-info { background-color: var(--hub-blue-tint-strong); color: var(--hub-black); }
.notification.is-success.is-light { background-color: #effaf5; color: #257953; }
.notification.is-warning.is-light, .message.is-warning { background-color: var(--hub-yellow-tint-light); color: var(--hub-black); }
.message.is-warning .message-header { background-color: var(--hub-yellow); color: var(--hub-black); }
.message.is-warning .message-body { border-color: var(--hub-black); color: var(--hub-black); }
.message.is-info { background-color: var(--hub-blue-tint); }
.message.is-info .message-header { background-color: var(--hub-link); color: #fff; }
.message.is-info .message-body { border-color: var(--hub-link); color: var(--hub-black); }
.notification a:not(.button):not(.dropdown-item) { color: inherit; }

/* ---------------------------------------------------------------- page skeleton: flex column, footer last */
.mp-root { display: flex; flex-direction: column; min-height: 100vh; }
.mp-root > #mp-inner-contents { flex: 1 0 auto; display: flex; flex-direction: column; position: relative; }
#mp-inner-contents > div { flex: 1 0 auto; display: flex; flex-direction: column; }
#_pages_content { flex: 1 0 auto; display: flex; flex-direction: column; transition: opacity .2s; }
#_pages_content[data-dash-is-loading="true"] { opacity: .4; }
#_pages_content > .mp-page, #_pages_content > div { flex: 1 0 auto; }
.mp-page { display: flex; align-items: stretch; min-width: 0; }
.mp-page-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* content area: keeps the footer below the first screen */
.mp-app-content { position: relative; min-height: calc(100vh - 6.5rem); padding: 1.5rem; flex: 1 0 auto; }
/* legacy sticky-footer rules of the stock stylesheet are not used (the footer is taller than 100px) */
.mp-app-container { min-height: 0; margin: 0; }
.push { display: none; }

/* ---------------------------------------------------------------- navbar (BRAND §4): black, white text, yellow underline */
.navbar, .navbar.is-dark { background-color: var(--hub-black) !important; min-height: 3.5rem; z-index: 30; }
.navbar-menu { background-color: var(--hub-black); }
.navbar-brand { min-height: 3.5rem; }
.navbar-brand > .navbar-item { color: #fff; font-weight: 400; white-space: nowrap; }
.navbar-brand > .navbar-item img { margin-right: 8px; max-height: 1.75rem; }
/* brand lockup: [hub logo] UNSW | SPREE Materials Hub — "UNSW" is plain text in the navbar font, not an image */
.navbar-brand > .navbar-item.mp-hub-brand { display: flex; align-items: center; gap: 0; font-size: 1.0625rem;
  letter-spacing: .01em; padding-left: 1.25rem; }
/* the logo mark is the replica-made hub logo drawn as a decorative background (brandItem.icon "mp-hub-logo"), so the
   link's accessible name is its text: "UNSW" + "SPREE Materials Hub" */
.navbar-brand > .navbar-item.mp-hub-brand > .icon { order: -1; width: 2rem; height: 2rem; flex: 0 0 2rem; margin: 0 .75rem 0 0; }
.navbar-brand > .navbar-item.mp-hub-brand .mp-hub-logo { display: block; width: 2rem; height: 2rem; border-radius: 6px;
  background: url("/assets/images/hub-logo.svg") center / contain no-repeat; }
.navbar-brand > .navbar-item.mp-hub-brand::before { content: "UNSW"; font-weight: 700; letter-spacing: .04em;
  padding-right: .75rem; margin-right: .75rem; border-right: 1px solid rgba(255, 255, 255, .55); line-height: 1.25; }
.navbar .navbar-brand > a.navbar-item:hover, .navbar .navbar-brand > a.navbar-item:focus,
.navbar.is-dark .navbar-brand > a.navbar-item:hover, .navbar.is-dark .navbar-brand > a.navbar-item:focus {
  background: none; box-shadow: none; color: #fff !important; }
.navbar-end > .navbar-item, .navbar-end .navbar-link { font-size: 1rem; }
.navbar .navbar-item, .navbar .navbar-link { color: #fff; }
/* white text + yellow underline on hover/focus: the black desktop bar only (>= 1024px). The white mobile slide-in
   panel also sits inside nav#mp-navbar, so an unscoped rule would paint white-on-light text there. */
@media screen and (min-width: 1024px) {
  .navbar .navbar-item:not(.menu-label):hover, .navbar .navbar-item .navbar-link:hover,
  .navbar .navbar-item:not(.menu-label):focus-within {
    box-shadow: inset 0 -3px 0 0 var(--hub-yellow); color: #fff !important; }
}
.navbar .navbar-menu .navbar-end > .navbar-item.mp-nav-current { box-shadow: inset 0 -3px 0 0 var(--hub-yellow); }
.navbar .navbar-link:not(.is-arrowless)::after, .navbar.is-dark .navbar-end .navbar-link::after { border-color: #fff; }
.navbar .navbar-item.has-dropdown:hover .navbar-link::after { border-color: var(--hub-yellow); }
#login { display: flex; align-items: stretch; }
#login > a.navbar-item { padding-right: 1.5em; }
#login.is-logged-in { margin-right: 1.4rem; }
#login > .mp-user-menu > .navbar-link { padding-left: .65rem; padding-right: 2.25em; }
/* dropdowns: white panel, black text, blue-tint hover, grey menu labels */
.navbar .navbar-dropdown { border-top: 2px solid var(--hub-border); }
.navbar .navbar-dropdown .navbar-item { color: var(--hub-black); }
.navbar .navbar-dropdown a.navbar-item:hover, .navbar .navbar-dropdown a.navbar-item:focus {
  box-shadow: none; background: var(--hub-blue-tint) !important; color: var(--hub-black) !important; }
.navbar .navbar-dropdown .menu-label { color: var(--hub-grey); margin: .25rem 0 0; padding-top: .25rem; padding-bottom: .25rem; }
.navbar .navbar-dropdown .menu-label:hover { box-shadow: none; }
/* 2021-23 Apps dropdown (REPLICA_NAV_APPS_DROPDOWN=1): right-aligned, ~250px wide, wrapping items */
.navbar-item.mp-apps-dropdown .navbar-dropdown { width: 250px; }
.navbar-item.mp-apps-dropdown .navbar-dropdown .navbar-item { white-space: normal; }
.navbar-dropdown .navbar-divider { margin: .5rem 0; background-color: var(--hub-border); height: 1px; }
/* burger: mpc renders a <button>; make it look like Bulma's */
.navbar .navbar-burger { background: none; border: none; color: #fff; font-size: 1.25rem; cursor: pointer;
  display: none; align-items: center; justify-content: center; }
@media screen and (max-width: 1023px) {
  .navbar .navbar-burger { display: flex; margin-left: auto; }
  .navbar > .navbar-menu { display: none; }
  .navbar-brand > .navbar-item.mp-hub-brand { font-size: 1rem; padding-left: 1rem; }
}
@media screen and (max-width: 420px) {
  .navbar-brand > .navbar-item.mp-hub-brand::before { padding-right: .5rem; margin-right: .5rem; }
}
/* mobile slide-in panel: black brand bar like the navbar (same lockup: logo, UNSW | SPREE Materials Hub, white X),
   then readable dark text on white. mpc renders only the brand image/icon in the panel, so the label is ::after. */
.navbar-mobile { box-shadow: -2px 0 12px rgba(10, 10, 10, .2); }
.navbar-mobile .navbar-brand { background: var(--hub-black); }
.navbar-mobile .navbar-brand .navbar-burger { color: #fff; }
.navbar-mobile .navbar-brand > .navbar-item.mp-hub-brand { flex: 1 1 auto; min-width: 0; white-space: normal; color: #fff;
  padding-right: .5rem; }
@media screen and (max-width: 480px) {
  .navbar-mobile .navbar-brand > .navbar-item.mp-hub-brand { font-size: .875rem; }  /* panel is 75% of the viewport */
}
.navbar-mobile .navbar-brand > .navbar-item.mp-hub-brand::before { flex: 0 0 auto; color: #fff; border-right-color: rgba(255, 255, 255, .55); }
.navbar-mobile .navbar-brand > .navbar-item.mp-hub-brand::after { content: "SPREE Materials Hub"; flex: 0 1 auto; min-width: 0;
  color: #fff; line-height: 1.25; }
.navbar-mobile .navbar-item, .navbar-mobile .navbar-link { color: var(--hub-black); display: block; padding: .75rem 1.5rem; }
/* hover/focus in the white panel: black text on the blue tint, no underline (out-specifies every .navbar rule) */
.navbar .navbar-mobile .navbar-mobile-menu .navbar-item:not(.menu-label):hover,
.navbar .navbar-mobile .navbar-mobile-menu .navbar-item:not(.menu-label):focus,
.navbar .navbar-mobile .navbar-mobile-menu .navbar-item:not(.menu-label):focus-within {
  color: var(--hub-black) !important; background: var(--hub-blue-tint) !important; box-shadow: none; }
.navbar-mobile .menu-label { color: var(--hub-grey); }
.navbar-mobile .navbar-dropdown { display: block; padding-left: 1rem; box-shadow: none; border-top: none; position: static; }
.navbar-mobile .Collapsible__trigger { cursor: pointer; }
.navbar-mobile a.navbar-item:empty { display: none; }  /* dividers render as empty links on mobile */
.navbar .modal-background { z-index: 1; }
@media screen and (min-width: 1024px) {
  .navbar-mobile, .navbar .modal-background { display: none; }
}

/* ---------------------------------------------------------------- optional site banner (REPLICA_SHOW_BANNER=1) */
.mp-site-banner { background-color: var(--hub-yellow) !important; color: var(--hub-black); text-align: center;
  border-radius: 0; padding: .75rem 1.5rem; margin: 0 !important; }
.mp-site-banner a { color: var(--hub-black); text-decoration: underline; font-weight: 600; }
.mp-site-banner a:hover { color: var(--hub-black); opacity: .8; }
.mp-site-banner .content p, .mp-site-banner p { margin: 0; }

/* ---------------------------------------------------------------- header band (white, #C8C8C8 bottom border) */
.mp-app-header { background-color: #fff; border-bottom: 1px solid var(--hub-border); padding: 1.5rem; }
.mp-app-header .breadcrumb { margin-bottom: .5rem; font-weight: 600; }
.mp-app-header .breadcrumb li.is-active a { color: var(--hub-black); font-weight: 600; }
.mp-app-header .title { margin-bottom: 0; }
.mp-app-header .title:not(:last-child) { margin-bottom: 0; }
.mp-simple-header .title.is-2 { line-height: 1.125; }
.mp-app-title-row { margin-bottom: 0 !important; align-items: center; }
.mp-app-title-row .level-left { align-items: center; flex-shrink: 1; min-width: 0; }
.mp-app-title-row .level-right { margin-left: 1rem; }
.mp-app-titles { min-width: 0; }
.mp-app-title-row .title.is-3 { line-height: 1.125; }
.mp-app-author { font-size: .875rem; color: var(--hub-grey); line-height: 1.5; }
/* app icon circle: black circle, yellow glyph (yellow on #181716 is allowed) */
.mp-icon { background-color: var(--hub-black); color: var(--hub-yellow); }
.mp-icon.is-active { color: #fff; }
.mp-icon.is-large { width: 48px; height: 48px; flex: 0 0 48px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 1.5rem; margin-right: 1rem; }
.mp-app-header .mp-icon.is-large { box-shadow: none; }
.mp-icon.is-large > i::before { width: 1.2em; height: 1.2em; vertical-align: middle; }
.mp-icon > [class^="icon-"], .mp-icon > [class*=" icon-"] { top: 0; line-height: 1; display: inline-flex; }
.mp-app-buttons { margin-bottom: 0 !important; flex-wrap: nowrap; }
.mp-app-buttons .button { margin-bottom: 0; }
.mp-app-buttons .mpc-drawer-trigger { display: inline-block; }
.mp-app-buttons .mpc-drawer-trigger:not(:last-child) .button { margin-right: .5rem; }
.mp-app-buttons .button .icon { color: var(--hub-black); }
@media screen and (max-width: 768px) {
  .mp-app-title-row { flex-wrap: wrap; }
  .mp-app-title-row .level-right { margin-left: 0; margin-top: .75rem; }
  .mp-app-header .title.is-2 { font-size: 2rem; }
}

/* app cards of the stock stylesheet (navy top, teal glyph) -> black top, yellow glyph */
.app-card .app-card-top { background: var(--hub-black); color: #fff; }
.app-card .app-card-top i { color: var(--hub-yellow); }
.app-card:hover .app-card-top, .app-card:hover .app-card-bottom { background: #fff; color: var(--hub-black); }
.app-card:hover .app-card-top i { color: var(--hub-black); }

/* home hero of the stock stylesheet (.mp-home .main-section, was navy) -> black (BRAND §6) */
.mp-home .main-section { background-color: var(--hub-black) !important; color: #fff; }
.mp-home .main-section .title, .mp-home .main-section .subtitle { color: #fff; }
.mp-home .divided-section img { border-color: var(--hub-border); }

/* right-side drawers (References / Documentation) */
.mpc-drawer.mp-app-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(400px, 100vw);
  z-index: 60; overflow-y: auto; text-align: left; padding: 1.5rem; }
.mpc-drawer.mp-app-drawer:not(.is-active) { visibility: hidden; transition: transform .5s, visibility 0s .5s; }
.mpc-drawer.mp-app-drawer.is-active { visibility: visible; transition: transform .5s; }
.mp-app-drawer .title { padding-right: 2.5rem; }
.mp-reference-box { padding: 1rem; word-break: break-word; }
.mp-docs-attribution { border-top: 1px solid var(--hub-border); padding-top: .75rem; }

/* ---------------------------------------------------------------- grey search band (#EBEBEB) */
.mp-search-bar { background: var(--hub-band); padding: 1.5rem 1.5rem 1.75rem; border-bottom: 1px solid var(--hub-border); }
.mp-search-bar > .container { max-width: 960px; }
.mp-search-description { color: var(--hub-black); }
.panel-heading { background-color: var(--hub-band); color: var(--hub-black); }

/* ---------------------------------------------------------------- left icon sidebar (navy #1A1E2B) */
.mp-sidebar { flex: 0 0 var(--mp-sidebar-width); width: var(--mp-sidebar-width); background: var(--hub-navy);
  position: relative; z-index: 20; }
.mp-sidebar-inner { position: sticky; top: 0; padding: 1.5rem 0; }
.mp-sidebar-tip { display: block; }
.mp-sidebar-tip[data-tooltip]::before { z-index: 1000; font-size: .75rem; background: rgba(24, 23, 22, .92); }
.mp-sidebar-tip[data-tooltip]::after { z-index: 1000; }
.mp-sidebar-item { display: flex; align-items: center; justify-content: center; width: var(--mp-sidebar-width);
  height: 35px; color: #fff; transition: background-color .15s; }
.mp-sidebar-item:hover { color: #fff; background-color: rgba(255, 255, 255, .1); }
/* active app: darker cell, yellow glyph and a 4px yellow strip, both on the dark rail */
.mp-sidebar-item.is-active, .mp-sidebar-item.is-active:hover { background-color: var(--hub-black); color: var(--hub-yellow);
  box-shadow: inset 4px 0 0 var(--hub-yellow); }
.mp-sidebar-icon { font-size: 22px; line-height: 1; top: 0; display: inline-flex; }
.mp-sidebar-icon::before { vertical-align: middle; }
.mp-sidebar-icon.icon-fontastic-apps { font-size: 17px; }
.mp-sidebar-icon.icon-fontastic-reaction, .mp-sidebar-icon.icon-fontastic-interface { font-size: 21px; }
.mp-sidebar-sep { height: 35px; display: flex; align-items: center; justify-content: center; }
.mp-sidebar-divider { width: 10px; height: 1px; margin: 0; border: none; background-color: rgba(255, 255, 255, .45); }
@media screen and (max-width: 768px) {
  .mp-sidebar { display: none; }
}

/* ---------------------------------------------------------------- footer (BRAND §5): black, yellow headings, white links */
.mp-footer { background: var(--hub-black); color: #fff; padding: 4rem 1.5rem 2.5rem; height: auto; }
.mp-footer a { color: #fff; }
.mp-footer a:hover, .mp-footer a:focus { color: var(--hub-yellow); text-decoration: underline; }
.mp-footer .mp-footer-heading { color: var(--hub-yellow); font-family: var(--hub-font-heading); font-weight: 700;
  margin-bottom: .75rem; }
.mp-footer-links li { margin-bottom: .5rem; }
.mp-footer-lockup { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }
.mp-footer-logo { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 10px; }
.mp-footer-lockup-text { text-align: left; }
.mp-footer-lockup-unsw { font-family: var(--hub-font-heading); font-weight: 700; letter-spacing: .12em; font-size: 1.125rem;
  line-height: 1.2; color: #fff; }
.mp-footer-lockup-school { font-size: .875rem; line-height: 1.35; color: #fff; max-width: 17rem; margin-top: .25rem; }
.mp-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .2); margin-top: 2rem; padding-top: 1.25rem; }
.mp-footer-attribution, .mp-footer-version, .mp-footer-notice { font-size: .8125rem; color: rgba(255, 255, 255, .7);
  margin-bottom: .35rem; }
.mp-footer-attribution a, .mp-footer-version a { color: rgba(255, 255, 255, .85); text-decoration: underline; }
.mp-footer-attribution a:hover, .mp-footer-version a:hover { color: var(--hub-yellow); }
.mp-footer-db { font-weight: 600; color: #fff; }
.mp-footer-notice { margin-bottom: 0; }
.mp-no-ext-icon::after, a.mp-no-ext-icon[target="_blank"]::after { content: none !important; }
@media screen and (max-width: 1023px) {
  .mp-footer-lockup { justify-content: flex-start; margin-top: 1rem; }
}

/* ---------------------------------------------------------------- toasts (bottom-right) */
.mp-toast-container { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 1000; max-width: 400px;
  width: calc(100vw - 3rem); display: flex; flex-direction: column; align-items: stretch; gap: .75rem;
  pointer-events: none; }
.mp-toast-container:empty { display: none; }
.mp-toast-slot { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 1000; width: min(400px, calc(100vw - 3rem)); }
.mp-toast-container .mp-toast-slot { position: static; width: auto; }
.mp-toast { border-radius: 6px; padding: 1rem 2.5rem 1rem 1.25rem; margin-bottom: 0 !important; pointer-events: auto;
  box-shadow: 0 .5em 1em -.125em rgba(10, 10, 10, .25); animation: mp-toast-out .6s ease 8s forwards; }
.mp-toast > .delete { position: absolute; right: .5rem; top: .5rem; }
@keyframes mp-toast-out { to { opacity: 0; visibility: hidden; transform: translateY(8px); } }

/* ---------------------------------------------------------------- external links (G2)
   The stock stylesheet appends " \f35d" (↗) with the "Font Awesome 5 Free" family but at weight 400, where the
   glyph does not exist (it is in the 900/solid face) — render it with the solid face so the ↗ is visible. */
a[target="_blank"]::after { font-weight: 900; font-size: .7em; }

/* ---------------------------------------------------------------- MaterialsInput help menu (all pages) */
.mpc-materials-input .input-help-menu a.tag { color: var(--mp-link); }
.mpc-materials-input .input-help-menu a.tag:hover { color: var(--mp-link); text-decoration: underline; }

/* ---------------------------------------------------------------- Dash 4 dcc.Dropdown -> react-select look, hub accent
   #ccc border, #737373 placeholder (react-select #aaa fails AA), #333 value, #999 "×" and a 10x5 #999 ▼ caret, hub-link focus with a 3px halo,
   a menu glued under the control and plain option rows. Dash 4 injects its own CSS after ours, so the colours
   are set on the elements themselves. */
.dash-dropdown, .dash-dropdown-content {
  --Dash-Fill-Interactive-Strong: #3F61C4;
  --Dash-Fill-Interactive-Weak: rgba(63, 97, 196, .08);
  --Dash-Stroke-Strong: #ccc;
  --Dash-Text-Strong: #333;
  --Dash-Text-Weak: #666;
  --Dash-Text-Disabled: #aaa;
  --Dash-Fill-Disabled: #e6e6e6;
}
.dash-dropdown-wrapper .dash-dropdown { border: 1px solid #ccc; border-radius: 4px; color: #333; background-color: #fff; }
.dash-dropdown-wrapper .dash-dropdown:hover { box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.dash-dropdown-wrapper .dash-dropdown:focus:not([data-state="open"]),
.dash-dropdown-wrapper .dash-dropdown-focus-target:focus + .dash-dropdown:not([data-state="open"]) {
  border-color: #3F61C4; outline: none;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 0 3px rgba(63, 97, 196, .12);
}
.dash-dropdown-wrapper .dash-dropdown[data-state="open"] { border-color: #b3b3b3 #ccc #d9d9d9; outline: none; box-shadow: none; }
.dash-dropdown-wrapper:has(> [data-radix-popper-content-wrapper] > .dash-dropdown-content[data-side="bottom"]) > .dash-dropdown {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.dash-dropdown-wrapper .dash-dropdown:disabled { opacity: 1; background-color: #f9f9f9; cursor: default; }
.dash-dropdown-wrapper .dash-dropdown:disabled .dash-dropdown-trigger-icon { opacity: .35; }
.dash-dropdown-wrapper .dash-dropdown-trigger { min-height: 34px; padding: 0 10px; }
.dash-dropdown-wrapper .dash-dropdown-placeholder { color: #737373; }  /* react-select #aaa is 2.3:1: AA grey */
.dash-dropdown-wrapper .dash-dropdown-value:not(.dash-dropdown-placeholder) { color: #333; }
/* ▼ caret (react-select .Select-arrow: border-width 5px 5px 2.5px, #999); Dash 4 rotates it 180° when open */
.dash-dropdown-wrapper .dash-dropdown-trigger-icon {
  width: 10px; height: 5px; background-color: #999; clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.dash-dropdown-wrapper .dash-dropdown-trigger-icon > path { display: none; }
.dash-dropdown-wrapper .dash-dropdown-trigger > .dash-dropdown-clear { width: 11px; height: 11px; color: #999; }
.dash-dropdown-wrapper .dash-dropdown-trigger > .dash-dropdown-clear svg { width: 11px; height: 11px; }
.dash-dropdown-wrapper .dash-dropdown-trigger > .dash-dropdown-clear:hover { color: #d0021b; }
.dash-dropdown-wrapper .dash-dropdown-value-count { color: #333; background: rgba(63, 97, 196, .08); }
/* menu (react-select .Select-menu-outer) */
.dash-dropdown-wrapper .dash-dropdown-content {
  border: 1px solid #ccc; border-top-color: #e6e6e6; border-radius: 4px; color: #333;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}
.dash-dropdown-wrapper .dash-dropdown-content[data-side="bottom"] { margin-top: -6px; border-top-left-radius: 0; border-top-right-radius: 0; }
.dash-dropdown-wrapper .dash-dropdown-content[data-side="top"] { margin-bottom: -6px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.dash-dropdown-content .dash-dropdown-search-container { border-color: #ccc; }
.dash-dropdown-content .dash-dropdown-option { padding: 8px 10px; color: #666; background-color: #fff; box-shadow: none; }
.dash-dropdown-content .dash-dropdown-option.selected { background-color: var(--hub-blue-tint); color: #333; }
.dash-dropdown-content .dash-dropdown-option:not(:has(input[disabled])):hover,
.dash-dropdown-content .dash-dropdown-option:not(:has(input[disabled])):focus-within { background-color: var(--hub-blue-tint-strong); color: #333; }
.dash-dropdown-content .dash-dropdown-option:has(input[disabled]) { color: #ccc; }
.dash-dropdown-content .dash-dropdown-option:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
/* no checkbox/radio column in the menu (react-select lists plain rows); multi-select picks keep the accent */
.dash-dropdown-content .dash-dropdown-option .dash-options-list-option-wrapper { width: 0; overflow: hidden; }
.dash-dropdown-content .dash-dropdown-option.selected:has(input[type="checkbox"]) { color: #3F61C4; }

/* ---------------------------------------------------------------- Dash 4 dcc.Input -> Bulma inputs
   Dash 4 puts the className on div.dash-input-container and paints a purple (#7f4bc4) focus border + outline;
   the site's inputs are Bulma .input (#C8C8C8 border, #737373 hover, #3F61C4 focus border + .125em halo). */
div.dash-input-container { --Dash-Fill-Interactive-Strong: #3F61C4; }
div.dash-input-container:has(:focus-visible) { outline: none; }
div.dash-input-container.input { --Dash-Stroke-Strong: #C8C8C8; border-color: #C8C8C8; }
div.dash-input-container.input:hover { border-color: #737373; }
div.dash-input-container.input:focus-within { border-color: #3F61C4; box-shadow: 0 0 0 .125em rgba(63, 97, 196, .25); }
div.dash-input-container.input .dash-input-element::placeholder { color: var(--hub-grey); }

/* ---------------------------------------------------------------- placeholder text (WCAG AA 4.5:1)
   Bulma paints placeholders rgba(54,54,54,.3) and the Dash 4 rule above was #AEAEAE (about 2.3:1 on white).
   #737373 is 4.7:1 on white; disabled fields sit on #F5F5F5 / #F9F9F9, so they use the darker muted grey. */
.input::placeholder, .textarea::placeholder, .select select::placeholder { color: var(--hub-grey); }
.input[disabled]::placeholder, .textarea[disabled]::placeholder, .select select[disabled]::placeholder,
fieldset[disabled] .input::placeholder, fieldset[disabled] .textarea::placeholder,
div.dash-input-container.input .dash-input-element:disabled::placeholder { color: var(--hub-grey-on-bg); }

/* ---------------------------------------------------------------- shared helpers */
.mp-panel .panel-block { display: block; }
.mp-data-list td { vertical-align: middle; }
.mp-data-list .label { margin-bottom: 0; }
.mp-section-heading { scroll-margin-top: 1rem; }
.mp-section-info .icon { vertical-align: middle; }
.mp-error-detail { background: none; padding: 0; font-size: .8rem; white-space: pre-wrap; }
/* "To be added by SPREE" placeholder box (BRAND §6): grey dashed */
.mp-placeholder { border: 2px dashed var(--hub-border); border-radius: 6px; background: var(--hub-bg-light);
  color: var(--hub-grey); padding: 1.25rem 1.5rem; text-align: center; }
.mp-placeholder strong { color: var(--hub-grey); }

/* login page and login gate (BRAND §6: demo login, no credential fields) */
.mp-login-wrap { display: flex; justify-content: center; padding: 1rem 0 3rem; }
.mp-login-box { width: 100%; max-width: 440px; padding: 2rem; }
.mp-login-provider { justify-content: flex-start; margin-bottom: .75rem; height: auto; min-height: 2.5em;
  white-space: normal; text-align: left; }
@media screen and (max-width: 480px) {
  .mp-login-box { padding: 1.5rem 1rem; }
  .mp-login-provider { font-size: .9375rem; }
}
.mp-login-provider .icon:first-child:not(:last-child) { margin-left: 0; margin-right: .75rem; }
.mp-login-provider:not(.is-primary) .icon { color: var(--hub-black); }
.mp-login-unsw .icon { color: var(--hub-black); }
.mp-login-demo-note { color: var(--hub-black); font-size: .875rem; font-weight: 600; text-align: center; margin-top: 1.25rem; }
.mp-login-gate { display: flex; justify-content: center; padding: 3rem 0; }
.mp-login-gate-box { width: 100%; max-width: 420px; padding: 2rem; }

/* 404 */
.mp-not-found { padding: .5rem 0 2rem; }