/* Material for MkDocs, themed once from the AlisX design system.
 *
 * Material is a component library with its own theme: CSS custom properties
 * (--md-*) and its own type and component rules. The system's rule for a
 * library is to set its theme from the tokens once, app-wide (rules/styling.md),
 * and this file is that theme. Every colour is a role from alisx.css, so light
 * and dark both come from the system. Type restates the system's text-* styles
 * in Material's terms, because Material's selectors outrank a class: page title,
 * section title, body, supporting, meta, label (rules/type.md). Rendered markdown
 * takes .prose's values; a docs page's h1 is its page title, so h2 is the
 * section title and h3 and below are prose's minor headings.
 *
 * This file only themes. Layout of the site's own blocks is in extra.css. */

/* ---------- Themes ---------- */
/* The tokens are light-dark() pairs: the scheme picks the side. */
[data-md-color-scheme="alis"] {
  color-scheme: light;
}
[data-md-color-scheme="alis-dark"] {
  color-scheme: dark;
}

[data-md-color-scheme] {
  --md-text-font: var(--font-sans);
  --md-code-font: var(--font-mono);

  --md-primary-fg-color: var(--primary);
  --md-primary-fg-color--light: var(--primary);
  --md-primary-fg-color--dark: var(--primary);
  --md-primary-bg-color: var(--on-surface);
  --md-primary-bg-color--light: var(--on-surface-variant);
  --md-accent-fg-color: var(--primary);
  --md-accent-fg-color--transparent: color-mix(in srgb, var(--on-surface) calc(var(--state-hover) * 100%), transparent);
  --md-accent-bg-color: var(--on-primary);
  --md-accent-bg-color--light: var(--on-primary);

  --md-default-bg-color: var(--background);
  --md-default-bg-color--light: color-mix(in srgb, var(--background) 70%, transparent);
  --md-default-bg-color--lighter: color-mix(in srgb, var(--background) 30%, transparent);
  --md-default-bg-color--lightest: color-mix(in srgb, var(--background) 12%, transparent);
  --md-default-fg-color: var(--on-surface);
  --md-default-fg-color--light: var(--on-surface-variant);
  --md-default-fg-color--lighter: var(--outline);
  --md-default-fg-color--lightest: var(--outline-variant);

  --md-typeset-color: var(--on-surface);
  --md-typeset-a-color: var(--primary);
  --md-typeset-mark-color: var(--highlight);
  --md-typeset-del-color: color-mix(in srgb, var(--error) 12%, transparent);
  --md-typeset-ins-color: color-mix(in srgb, var(--success) 12%, transparent);
  --md-typeset-table-color: var(--outline-variant);
  --md-typeset-table-color--light: color-mix(in srgb, var(--on-surface) calc(var(--state-hover) * 100%), transparent);

  /* Code: machine speech on surface-container-highest, highlighted as the
     system highlights Shiki (alisx.css § Syntax colours). */
  --md-code-fg-color: var(--syntax-plain);
  --md-code-bg-color: var(--surface-container-highest);
  --md-code-bg-color--light: transparent;
  --md-code-bg-color--lighter: transparent;
  --md-code-hl-color: var(--highlight);
  --md-code-hl-color--light: var(--highlight);
  --md-code-hl-number-color: var(--syntax-number);
  --md-code-hl-special-color: var(--syntax-keyword);
  --md-code-hl-function-color: var(--syntax-function);
  --md-code-hl-constant-color: var(--syntax-number);
  --md-code-hl-keyword-color: var(--syntax-keyword);
  --md-code-hl-string-color: var(--syntax-string);
  --md-code-hl-name-color: var(--syntax-plain);
  --md-code-hl-operator-color: var(--syntax-plain);
  --md-code-hl-punctuation-color: var(--syntax-plain);
  --md-code-hl-comment-color: var(--syntax-comment);
  --md-code-hl-generic-color: var(--syntax-comment);
  --md-code-hl-variable-color: var(--syntax-plain);

  --md-admonition-fg-color: var(--on-surface);
  --md-admonition-bg-color: transparent;
  --md-footer-fg-color: var(--on-surface);
  --md-footer-fg-color--light: var(--on-surface-variant);
  --md-footer-fg-color--lighter: var(--on-surface-variant);
  --md-footer-bg-color: var(--background);
  --md-footer-bg-color--dark: var(--background);
  --md-shadow-z1: var(--elevation-1);
  --md-shadow-z2: var(--elevation-2);
  --md-shadow-z3: var(--elevation-3);

  /* Diagrams: the site draws them itself, themed in diagram.css. */

  /* Material's own glyphs, as Material Symbols (rules/icons.md). A url() in a
     custom property resolves against the stylesheet that uses it, Material's,
     so these are root-relative: the site is served at its domain's root. */
  --md-nav-icon--prev: url("/design-system/symbols/arrow_back.svg");
  --md-nav-icon--next: url("/design-system/symbols/chevron_right.svg");
  --md-toc-icon: url("/design-system/symbols/toc.svg");
  --md-path-icon: url("/design-system/symbols/chevron_right.svg");
  --md-clipboard-icon: url("/design-system/symbols/content_copy.svg");
  --md-code-copy-icon: url("/design-system/symbols/content_copy.svg");
  --md-code-select-icon: url("/design-system/symbols/select.svg");
  --md-search-result-icon: url("/design-system/symbols/description.svg");
  --md-details-icon: url("/design-system/symbols/chevron_right.svg");
  --md-footnotes-icon: url("/design-system/symbols/keyboard_return.svg");
  --md-tabbed-icon--prev: url("/design-system/symbols/chevron_left.svg");
  --md-tabbed-icon--next: url("/design-system/symbols/chevron_right.svg");
  --md-tasklist-icon: url("/design-system/symbols/check_box_outline_blank.svg");
  --md-tasklist-icon--checked: url("/design-system/symbols/check_box-fill.svg");
  --md-annotation-icon: url("/design-system/symbols/add_circle-fill.svg");
}

/* ---------- Material's size ---------- */
/* Material grows its root at 100em and 125em wide, and every rem-sized bar,
   rail and gap with it. The system's sizes don't grow (rules/styling.md). */
@media screen and (min-width: 100em) {
  html {
    font-size: 125%;
  }
}

/* ---------- Bars: the header and the tabs lie on the ground ---------- */
.md-header,
.md-tabs {
  background-color: var(--background);
  color: var(--on-surface);
}
.md-header {
  box-shadow: none;
}
/* No line at rest (AppTitleBar). Where the tabs show, their line is the bar's
   edge at every scroll; without them, a hairline only while the page is under
   the bar (Material marks that with --shadow). */
.md-tabs {
  border-bottom: 1px solid var(--outline-variant);
}
.md-header--shadow:not(.md-header--lifted) {
  box-shadow: inset 0 -1px 0 var(--outline-variant);
}
@media (max-width: 599px) {
  .md-header__inner {
    min-height: var(--titlebar-height-phone);
  }
}
/* The brand: the AlisX wordmark (an asset, rules/icons.md) and Docs in label
   type, staying put; on a phone too, after the menu button. */
.md-header__button.md-logo {
  margin-inline-end: 0;
  padding-inline: var(--space-4);
}
.md-header__button.md-logo :is(img, svg),
.md-nav__title .md-nav__button.md-logo :is(img, svg) {
  height: 36px;
  width: auto;
}
.md-header__title {
  flex-grow: 1;
  margin-inline: var(--space-4) var(--space-8);
}
.docs-brand__name {
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
}
@media screen and (max-width: 76.2344em) {
  .md-header__button.md-logo {
    display: block;
  }
}
/* Icon buttons: supporting ink, and the state layer on hover, never a fade. */
.md-header__button:not(.md-logo) {
  border-radius: var(--radius-pill);
  color: var(--on-surface-variant);
}
.md-header__button:hover {
  opacity: 1;
}
.md-header__button:not(.md-logo):hover {
  background-color: color-mix(in srgb, var(--on-surface) calc(var(--state-hover) * 100%), transparent);
}

/* Tabs: the control height, ink and weight over a 3px indicator (AppTitleBar). */
.md-tabs__item {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--control-height);
  padding: 0 var(--space-16);
}
.md-tabs__link {
  margin-top: 0;
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  opacity: 1;
}
.md-tabs__item--active .md-tabs__link,
.md-tabs__link:is(:hover, :focus) {
  color: var(--on-surface);
}
.md-tabs__item--active .md-tabs__link {
  font-weight: 700;
}
.md-tabs__item--active::after {
  content: "";
  position: absolute;
  right: var(--space-16);
  bottom: 0;
  left: var(--space-16);
  height: 3px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background-color: var(--on-surface);
}
/* The rails stick under the bar and its tabs (the drawer is pinned at 0). */
@media screen and (min-width: 76.25em) {
  .md-header--lifted ~ .md-container .md-sidebar {
    top: calc(2.4rem + var(--control-height) + 1px);
  }
}

/* Search: the system's pill field (.app-search). */
@media screen and (min-width: 60em) {
  .md-search__form {
    height: var(--control-height);
    border-radius: var(--radius-pill);
    background-color: var(--surface-container-highest);
  }
  .md-search__form:hover {
    background-color: var(--surface-container-highest);
  }
  .md-search__form:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
  }
  /* Open, the field keeps its pill and the results float under it like a
     menu: surface-container-high at elevation-2, radius-lg, no scrim. */
  [data-md-toggle="search"]:checked ~ .md-header .md-search__form {
    border-radius: var(--radius-pill);
    background-color: var(--surface-container-high);
    box-shadow: none;
  }
  /* Material squares the bottom corners per direction, so [dir] matches it. */
  [dir] .md-search__output {
    top: calc(var(--control-height) + var(--space-4));
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-2);
  }
  [data-md-toggle="search"]:checked ~ .md-header .md-search__output {
    box-shadow: var(--elevation-2);
  }
  .md-search__overlay,
  [data-md-toggle="search"]:checked ~ .md-header .md-search__overlay {
    background-color: transparent;
  }
}
.md-search__input {
  color: var(--on-surface);
  font-size: 14px;
}
/* Material draws its completion under the input as a second line of text: at
   another size the two don't line up and the word shows twice. */
.md-search__suggest {
  font-size: 14px;
}
.md-search__input::placeholder,
.md-search__icon {
  color: var(--on-surface-variant);
}
/* The screen's key, a / cap at the field's end while it is empty and
   unfocused (rules/shortcuts.md). The field is wide only on a desktop. */
.md-search__form {
  position: relative;
}
.docs-search-key {
  position: absolute;
  top: 50%;
  right: var(--space-12);
  z-index: 2;
  transform: translateY(-50%);
  pointer-events: none;
}
.md-search__form:focus-within .docs-search-key,
.md-search__input:not(:placeholder-shown) ~ .docs-search-key {
  display: none;
}
@media screen and (max-width: 59.984em) {
  .docs-search-key {
    display: none;
  }
}
.md-search__output,
.md-search__scrollwrap {
  background-color: var(--surface-container-high);
}
.md-search-result__meta {
  background-color: transparent;
  color: var(--on-surface-variant);
  font-size: 12px;
  line-height: 16px;
  padding-block: var(--space-12);
}
.md-search-result__link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.md-search-result__terms {
  margin: var(--space-4) 0 0;
  font-size: 14px;
  line-height: 20px;
  font-style: normal;
}
/* A result reads as a row: its page in object-title, the passage in
   supporting text 4 below, the count of more in meta. Material sizes them in
   em, and prose's 24 between blocks would reach in here. */
.md-search-result .md-typeset {
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 20px;
}
.md-search-result .md-typeset h1 {
  margin: var(--space-12) 0 0;
  color: var(--on-surface);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0;
}
.md-search-result .md-typeset h2 {
  margin: var(--space-12) 0 0;
  color: var(--on-surface);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0;
}
.md-search-result .md-typeset p {
  margin: var(--space-4) 0 0;
}
.md-search-result__more > summary > div {
  padding-block: var(--space-12);
  font-size: 12px;
  line-height: 16px;
}
/* A match is a highlight, never a link (rules/colour.md). */
.md-search-result mark {
  border-radius: 2px;
  background-color: var(--highlight);
  color: var(--on-highlight);
  text-decoration: none;
}
.md-search-result a:not(.md-search-result__link) {
  text-decoration: none;
}

/* ---------- Rail: the navigation pane (AppShell, nav AppListRow) ---------- */
.md-nav {
  font-size: 14px;
  line-height: 20px;
}
.md-nav__link {
  color: var(--on-surface-variant);
  font-weight: 500;
}
/* Hover is ink and the state layer; Material's own hover is primary and more
   specific, so these match its selectors. */
.md-nav__link[href]:is(:hover, :focus),
.md-nav__link[for]:is(:hover, :focus) {
  color: var(--on-surface);
}
/* The page you are on: the rail's fill, ink and weight (rules/selection.md:
   the navigation pane is permanent chrome). */
.md-nav--primary .md-nav__link--active,
.md-nav--primary .md-nav__item--active > .md-nav__link--active {
  background-color: var(--selection-chrome);
  color: var(--on-secondary-container);
  font-weight: 700;
}
/* The section you are reading, on the page's contents: ink and weight. */
.md-nav--secondary .md-nav__link--active {
  color: var(--on-surface);
  font-weight: 700;
}
/* The contents rail names itself as the rail names a group (.app-nav-heading),
   and its entries sit 8 apart, not Material's 0.625em. */
.md-sidebar--secondary .md-nav--secondary > .md-nav__title {
  display: flex;
  align-items: center;
  min-height: 24px;
  margin: 0 0 var(--space-4);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}
.md-sidebar--secondary .md-nav__link {
  margin-top: var(--space-8);
}
/* One scrollbar for the app (alisx.css): thin, in outline-variant, at rest
   and on hover. Material colours its scroll areas with its own variables. */
.md-sidebar__scrollwrap,
.md-sidebar__scrollwrap:is(:hover, :focus-within),
.md-search__scrollwrap,
.md-search__scrollwrap:hover,
.md-typeset pre > code,
.md-typeset pre > code:hover {
  scrollbar-color: var(--outline-variant) transparent;
}
@media screen and (min-width: 76.25em) {
  .md-sidebar {
    width: var(--nav-width);
  }
  .md-grid {
    max-width: calc(2 * var(--nav-width) + var(--measure-prose) + 2 * var(--space-24));
  }
  [dir="ltr"] .md-sidebar--primary:not([hidden]) ~ .md-content > .md-content__inner,
  [dir="ltr"] .md-sidebar--secondary:not([hidden]) ~ .md-content > .md-content__inner {
    margin-inline: var(--space-24);
  }
  /* A reading page is the prose measure; the home page, with no rails, keeps
     the grid's width for its hero and cards. */
  .md-sidebar--primary:not([hidden]) ~ .md-content > .md-content__inner {
    max-width: var(--measure-prose);
  }
  /* Material indents every level 12; here only a group's own pages indent. */
  .md-nav--primary .md-nav__list {
    padding-inline: 0;
  }
  /* Panes are separated by a divider, not by fill (AppShell). The sidebar's
     own box is only as tall as its padding; the scroll area is the pane. */
  .md-sidebar--primary .md-sidebar__scrollwrap {
    margin-inline: 0;
    padding-inline-end: var(--space-12);
    box-shadow: inset -1px 0 0 var(--outline-variant);
  }
  /* A row: 36 (48 on touch), padded 16, a pill. */
  .md-nav--primary .md-nav__item:not(.md-nav__item--section) > .md-nav__link {
    align-items: center;
    min-height: max(36px, var(--touch-target));
    margin-top: 0;
    padding: var(--space-8) var(--space-16);
    border-radius: var(--radius-pill);
  }
  .md-nav--primary .md-nav__item:not(.md-nav__item--section) > .md-nav__link:hover {
    background-color: color-mix(in srgb, var(--on-surface) calc(var(--state-hover) * 100%), transparent);
  }
  .md-nav--primary .md-nav__item:not(.md-nav__item--section) > .md-nav__link--active:hover {
    background-color: var(--selection-chrome);
  }
  .md-nav--primary .md-nav__container > .md-nav__link {
    min-height: 0;
    padding: 0;
    background-color: transparent;
  }
  /* A group opens in place: its pages indent one step under it. */
  .md-nav--primary .md-nav__item--nested:not(.md-nav__item--section) > .md-nav > .md-nav__list {
    padding-inline-start: var(--space-16);
  }
  /* A group opens in place on expand_more, turned over while open. The SVG
     set files the font's expand_more glyph as keyboard_arrow_down. */
  .md-nav--primary .md-nav__link .md-nav__icon::after {
    -webkit-mask-image: url("/design-system/symbols/keyboard_arrow_down.svg");
    mask-image: url("/design-system/symbols/keyboard_arrow_down.svg");
  }
  .md-nav--primary .md-nav__item--nested .md-nav__toggle:checked ~ .md-nav__link .md-nav__icon::after {
    transform: rotate(180deg);
  }
  /* The tab already opens the section's own page. */
  .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
    display: none;
  }
  /* A group of pages is named in the rail's heading style (.app-nav-heading):
     12/16 at 500, sentence case, no tracking, its own box. Only in the rail:
     in the drawer a group is a row you open. */
  .md-nav__item--section > .md-nav__link,
  .md-nav__item--section > label.md-nav__link {
    min-height: 24px;
    margin: var(--space-8) 0 var(--space-4);
    padding: 0 var(--space-8);
    color: var(--on-surface-variant);
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
  }
  /* A heading that links to its group's page takes ink and weight there,
     never the row's pill. */
  .md-nav--primary .md-nav__item--section > .md-nav__container > .md-nav__link--active {
    background-color: transparent;
    color: var(--on-surface);
  }
}
.md-nav__title {
  color: var(--on-surface-variant);
  font-weight: 500;
}

/* ---------- The drawer: the pane fills a phone's screen (AppShell) ---------- */
.docs-nav-close {
  display: none;
}
@media screen and (max-width: 76.2344em) {
  /* Its close sits in its head beside the brand, at every level. */
  .docs-nav-close {
    position: fixed;
    top: var(--space-4);
    right: var(--space-8);
    z-index: 6;
    display: block;
  }
  /* The pane's head: the brand on the ground, as in the bar, 64 tall. */
  .md-nav--primary .md-nav__title[for="__drawer"] {
    display: flex;
    gap: var(--space-8);
    align-items: center;
    height: var(--titlebar-height-phone);
    padding: 0 var(--space-12);
    background-color: var(--background);
    color: var(--on-surface);
  }
  .md-nav--primary .md-nav__title[for="__drawer"] .md-logo {
    position: static;
    margin: 0;
    padding: 0;
  }
  .md-sidebar--primary {
    width: 100%;
  }
  [dir="ltr"] .md-sidebar--primary {
    left: -100%;
  }
  [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary {
    box-shadow: none;
    transform: translateX(100%);
  }
  /* It lies on the ground: nothing shows behind it, so no scrim. */
  [data-md-toggle="drawer"]:checked ~ .md-overlay {
    opacity: 0;
  }
  .md-nav--primary .md-nav__title {
    background-color: var(--background);
    color: var(--on-surface);
    box-shadow: none;
  }
  .md-nav--primary .md-nav__title .md-nav__button :is(img, svg) {
    height: 24px;
  }
  .md-nav--primary .md-nav__title ~ .md-nav__list {
    box-shadow: none;
    padding-inline: var(--space-8);
  }
  /* Rows sit flush, with no line between them. */
  .md-nav--primary .md-nav__item {
    border-top: 0;
  }
  .md-nav--primary .md-nav__link {
    align-items: center;
    min-height: var(--touch-target-coarse);
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-pill);
  }
  .md-nav--primary .md-nav__container > .md-nav__link {
    min-height: 0;
    padding: 0;
  }
  /* The group holding the page you are on is in ink: selection is the
     page's own fill and weight, never primary text (rules/selection.md). */
  .md-nav--primary .md-nav__item--active > .md-nav__link:not(.md-nav__link--active),
  .md-nav--primary .md-nav__item--active > .md-nav__container > .md-nav__link:not(.md-nav__link--active) {
    color: var(--on-surface);
  }
}

/* ---------- Type: the page ---------- */
.md-typeset {
  font-size: 16px;
  line-height: 24px;
  color: var(--on-surface);
}
/* Paragraph spacing is one full line: blocks 24 apart, margins collapsing. */
.md-typeset :is(p, ul, ol, dl, blockquote, pre, .tabbed-set) {
  margin-block: var(--space-24);
}
.md-typeset .tabbed-block > :last-child {
  margin-bottom: 0;
}
/* A heading belongs to what it names: 8 above its content (.prose). Scoped
   to the page's content so it outranks each block's own margin. */
.md-content .md-typeset :is(h2, h3, h4, h5, h6) + * {
  margin-top: 0;
}
.md-typeset li {
  margin-bottom: var(--space-8);
}
/* Lists indent 24, an item's paragraphs sit tight, a nested list 8 below its
   item (.prose). */
[dir="ltr"] .md-typeset :is(ul, ol) {
  margin-left: 0;
  padding-left: var(--space-24);
}
[dir="ltr"] .md-typeset :is(ul, ol) li {
  margin-left: 0;
}
.md-typeset :is(ul, ol) li > p {
  margin-block: 0;
}
.md-typeset li > :is(ul, ol) {
  margin: var(--space-8) 0 0;
}
/* Emphasis is weight, never italic (rules/type.md). */
.md-typeset :is(em, i) {
  font-style: normal;
  font-weight: 600;
}
.md-typeset :is(strong, b) {
  font-weight: 600;
}
.md-typeset :is(h1, h2, h3, h4, h5, h6) {
  color: var(--on-surface);
}
/* Page title: text-page-title. */
.md-typeset h1 {
  margin: 0 0 var(--space-16);
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
/* Section title: text-section-title. */
.md-typeset h2 {
  margin: var(--space-32) 0 var(--space-8);
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
/* Prose's minor headings: body size at 600, in the supporting ink. */
.md-typeset :is(h3, h4, h5, h6) {
  margin: var(--space-24) 0 var(--space-8);
  color: var(--on-surface-variant);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
/* The home hero's headline: text-welcome-title. */
/* The home hero's headline: the expressive display (rules/register.md
   § Expressive pages), 64, 48 on a tablet, 36 on a phone. */
.md-typeset .alis-hero h1 {
  margin: 0 0 var(--space-24);
  font-size: 64px;
  line-height: 68px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.md-typeset .alis-hero > p {
  font-size: 20px;
  line-height: 32px;
  color: var(--on-surface-variant);
}
.md-typeset .alis-hero > p strong {
  color: var(--on-surface);
}
@media (max-width: 1239px) {
  .md-typeset .alis-hero h1 {
    font-size: 48px;
    line-height: 52px;
  }
}
@media (max-width: 599px) {
  .md-typeset h1 {
    font-size: 22px;
    line-height: 28px;
    font-weight: 500;
    letter-spacing: 0;
  }
  .md-typeset .alis-hero h1 {
    font-size: 36px;
    line-height: 40px;
    font-weight: 800;
    letter-spacing: -0.03em;
  }
  .md-typeset .alis-hero > p {
    font-size: 18px;
    line-height: 28px;
  }
}
.md-typeset .headerlink {
  color: var(--on-surface-variant);
  font-size: 0;
  vertical-align: middle;
}
/* Only ❯ ◼ → may stand in for a glyph (rules/icons.md): the link symbol. */
.md-typeset .headerlink::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("/design-system/symbols/link.svg") center / contain no-repeat;
  mask: url("/design-system/symbols/link.svg") center / contain no-repeat;
}
/* Links in reading text are underlined, as in .prose. */
.md-typeset a:not(.headerlink, .app-btn) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.md-typeset :is(.grid.cards, .tabbed-labels) a:not(.app-btn) {
  text-decoration: none;
}
[dir="ltr"] .md-typeset blockquote {
  padding-left: var(--space-16);
}
.md-typeset blockquote {
  border-left: 4px solid var(--outline-variant);
  color: var(--on-surface-variant);
}
.md-typeset hr {
  border-bottom: 1px solid var(--outline-variant);
}

/* The system's own components inside the page: Material's link colours
   outrank a class, so they are given back here. */
.md-typeset .app-btn,
.md-typeset .app-btn:is(:hover, :focus) {
  color: var(--on-surface);
}
.md-typeset .app-btn--filled,
.md-typeset .app-btn--filled:is(:hover, :focus) {
  color: var(--on-primary);
}

/* ---------- Code ---------- */
.md-typeset code {
  padding: 0 var(--space-4);
  border-radius: var(--radius-xs);
  font-size: 14px;
  font-feature-settings: "liga" 0;
}
/* Inline code: syntax-function ink on its chip, in a link too. */
.md-typeset :not(pre) > code,
.md-typeset a > code {
  color: var(--syntax-function);
}
/* A block with no head (output, plain text): the snippet's ground and edge,
   as a bare <pre> in .prose. */
.md-typeset pre > code {
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-md);
  background-color: var(--code-surface);
  box-shadow: inset 0 0 0 1px var(--outline-variant);
  font-size: 14px;
  line-height: 20px;
}
/* AppCodeBlock, written by hooks/design.py: the component draws the ground,
   edge, head and Copy, so Material's <pre> styles step back inside it. */
.md-typeset .app-code {
  margin-block: var(--space-24);
}
.md-typeset .app-code pre {
  margin: 0;
}
.md-typeset .app-code pre > code {
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
/* Material sets code as a block; a command's code runs on from its caret. */
.md-typeset .app-code--command pre > code {
  display: inline;
  color: inherit;
}
.md-typeset .tabbed-block > .app-code:first-child {
  margin-top: 0;
}
/* On a phone Material pulls code and a tab set out to the screen's edges; the
   component keeps the 16 gutter and its radius (page.md). */
@media screen and (max-width: 44.984375em) {
  .md-content__inner > .app-code {
    margin-inline: 0;
  }
  .md-content__inner > .tabbed-set .tabbed-labels {
    max-width: 100%;
    margin-inline: 0;
  }
}
.docs-glyph {
  display: inline-flex;
  width: 20px;
  height: 20px;
}
.docs-glyph svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.docs-glyph--check,
.is-copied .docs-glyph--copy {
  display: none;
}
.is-copied .docs-glyph--check {
  display: inline-flex;
}
/* The live region that says "Copied": heard, not seen. */
.docs-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Tables: as .prose ---------- */
/* Full width; the columns size to what they hold, since a page can't give a
   column its width. */
.md-typeset table:not([class]) {
  display: table;
  width: 100%;
  border: 0;
  border-radius: 0;
  font-size: 14px;
  line-height: 20px;
}
.md-typeset table:not([class]) :is(th, td) {
  padding: var(--space-8) var(--space-12);
}
.md-typeset table:not([class]) th {
  border-bottom: 1px solid var(--outline-variant);
  background-color: transparent;
  color: var(--on-surface);
  font-weight: 500;
}
.md-typeset table:not([class]) td {
  border-top: 0;
  border-bottom: 1px solid var(--outline-variant);
}

/* ---------- Keys: one tonal cap per key (AppKeys) ---------- */
.md-typeset .keys {
  display: inline-flex;
  gap: var(--space-4);
  align-items: center;
  vertical-align: middle;
}
.md-typeset .keys span {
  display: none;
}
.md-typeset kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-xs);
  background-color: var(--surface-container-highest);
  box-shadow: none;
  color: var(--on-surface-variant);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* pymdownx draws a glyph beside a named key; the key's own name is the cap. */
.md-typeset .keys kbd[class]::before,
.md-typeset .keys kbd[class]::after {
  content: none;
}

/* ---------- Admonitions: the system's alert (AppAlert) ---------- */
.md-typeset :is(.admonition, details) {
  --docs-alert: var(--info);
  margin-block: var(--space-24);
  padding: 0 var(--space-16) var(--space-16);
  border: 0;
  border-radius: var(--radius-xs);
  background-color: color-mix(in srgb, var(--docs-alert) 12%, transparent);
  box-shadow: none;
  color: var(--on-surface);
  font-size: 14px;
  line-height: 20px;
}
.md-typeset :is(.success, .check, .done) {
  --docs-alert: var(--success);
}
.md-typeset :is(.warning, .caution, .attention) {
  --docs-alert: var(--warning);
}
.md-typeset :is(.danger, .error, .failure, .fail, .missing, .bug) {
  --docs-alert: var(--error);
}
.md-typeset :is(.admonition, details) > :is(.admonition-title, summary) {
  margin: 0 calc(var(--space-16) * -1);
  padding: var(--space-16) var(--space-16) 0 calc(var(--space-16) + 20px + var(--space-12));
  border: 0;
  background-color: transparent;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}
.md-typeset :is(.admonition, details) > :is(.admonition-title, summary)::before {
  top: calc(var(--space-16) + 2px);
  left: var(--space-16);
  width: 20px;
  height: 20px;
  background-color: var(--docs-alert);
}
.md-typeset details > summary::after {
  top: calc(var(--space-16) + 2px);
  background-color: var(--on-surface-variant);
}
.md-typeset :is(.admonition, details) > :is(.admonition-title, summary) + * {
  margin-top: 0;
}
/* The text shares the title's edge: the icon's 20 and the 12 gap. */
.md-typeset :is(.admonition, details) > :not(.admonition-title, summary) {
  margin-inline-start: calc(20px + var(--space-12));
}
/* Material keeps 12 under the last block, at html's specificity. */
html .md-typeset :is(.admonition, details) > :last-child {
  margin-bottom: 0;
}

/* ---------- Content tabs: the segmented control (AppSegmented) ---------- */
/* The docs keep their content tabs, drawn as .app-seg (Ruan, 2026-10-28;
   page.md has no tabs in content, so this is the docs' one exception). */
.md-typeset .tabbed-labels {
  display: inline-flex;
  align-self: flex-start;
  width: max-content;
  max-width: 100%;
  padding: var(--space-4);
  border-radius: var(--radius-pill);
  background-color: var(--surface-container-low);
  box-shadow: none;
}
.js .md-typeset .tabbed-labels::before {
  display: none;
}
.md-typeset .tabbed-labels > label {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--control-height) - 2 * var(--space-4));
  padding: 0 var(--space-16);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
}
.md-typeset .tabbed-labels > label:hover {
  color: var(--on-surface);
}
/* A linked tab's label wraps Material's anchor, which brings its own em
   padding; the label alone is the option. */
.md-typeset .tabbed-labels > label > a {
  margin: 0;
  padding: 0;
  color: inherit;
}
/* The checked input and its label are found by position, as Material does:
   every input comes before the labels, so a sibling selector can't pair them.
   Six covers the longest set (four). */
.md-typeset .tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > :nth-child(1),
.md-typeset .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > :nth-child(2),
.md-typeset .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > :nth-child(3),
.md-typeset .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > :nth-child(4),
.md-typeset .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > :nth-child(5),
.md-typeset .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > :nth-child(6) {
  border-color: var(--outline-variant);
  background-color: var(--surface);
  color: var(--on-surface);
  font-weight: 700;
}
.md-typeset .tabbed-content {
  margin-top: var(--space-16);
}

/* ---------- Grid cards: instruments (AppCard) ---------- */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  padding: var(--space-24);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 20px;
}
/* A card holding links is not a card you open: no hover, never a lift. */
.md-typeset .grid.cards > ul > li:is(:hover, :focus-within),
.md-typeset .grid > .card:is(:hover, :focus-within) {
  border-color: var(--outline-variant);
  box-shadow: none;
}
.md-typeset .grid.cards > ul > li > :is(p, ul) {
  margin-block: 0 var(--space-16);
}
.md-typeset .grid.cards > ul > li > :last-child {
  margin-bottom: 0;
}
/* A card with one link is that link (hooks/design.py): the whole card opens
   it, with the state layer, never a lift. */
.md-typeset .grid.cards > ul > li.docs-card {
  padding: 0;
}
.md-typeset .grid.cards .docs-card__link {
  display: block;
  height: 100%;
  padding: var(--space-24);
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}
@media (min-width: 600px) {
  .md-typeset .grid.cards .docs-card__link {
    padding: var(--card-padding-wide);
  }
}
.md-typeset .grid.cards .docs-card__link > :is(p, ul) {
  margin-block: 0 var(--space-16);
}
.md-typeset .grid.cards .docs-card__link > :last-child {
  margin-bottom: 0;
}
.md-typeset .grid.cards .docs-card__link > p:first-child {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  margin-bottom: var(--space-8);
  color: var(--on-surface);
  font-size: 16px;
  line-height: 24px;
}
.md-typeset .grid.cards .docs-card__link > p:first-child strong {
  font-weight: 500;
}
/* A card with more links finishes on one row of text buttons, on the trailing
   edge (AppCard). */
.md-typeset .grid.cards .app-btn-row {
  margin: var(--space-16) 0 0;
}
/* Cards in a row are one height; their rows sit on the same line at the foot,
   16 below the text at the least. */
.md-typeset .grid.cards > ul > li:has(> .app-btn-row) {
  display: flex;
  flex-direction: column;
}
.md-typeset .grid.cards > ul > li > .app-btn-row {
  margin-top: auto;
}
/* Four cards take two columns, so none sits alone in a row and two buttons
   fit on one line. */
@media (min-width: 600px) {
  .md-typeset .grid.cards:has(> ul > li:nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* The title, its icon beside it: text-object-title. */
.md-typeset .grid.cards > ul > li > p:first-child {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  margin-bottom: var(--space-8);
  color: var(--on-surface);
  font-size: 16px;
  line-height: 24px;
}
.md-typeset .grid.cards > ul > li > p:first-child strong {
  font-weight: 500;
}
.md-typeset .grid.cards .twemoji {
  height: 20px;
}
.md-typeset .grid.cards .twemoji svg {
  width: 20px;
}
@media (min-width: 600px) {
  .md-typeset .grid.cards > ul > li,
  .md-typeset .grid > .card {
    padding: var(--card-padding-wide);
  }
}

/* ---------- Footer ---------- */
.md-footer {
  border-top: 1px solid var(--outline-variant);
}
.md-copyright {
  color: var(--on-surface-variant);
  font-size: 12px;
  line-height: 16px;
}
/* Previous and next: where in meta, the page in object-title, no fade. */
.md-footer__direction {
  color: var(--on-surface-variant);
  font-size: 12px;
  line-height: 16px;
  opacity: 1;
}
.md-footer__title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}
/* The site's links out are icon buttons: a 20px glyph in a 40px box. */
.md-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  color: var(--on-surface-variant);
}
.md-social__link svg {
  width: 20px;
  max-height: 20px;
}
.md-social__link:hover {
  background-color: color-mix(in srgb, var(--on-surface) calc(var(--state-hover) * 100%), transparent);
  color: var(--on-surface);
}

/* ---------- Tooltips: AppTooltip ---------- */
/* Material draws the tooltip and its tail from the page ground; here it is
   inverse-surface, 12/16 at 500, radius-sm, with no tail. */
.md-tooltip2 {
  --md-default-bg-color: var(--inverse-surface);
}
.md-tooltip2::before {
  display: none;
}
/* The inner box is also .md-typeset, which sets the page's ink. */
[role="tooltip"] > .md-tooltip2__inner {
  display: flex;
  color: var(--on-inverse-surface);
  align-items: center;
  min-height: 28px;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

/* ---------- Focus: 2px primary at 1px, never removed (rules/selection.md) ---------- */
:is(.md-typeset a, .md-typeset .app-code__body, .md-nav__link, .md-tabs__link, .md-footer__link, .md-header__button, .md-social__link, .md-search-result__link):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.md-typeset .tabbed-set > input:focus-visible ~ .tabbed-labels {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}