/* MultiTaction documentation theme, 2026. Tokens come from _static/brand/tokens/tokens.css.
   Source of truth is css/mt-theme.css; the four _static copies (apps, developer, hardware, brand) must be
   identical (CI checks). */
@import url("brand/tokens/tokens.css");

@font-face { font-family: "Archivo"; src: url("brand/fonts/web/Archivo-variable.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("brand/fonts/web/JetBrainsMono-variable.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

/* 1. Material palette mapping: both schemes read the role tokens, which tokens.css already switches on
      [data-md-color-scheme="default"|"slate"]. */
[data-md-color-scheme="default"], [data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--mt-surface);
  --md-default-fg-color: var(--mt-text);
  --md-default-fg-color--light: var(--mt-text-muted);
  --md-default-fg-color--lighter: var(--mt-ink-500);
  --md-default-fg-color--lightest: var(--mt-border);
  --md-primary-fg-color: var(--mt-ink-950);          /* header and tabs are Ink in both schemes */
  --md-primary-bg-color: var(--mt-ink-50);
  --md-primary-bg-color--light: var(--mt-ink-200);
  --md-accent-fg-color: var(--mt-accent-text);
  --md-accent-fg-color--transparent: color-mix(in srgb, var(--mt-accent) 12%, transparent);
  --md-typeset-a-color: var(--mt-accent-text);
  --md-typeset-color: var(--mt-text);
  --md-code-bg-color: var(--mt-surface-raised);
  --md-code-fg-color: var(--mt-text-strong);
  --md-footer-bg-color: var(--mt-surface-deep);
  --md-footer-bg-color--dark: var(--mt-surface-deep);
  --md-footer-fg-color: var(--mt-text);
  --md-footer-fg-color--light: var(--mt-text-muted);
  --md-admonition-fg-color: var(--mt-text);
  --md-typeset-table-color: var(--mt-border);
  --md-text-font: var(--mt-font-sans);
  --md-code-font: var(--mt-font-mono);
}

/* 2. Typography. Material sets html { font-size: 125% } (20px), so rem values below are relative to 20px. */
body, input, button {
  font-family: var(--mt-font-sans);
}
/* Body 17px = .85rem */
.md-typeset {
  font-size: .85rem;
  line-height: var(--mt-font-line-height-body);
  font-stretch: var(--mt-font-width-body);
  font-weight: var(--mt-font-weight-body);
}
.md-typeset h1, .md-typeset h2, .md-typeset h3,
.md-typeset h4, .md-typeset h5, .md-typeset h6 {
  color: var(--mt-heading);
  font-family: var(--mt-font-sans);
  font-weight: var(--mt-font-weight-heading);
  line-height: var(--mt-font-line-height-heading);
  text-wrap: balance;
}
/* h1 36px = 1.8rem */
.md-typeset h1 { font-size: 1.8rem; font-weight: var(--mt-font-weight-display); font-stretch: var(--mt-font-width-display); }
/* h2 28px = 1.4rem */
.md-typeset h2 { font-size: 1.4rem; }
/* h3 22px = 1.1rem */
.md-typeset h3 { font-size: 1.1rem; }
.md-typeset table, .md-typeset code, .md-typeset kbd, .md-typeset pre {
  font-variant-numeric: tabular-nums;
}

/* 3. Header and tabs: Ink in both schemes, white horizontal lockup as the logo. */
.md-header, .md-tabs {
  background-color: var(--mt-ink-950);
  /* The bar is always dark, so its divider is a dark-ramp step, not the scheme's border role. */
  border-bottom: 1px solid var(--mt-ink-800);
  box-shadow: none;
}
/* Focus on the always-dark bar uses the on-dark magenta (5.85:1 on ink-950 in both schemes). */
.md-header :focus-visible, .md-tabs :focus-visible {
  outline: 2px solid var(--mt-brand-magenta-on-dark);
  outline-offset: 2px;
}
.md-header__button.md-logo img, .md-header__button.md-logo svg {
  height: 1.5rem;
  width: auto;
}
/* The lockup carries the site name. */
.md-header__topic { display: none; }
/* Material hides the logo below 60em; keep the lockup so the phone header still names the site. */
@media screen and (max-width: 59.984375em) {
  .md-header__button.md-logo { display: block; padding: 0; }
  /* The topic text is hidden, so its margins would only push the toggle and search off a 400px screen. */
  [dir=ltr] .md-header__title, [dir=rtl] .md-header__title { margin: 0; }
  .md-header__button.md-logo img, .md-header__button.md-logo svg { height: 1.2rem; width: auto; }
}
/* Tab links 14px = .7rem */
.md-tabs__link {
  font-size: .7rem;
  font-weight: var(--mt-font-weight-ui-strong);
  font-stretch: var(--mt-font-width-ui);
  opacity: 1;
}
/* The header is Ink in both schemes, so its accent uses the on-dark magenta, not the scheme's accent-text. */
.md-tabs__link--active, .md-tabs__item--active .md-tabs__link {
  color: var(--mt-brand-magenta-on-dark);
  box-shadow: inset 0 -2px 0 var(--mt-accent);
}

/* 4. Navigation. Nav links 14px = .7rem */
.md-nav__link {
  font-size: .7rem;
  font-weight: var(--mt-font-weight-eyebrow);
}
.md-nav__link:hover { color: var(--mt-text-strong); }
.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--mt-accent-text);
  font-weight: var(--mt-font-weight-ui-strong);
}
.md-nav--secondary .md-nav__link--active { color: var(--mt-accent-text); }
.md-nav--secondary .md-nav__link--active::before { background-color: var(--mt-accent); }
.md-nav--secondary > .md-nav__title { display: none; }
/* Sidebars sit on the page surface; a 1 px divider separates them, no filled panel (spec 7.6). */
.md-sidebar--primary .md-sidebar__scrollwrap {
  background-color: transparent;
  border-right: 1px solid var(--mt-border);
}
.md-sidebar--secondary .md-sidebar__scrollwrap {
  background-color: transparent;
  border-left: 1px solid var(--mt-border);
}

/* 5. Content blocks. Notes sit on the purple tint (spec 3.1: purple and dark blue are the tints on
      dark); table heads take dark blue. Both roles exist in the light set too, so the schemes match. */
.md-typeset .admonition, .md-typeset details, .md-typeset pre > code, .md-typeset .highlight {
  border-radius: var(--mt-radius-card);
  box-shadow: none;
}
.md-typeset .admonition, .md-typeset details {
  background-color: color-mix(in srgb, var(--mt-tint) 14%, var(--mt-surface));
}
.md-typeset table:not([class]) th {
  background-color: var(--mt-tint-2);
  color: var(--mt-ink-50);
  font-weight: var(--mt-font-weight-ui-strong);
}
.md-typeset table:not([class]) { border-color: var(--mt-border); }
.md-typeset table:not([class]) td { border-top-color: var(--mt-border); }
/* Links in running text are underlined, so they do not rely on colour alone (WCAG 1.4.1).
   Anchors styled as controls (cards, buttons, download cards, the brand portal's family tiles) are not. */
.md-typeset a { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
.md-typeset a:is(.product-card, .md-button, .headerlink, .mt-card, .mt-download),
.md-typeset a:is(.product-card, .md-button, .headerlink, .mt-card, .mt-download):hover,
.md-typeset .mt-family a, .md-typeset .mt-family a:hover { text-decoration: none; }
:focus-visible {
  outline: 2px solid var(--mt-focus);
  outline-offset: 2px;
}

/* 6. Product cards. Ghost <p> tags from md_in_html between cards stay hidden. */
.product-grid > p { display: none; }
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--mt-space-6);
  margin: var(--mt-space-6) 0;
}
/* Cards are raised panels (ink-800 on dark, ink-100 on light) with a 1 px border; the title is strong
   text, the eyebrow carries the accent, the description is body text. Hover warms the panel with the tint. */
.product-card {
  display: block;
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius-card);
  padding: var(--mt-space-6);
  background-color: var(--mt-surface-raised);
  color: inherit;
  text-decoration: none;
  box-shadow: none;
  transition: border-color .2s, background-color .2s;
}
.product-card:hover {
  border-color: var(--mt-accent);
  background-color: color-mix(in srgb, var(--mt-tint) 14%, var(--mt-surface-raised));
  color: inherit;
  text-decoration: none;
  box-shadow: none;
}
.product-card h3 {
  margin: 0 0 var(--mt-space-2) 0;
  color: var(--mt-text-strong);
}
.product-card p {
  margin: 0;
  color: var(--mt-text);
  font-size: .85rem;
  line-height: var(--mt-font-line-height-body);
}

/* Wide table utility */
.wide-table { width: 100%; }

/* 7. Eyebrow label. Caption 12.8px = .64rem */
.mt-eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--mt-font-tracking-label);
  font-size: .64rem;
  font-weight: var(--mt-font-weight-ui-strong);
  color: var(--mt-accent-text);
}

/* 7b. Home pages carry one blade group in the top-right corner of the page (spec 3.3: corners only,
       one corner on a content page, never behind running text). overrides/main.html sets the class. */
.mt-home .md-main { position: relative; }
.mt-home .md-main::before {
  content: ""; position: absolute; top: 0; right: 0; z-index: 0; pointer-events: none;
  width: clamp(160px, 24vw, 420px); height: var(--mt-space-12);
  background: linear-gradient(330deg, var(--mt-brand-blue), var(--mt-brand-dark-blue));
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
  opacity: .85;
}
.mt-home .md-main__inner { position: relative; z-index: 1; }

/* 8. Cross-site header navigation */
.mt-site-nav {
  display: flex;
  align-items: center;
  gap: var(--mt-space-2);
  padding: 0 var(--mt-space-4);
  white-space: nowrap;
}
/* The cross-site nav sits in the Ink header in both schemes, so it reads the Ink ramp. */
.mt-site-nav__link {
  color: var(--mt-ink-300);
  text-decoration: none;
  font-size: .7rem;
  font-weight: var(--mt-font-weight-ui-strong);
  padding: var(--mt-space-1) var(--mt-space-2);
  transition: color .15s;
}
.mt-site-nav__link:hover {
  color: var(--mt-ink-50);
  text-decoration: none;
}
.mt-site-nav__link--active {
  color: var(--mt-brand-magenta-on-dark);
  box-shadow: inset 0 -2px 0 var(--mt-accent);
}
.mt-site-nav__sep {
  color: var(--mt-ink-600);
  font-size: .64rem;
  user-select: none;
}
@media screen and (max-width: 600px) {
  .mt-site-nav { display: none; }
}

/* 9. Footer */
.md-footer { border-top: 1px solid var(--mt-border); }
.md-footer-meta { background-color: var(--mt-surface-deep); }
.md-footer-meta__inner {
  display: flex;
  justify-content: center;
  padding: var(--mt-space-3);
}
.md-footer-meta .md-copyright { display: none; }

/* 10. Responsive navigation, unchanged from the previous stylesheet; stays last. */
/* ════════════════════════════════════════════════════════════════════
   Responsive navigation — keep the left nav usable at more widths.

   Material collapses the LEFT nav into an off-canvas drawer below 1220px
   but keeps the RIGHT TOC until 960px, leaving the nav (the primary way
   through deep manuals) behind a non-obvious hamburger on common laptop
   widths. We extend Material's desktop nav layout down to 960px and hide
   the TOC there; below 960px we fall back to the drawer but label the
   toggle "Menu" so it is an obvious control.

   Breakpoints mirror Material's own (76.234375em ≈ 1220px, 60em = 960px).
   This re-emits Material's ≥1220px nav rules at ≥960px. Material is
   version-pinned in CI (9.5.18) — re-verify on any theme upgrade.
   ════════════════════════════════════════════════════════════════════ */
@media screen and (min-width: 60em) and (max-width: 76.234375em) {
  /* nav is visible, so the hamburger is not needed */
  .md-header__button[for="__drawer"] { display: none; }

  /* primary sidebar: restore the sticky desktop container (undo drawer) */
  .md-sidebar--primary {
    position: sticky;
    top: 2.4rem;
    left: auto;
    right: auto;
    height: 0;
    width: 12.1rem;
    margin: 0;
    padding: 1.2rem 0;
    background-color: transparent;
    transform: none;
    transition: none;
    box-shadow: none;
    z-index: auto;
  }
  .md-sidebar--primary .md-sidebar__scrollwrap {
    position: static;
    inset: auto;
    margin: 0 .2rem;
    overflow-y: auto;
    scroll-snap-type: none;
  }
  /* give the content room for the sidebar (matches Material's ≥1220px rule) */
  [dir=ltr] .md-sidebar--primary:not([hidden]) ~ .md-content > .md-content__inner { margin-left: 1.2rem; }
  [dir=rtl] .md-sidebar--primary:not([hidden]) ~ .md-content > .md-content__inner { margin-right: 1.2rem; }

  /* nav: undo the mobile drawer rendering */
  .md-nav--primary,
  .md-nav--primary .md-nav {
    background-color: transparent;
    position: static;
    height: auto;
    transform: none;
  }
  .md-nav { margin-bottom: -.4rem; }
  .md-nav--primary > .md-nav__title { display: none; }   /* drawer header/back-button */
  [dir=ltr] .md-nav--primary .md-nav__list { padding-left: .6rem; }
  [dir=rtl] .md-nav--primary .md-nav__list { padding-right: .6rem; }
  .md-nav--primary .md-nav__list { padding-bottom: .4rem; flex: none; }
  .md-nav--primary .md-nav__item { border-top: 0; }
  [dir=ltr] .md-nav--primary .md-nav__item > .md-nav__link { margin-right: .4rem; }
  [dir=rtl] .md-nav--primary .md-nav__item > .md-nav__link { margin-left: .4rem; }
  .md-nav--primary .md-nav__title .md-nav__icon { display: none; }

  /* desktop accordion for nested items (grid-rows reveal, not slide) */
  .md-nav__toggle ~ .md-nav {
    display: grid;
    grid-template-rows: minmax(.4rem, 0fr);
    opacity: 0;
    transform: none;
    visibility: collapse;
    transition: grid-template-rows .25s cubic-bezier(.86,0,.07,1), opacity .25s, visibility 0ms .25s;
  }
  .md-nav__toggle ~ .md-nav > .md-nav__list { overflow: hidden; }
  .md-nav__toggle.md-toggle--indeterminate ~ .md-nav,
  .md-nav__toggle:checked ~ .md-nav {
    grid-template-rows: minmax(.4rem, 1fr);
    opacity: 1;
    visibility: visible;
    transition: grid-template-rows .25s cubic-bezier(.86,0,.07,1), opacity .15s .1s, visibility 0ms;
  }
  .md-nav__item--nested .md-nav__toggle:checked ~ .md-nav__link .md-nav__icon:after,
  .md-nav__item--nested .md-toggle--indeterminate ~ .md-nav__link .md-nav__icon:after { transform: rotate(90deg); }

  /* sections + lifted nav (navigation.tabs renders the in-section nav lifted) */
  .md-nav__item--nested > .md-nav > .md-nav__title { display: none; }
  .md-nav__item--section { display: block; margin: 1.25em 0; }
  .md-nav__item--section > .md-nav__link { font-weight: 700; }
  .md-nav__item--section > .md-nav { display: block; opacity: 1; visibility: visible; }
  .md-nav--lifted > .md-nav__list > .md-nav__item { display: none; }
  .md-nav--lifted > .md-nav__list > .md-nav__item--active { display: block; }
  [dir=ltr] .md-nav--lifted > .md-nav__list > .md-nav__item > .md-nav:not(.md-nav--secondary) { margin-left: -.6rem; }
  [dir=rtl] .md-nav--lifted > .md-nav__list > .md-nav__item > .md-nav:not(.md-nav--secondary) { margin-right: -.6rem; }

  /* right TOC collapses first */
  .md-sidebar--secondary { display: none !important; }
}

/* Below 1220px the right TOC sidebar is gone (Material kept it to 960px). */
@media screen and (max-width: 76.234375em) {
  .md-sidebar--secondary { display: none !important; }
  .md-sidebar--secondary:not([hidden]) ~ .md-content > .md-content__inner { margin-right: 0; }
}

/* Below 960px: nav returns to the drawer — make the toggle an obvious "Menu". */
@media screen and (max-width: 59.9375em) {
  .md-header__button[for="__drawer"]::after {
    content: "Menu";
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .03em;
    vertical-align: middle;
    margin-left: .15rem;
  }
  .md-header__button[for="__drawer"] { width: auto; padding: 0 .2rem; }
}