/* site-header.css — complete, self-contained styling for the shared site
   shell (header + footer) injected by js/site-header.js into
   <div id="site-header"> / <div id="site-footer"> on every surface: the
   SPA (index.html), the tutorials MkDocs subsite, and the VS Code
   webview.

   Must render IDENTICALLY on all three, with or without Tailwind present
   — this stylesheet is Tailwind-free and token-driven (see
   js/site-tokens.css, loaded before this file) on purpose. It is
   vendored byte-for-byte into the tutorials build by
   scripts/build-tutorials.mjs, the same way js/site-header.js already
   is. Do not reintroduce a Tailwind/utility-class dependency here — that
   was the entire point of this file existing.

   Class scheme: semantic, `mtlx-`-prefixed classes, one per component
   piece (see js/site-header.js, which builds the markup using exactly
   these class names). A small mini-reset (scoped to #site-header /
   #site-footer via zero-specificity :where()) stands in for the parts of
   Tailwind's preflight the markup used to depend on, so real component
   classes below always win regardless of source order. */

:where(#site-header, #site-header *, #site-footer, #site-footer *) {
    box-sizing: border-box;
    margin: 0;
    border: 0 solid var(--site-gray-200);
}

:where(#site-header, #site-footer) :where(button) {
    font: inherit;
    color: inherit;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

:where(#site-header, #site-footer) :where(svg, img) {
    display: block;
    vertical-align: middle;
}

/* Link reset: no underline, inherit color. The footer's inline text link
   (.mtlx-footer-link below) opts back into an underline via its own real
   class, which — thanks to :where() contributing zero specificity here —
   wins outright. */
:where(#site-header, #site-footer) :where(a) {
    color: inherit;
    text-decoration: none;
}

/* Base typography: matches the SPA's own body font/smoothing so the
   header/footer render identically inside mkdocs (which sets its own
   body font-size/smoothing) and inside the VS Code webview. */
.mtlx-header,
.mtlx-footer {
    font-family: var(--site-font-sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}

/* ---- Header ------------------------------------------------------- */

.mtlx-header {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid var(--site-gray-800);
    background-color: rgba(17, 24, 39, 0.95); /* gray-900/95 */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.mtlx-header-bar {
    max-width: var(--site-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
    height: var(--site-header-height);
    display: flex;
    align-items: stretch;
    gap: 8px;
}
@media (min-width: 640px) {
    .mtlx-header-bar {
        padding-left: 24px;
        padding-right: 24px;
        gap: 20px;
    }
}

/* Brand: logo mark + site title. Color lives on the outer element
   (anchor in the SPA/tutorials, a plain span under VS Code — same class
   either way) and cascades to the icon/title via normal CSS
   inheritance; each child declares its own `transition` so the
   inherited color change still animates (replaces Tailwind's
   group/group-hover pattern). */
.mtlx-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    color: var(--site-blue-400);
}
.mtlx-brand:hover {
    color: var(--site-blue-300);
}
.mtlx-brand-icon {
    width: 24px;
    height: 24px;
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.mtlx-brand-title {
    font-weight: 700;
    white-space: nowrap;
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Desktop page tabs + right-side links: hidden below 768px (the
   hamburger + mobile panel cover narrow widths instead). js's measure()
   can also force these to an inline style.display at >=768px (labels
   that don't actually fit alongside the right-side links) — plain
   (non-!important) rules here are required so that inline override
   keeps working untouched. */
.mtlx-nav-desktop {
    display: none;
    align-items: stretch;
}
@media (min-width: 768px) {
    .mtlx-nav-desktop {
        display: flex;
    }
}

.mtlx-tab {
    display: flex;
    align-items: center;
    padding-left: 12px;
    padding-right: 12px;
    border-bottom: 2px solid transparent;
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--site-gray-400);
}
@media (min-width: 640px) {
    .mtlx-tab {
        padding-left: 16px;
        padding-right: 16px;
    }
}
.mtlx-tab:hover {
    color: var(--site-gray-200);
    border-bottom-color: var(--site-gray-600);
}
.mtlx-tab.is-active {
    border-bottom-color: var(--site-blue-500);
    color: var(--site-blue-300);
}

/* align-items: stretch (not center) so the version pill below always
   stretches to match the GitHub widget's height — 30px before its facts
   row loads, 42px after — with no hardcoded height on either side.
   align-self: center is required alongside it: .mtlx-header-bar is itself
   `align-items: stretch`, so without this the whole cluster would stretch
   to fill the 56px bar and its children would fill it edge-to-edge with
   no gap. align-self makes .mtlx-nav-right hug its tallest child (the
   GitHub widget) and center that within the bar, while align-items:
   stretch still grows the version pill to match. */
.mtlx-nav-right {
    display: none;
    margin-left: auto;
    align-items: stretch;
    align-self: center;
    gap: 6px;
    white-space: nowrap;
}
@media (min-width: 640px) {
    .mtlx-nav-right {
        gap: 8px;
    }
}
@media (min-width: 768px) {
    .mtlx-nav-right {
        display: flex;
    }
}

/* Pills: version / source / feedback links in the right-side cluster
   (and their identical mobile-panel counterparts use .mtlx-mobile-link
   instead, see below). inline-flex + align-items:center (not
   inline-block) so the text stays vertically centered once
   .mtlx-nav-right's align-items:stretch above grows this pill taller
   than its own content. */
.mtlx-badge {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    line-height: 16px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--site-gray-600);
    background-color: var(--site-gray-800);
    color: var(--site-gray-200);
    white-space: nowrap;
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.mtlx-badge:hover {
    background-color: var(--site-gray-700);
}
/* Version pill: text-gray-300 (not the badge default gray-200) and
   hidden below 640px. Targeted by id (already unique — js/site-header.js
   uses it as a version-badge mount point) rather than a one-off class. */
#mtlx-header-version {
    display: none;
    color: var(--site-gray-300);
    /* The logo and the "MaterialX <ver>" text are separate flex items in
       this inline-flex row (below); column-gap spaces the logo from the
       text. The text itself is a single flex item (js/site-header.js
       wraps "MaterialX " + the version <span> in one <span>), so its own
       natural trailing space renders normally instead of being collapsed
       and double-spaced by this gap. 4px ≈ a space at this 12px font. */
    column-gap: 4px;
}
@media (min-width: 640px) {
    #mtlx-header-version {
        display: inline-flex;
    }
}
/* Official MaterialX wordmark, matched to the GitHub octocat's 20px width
   (.mtlx-source-icon) so the two pills' icons read as the same size —
   the source SVG is wider than tall (~1.72:1), so height auto renders it
   at roughly 12px tall. It's just another flex item in
   #mtlx-header-version's inline-flex row, so the pill's own
   column-gap: 4px above already spaces it from the "MaterialX" text —
   no extra margin needed. */
.mtlx-badge-logo {
    width: 20px;
    height: auto;
}

/* GitHub repo widget (mkdocs-material style): octocat + repo slug, with
   an async facts row (latest release / stars / forks) filled in by
   js/site-header.js's initSourceFacts(). Replaces the old separate
   "Source" and issues-link pills — their now-unused icon/label/pill
   modifier classes were removed above. */
.mtlx-source {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid var(--site-gray-600);
    background-color: var(--site-gray-800);
    white-space: nowrap;
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.mtlx-source:hover {
    background-color: var(--site-gray-700);
}
.mtlx-source-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--site-gray-200);
}
.mtlx-source-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mtlx-source-repo {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--site-gray-200);
    white-space: nowrap;
}
.mtlx-source-facts {
    display: flex;
    gap: 8px;
    font-size: 11px;
    line-height: 14px;
    color: var(--site-gray-400);
    white-space: nowrap;
}
.mtlx-source-facts:empty {
    display: none;
}
.mtlx-source-fact {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.mtlx-source-fact svg {
    width: 12px;
    height: 12px;
}

/* Hamburger: mobile only (measure() can also force this to an inline
   style.display, same contract as the desktop nav/right cluster above). */
.mtlx-nav-toggle {
    display: flex;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    align-self: center;
    border-radius: 8px;
    border: 1px solid var(--site-gray-600);
    background-color: var(--site-gray-800);
    color: var(--site-gray-200);
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.mtlx-nav-toggle:hover {
    background-color: var(--site-gray-700);
}
.mtlx-nav-toggle svg {
    width: 24px;
    height: 24px;
}
@media (min-width: 768px) {
    .mtlx-nav-toggle {
        display: none;
    }
}

/* Mobile dropdown panel: closed (display:none) by default and always at
   >=768px; open state is `.is-open`, added/removed by site-header.js
   alongside an inline style.display it sets on every toggle (open =
   'block', close = 'none') so the measured-collapse case — where the
   hamburger (and this panel) can be forced usable even at >=768px — keeps
   working: inline style always wins over both rules below. */
.mtlx-mobile-menu {
    display: none;
    border-top: 1px solid var(--site-gray-800);
    background-color: rgba(17, 24, 39, 0.95); /* gray-900/95 */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.mtlx-mobile-menu.is-open {
    display: block;
}
@media (min-width: 768px) {
    .mtlx-mobile-menu.is-open {
        display: none;
    }
}

.mtlx-mobile-nav {
    display: flex;
    flex-direction: column;
    padding-top: 4px;
    padding-bottom: 4px;
}

.mtlx-tab-mobile {
    display: flex;
    align-items: center;
    gap: 10px; /* matches .mtlx-source-mobile's icon-to-text gap below */
    padding: 12px 16px;
    border-left: 4px solid transparent;
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--site-gray-400);
}
/* Nav icon: sized like .mtlx-source-fact's icons below (descendant
   selector, no class on the <svg> itself — the icon markup is shared
   verbatim with js/mtlx-engine.js's MTLX_ICON_PATHS, unclassed). 18px
   (not the 20px octocat/wordmark rows use) keeps these glyphs visually
   lighter than the GitHub/version rows, matching the home page cards'
   own icon weight. currentColor (baked into the icon markup itself)
   means color/active state below is the only thing that needs to change
   for the icon to follow — no separate rule here. */
.mtlx-tab-mobile svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.mtlx-tab-mobile:hover {
    color: var(--site-gray-200);
    background-color: rgba(31, 41, 55, 0.4); /* gray-800/40 */
}
.mtlx-tab-mobile.is-active {
    border-left-color: var(--site-blue-500);
    color: var(--site-blue-300);
    background-color: rgba(31, 41, 55, 0.6); /* gray-800/60 */
}

.mtlx-mobile-links {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--site-gray-800);
    padding-top: 4px;
    padding-bottom: 4px;
}

.mtlx-mobile-link {
    display: block;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 20px;
    color: var(--site-gray-200);
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.mtlx-mobile-link:hover {
    background-color: rgba(31, 41, 55, 0.4); /* gray-800/40 */
}
/* Mobile version link: text-gray-300 (not the default gray-200), same
   reasoning as #mtlx-header-version above. */
#mtlx-header-version-mobile {
    color: var(--site-gray-300);
}
/* Turns the version row from a plain block link into an icon+text row,
   aligned the same way as .mtlx-source-mobile below (left-aligned icon
   column, vertically centered) — kept as its own class rather than
   reusing .mtlx-source-mobile since that one's gap is tuned for a square
   octocat glyph, not this wider-than-tall wordmark. */
.mtlx-mobile-link-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Matched to the GitHub octocat's 20px width (.mtlx-source-icon) so the two
   mobile rows' icon columns line up. The source SVG is wider than tall
   (~1.72:1), so height auto renders it at roughly 12px tall. */
.mtlx-badge-logo-mobile {
    width: 20px;
    height: auto;
}

/* Mobile GitHub row: a flat copy of the desktop .mtlx-source widget
   (octocat + repo slug + facts), but with no pill styling of its own —
   .mtlx-mobile-link above already supplies the flat row (padding, text
   size, hover bg); this only adds the icon+meta layout, reusing
   .mtlx-source-icon/.mtlx-source-meta/.mtlx-source-facts as-is. */
.mtlx-source-mobile {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mtlx-source-repo-mobile {
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
}

/* ---- Footer --------------------------------------------------------- */

.mtlx-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--site-gray-800);
    background-color: var(--site-gray-900);
}

/* Slim toggle strip: a full-width native <button> (the :where() reset at
   the top of this file supplies font/cursor); its own inner span is
   width-capped/centered like every other row so it lines up with the
   header/footer content above and below it. */
.mtlx-footer-toggle {
    display: block;
    width: 100%;
    text-align: left;
}
.mtlx-footer-toggle-inner {
    max-width: var(--site-max-width);
    margin-left: auto;
    margin-right: auto;
    padding: 4px 12px; /* 28px strip */
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
    color: var(--site-gray-400);
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.mtlx-footer-toggle:hover .mtlx-footer-toggle-inner {
    color: var(--site-gray-200);
}
@media (min-width: 640px) {
    .mtlx-footer-toggle-inner {
        padding: 4px 24px;
    }
}
.mtlx-footer-chevron {
    width: 16px;
    height: 16px;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.mtlx-footer.is-collapsed .mtlx-footer-chevron {
    transform: rotate(180deg);
}
/* Collapse is instant (display:none), deliberately NOT height-animated:
   animating would resize #root every frame and thrash the graph/viewer
   ResizeObservers + WebGL buffers. Only the chevron rotation above
   animates. */
.mtlx-footer.is-collapsed .mtlx-footer-inner {
    display: none;
}

.mtlx-footer-inner {
    max-width: var(--site-max-width);
    margin-left: auto;
    margin-right: auto;
    padding: 0 12px 12px; /* top spacing already supplied by the toggle strip */
    font-size: 13px;
    line-height: 18px;
    color: var(--site-gray-400);
}
@media (min-width: 640px) {
    .mtlx-footer-inner {
        padding: 0 24px 12px;
    }
}
/* Two stacked paragraphs (Experimental Preview, then affiliation) inside
   the same collapsible body — the :where() reset zeroes out <p> margins,
   so space them by hand. */
.mtlx-footer-inner p {
    margin: 0;
}
.mtlx-footer-inner p + p {
    margin-top: 6px;
}

.mtlx-footer-link {
    text-decoration: underline;
    color: var(--site-gray-200);
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.mtlx-footer-link:hover {
    color: var(--site-gray-100);
}

/* Experimental Preview paragraph, moved here from the docs page's own
   bottom-of-page banner so it shows on every route (see js/site-header.js
   footerHtml). Amber accent + alert-triangle icon kept from the original
   banner; text sized down to match the rest of the footer body. */
.mtlx-footer-experimental {
    color: var(--site-amber-300);
    opacity: 0.9;
}
.mtlx-footer-experimental strong {
    font-weight: 600;
    opacity: 1;
}
/* The :where() reset above sets svg{display:block} — this icon sits
   inline with the paragraph's text, so override that explicitly. */
.mtlx-footer-warn-icon {
    display: inline;
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    margin-right: 4px;
}
.mtlx-footer-link-amber {
    text-decoration: underline;
    color: var(--site-amber-200);
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.mtlx-footer-link-amber:hover {
    color: var(--site-amber-100);
}