/*
 * Component-level overrides: grid cards, tables, code, and navigation.
 * Pure type scale (headings, paragraph rhythm, body color) lives in
 * typography.css. Colors/tokens come from bridge.css.
 */

/* ------------------------------------------------------------------ */
/* Secondary text — de-emphasize specific UI elements for hierarchy.   */
/* ------------------------------------------------------------------ */

/* Link cards (Figma "Get-started-card"). `.grid.cards` on index/overview
   pages render as: Heading (15 SemiBold) + a "+" affordance top-right, then a
   Description (13 secondary) — no leading icon, no visible action link. The
   single action link is stretched invisibly over the whole card so the card
   is the click target. Hover/focus = brand border + brand heading + brand "+".
   (Authored cards carry one link and plain-text descriptions.) */
.md-typeset .grid.cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 12px;
  margin: 16px 0;
}

.md-typeset .grid.cards > ul,
.md-typeset .grid.cards > ol {
  display: contents;
}

.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > ol > li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 16px; /* uniform 16 per design */
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  background-color: var(--color-surface-raised);
  box-shadow: none;
  transition:
    border-color 120ms ease,
    color 120ms ease;
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ol > li:hover,
.md-typeset .grid.cards > ul > li:focus-within,
.md-typeset .grid.cards > ol > li:focus-within {
  border-color: var(--color-border-brand);
}

/* Heading = first paragraph. */
.md-typeset .grid.cards > ul > li > p:first-child,
.md-typeset .grid.cards > ol > li > p:first-child {
  margin: 0;
  padding-right: 28px; /* keep long titles clear of the top-right icon (20 + 8) */
  font-family: var(--font-family-main), sans-serif;
  font-size: 15px;
  line-height: 20px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.md-typeset .grid.cards > ul > li:hover > p:first-child,
.md-typeset .grid.cards > ol > li:hover > p:first-child,
.md-typeset .grid.cards > ul > li:focus-within > p:first-child,
.md-typeset .grid.cards > ol > li:focus-within > p:first-child {
  color: var(--color-text-brand);
}

/* The card's own icon sits top-right (per the page design), 20px, secondary
   — and turns brand on hover/focus with the heading. */
.md-typeset .grid.cards > ul > li > p:first-child .twemoji,
.md-typeset .grid.cards > ol > li > p:first-child .twemoji {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  color: var(--color-icon-brand);
}

.md-typeset .grid.cards > ul > li > p:first-child .twemoji svg,
.md-typeset .grid.cards > ol > li > p:first-child .twemoji svg {
  width: 20px;
  height: 20px;
}

.md-typeset .grid.cards > ul > li:hover > p:first-child .twemoji,
.md-typeset .grid.cards > ol > li:hover > p:first-child .twemoji,
.md-typeset .grid.cards > ul > li:focus-within > p:first-child .twemoji,
.md-typeset .grid.cards > ol > li:focus-within > p:first-child .twemoji {
  color: var(--color-text-brand);
}

/* Description = any later paragraph (the action paragraph collapses, its link
   is taken out of flow below). */
.md-typeset .grid.cards > ul > li > p:not(:first-child),
.md-typeset .grid.cards > ol > li > p:not(:first-child) {
  margin: 0;
  font-size: 13px;
  line-height: 16px;
  color: var(--color-text-secondary);
}

/* No --- divider in the design. */
.md-typeset .grid.cards > ul > li hr,
.md-typeset .grid.cards > ol > li hr {
  display: none;
}

/* The single action link becomes an invisible overlay covering the card. */
.md-typeset .grid.cards > ul > li a[href],
.md-typeset .grid.cards > ol > li a[href] {
  position: absolute;
  inset: 0;
  font-size: 0;
  color: transparent;
}

.md-typeset .grid.cards > ul > li a[href]:focus-visible,
.md-typeset .grid.cards > ol > li a[href]:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: -2px;
}

/* Top navbar - top-level docs areas should be visible without forcing
   users to decode a long nested sidebar. */
.md-tabs {
  border-bottom: 1px solid var(--color-border-subtle);
  background-color: var(--color-surface-default);
}

.md-tabs__link {
  color: var(--color-text-secondary);
  font-size: var(--docs-font-size-xs);
  font-weight: var(--font-weight-medium);
  opacity: 1;
  transition:
    color 120ms ease,
    font-weight 120ms ease;
}

.md-tabs__link:hover,
.md-tabs__link--active {
  color: var(--color-text-brand);
  font-weight: var(--font-weight-bold);
}

/* Sidebar navigation — full accordion tree (Figma docs design).
   Top tabs are disabled, so every top-level product area lives in the
   left sidebar as a collapsible section. Top-level rows read as a flat,
   hairline-divided list with the disclosure chevron right-aligned;
   nested children sit indented beneath a vertical guide line.

   `navigation.indexes` is disabled, so every section renders as a bare
   toggle label (`label.md-nav__link[for]` — chevron included), and the
   whole row toggles the section; clicking the chevron does the same thing.
   Each section's index page is listed explicitly in the nav as a separate
   "Overview" child (a leaf `.md-nav__link[href]`), rather than being hoisted
   into the section header. The `.md-nav__container` rules below are kept as
   an inert fallback in case `navigation.indexes` is ever re-enabled. */

/* Match the Figma sidebar width exactly. Sidebar metrics are pinned in px
   (not rem) so they equal the Figma spec regardless of the docs' root font
   size (Material runs at 125%+, which would otherwise inflate rem values). */
.md-sidebar--primary {
  width: 240px;
}

/* Pin the sidebar's text colours to the exact Figma tokens (light theme):
   color/text/secondary = neutral-500 (#686f7b), color/text/primary =
   neutral-900 (#020c22). bridge.css maps the site-wide --color-text-*
   semantics slightly differently (secondary #6e7581, primary neutral-1000),
   so we re-point them to the palette primitives the design uses — scoped to
   the sidebar (and rail) only. Dark mode is left to the existing tokens. */
[data-md-color-scheme="default"] .md-sidebar--primary,
[data-md-color-scheme="default"] .docs-rail {
  --color-text-secondary: var(--color-neutral-500);
  --color-text-primary: var(--color-neutral-900);
}

/* Attach the content row to the header, per the design. Material offsets the
   whole row with `.md-main__inner { margin-top: 1.5rem }` (~33px), which — on
   top of the content's own 24px top padding — pushed the H1 ~66px below the
   header instead of the design's 24px. Cancel that offset so the content's
   padding alone sets the gap and the sidebar sits flush against the header. */
.md-main__inner {
  margin-top: 0;
}

@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    margin-top: 0;
    padding-top: 0;
  }
}

/* Material insets the nav inside the primary sidebar (a right gutter in the
   desktop media query). Remove it so rows span the full column width and
   the selected-row tint reaches the right edge. */
.md-sidebar--primary .md-sidebar__inner {
  padding-left: 0;
  padding-right: 0;
}

/* Figma frames the sidebar with a subtle vertical line on both edges. The
   border sits on the scroll container so it spans the full height and stays
   put while the nav scrolls. */
.md-sidebar--primary .md-sidebar__scrollwrap {
  border-right: 1px solid var(--color-border-subtle);
  border-left: 1px solid var(--color-border-subtle);
  /* Hide the scrollbar so its gutter never shrinks the content width — rows
     (and the selected-row tint) then reach the right border line. Scrolling
     still works via wheel/trackpad. */
  scrollbar-width: none;
}

.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar {
  display: none;
}

/* Material renders the active page's Table-of-Contents inside the primary nav:
   a `label[for="__toc"]` that repeats the page title (with a chevron) plus an
   embedded `.md-nav--secondary` "On this page" list. The title row duplicates
   the active nav link, and the TOC belongs in the right "On this page" sidebar,
   not the left nav. On desktop the secondary sidebar shows the TOC; in the
   mobile drawer Material injects this copy, which surfaced the duplicate. Hide
   both in the primary sidebar at every width so the nav/drawer stays nav-only.
   (Scoped to .md-sidebar--primary, so the right TOC sidebar is unaffected.) */
.md-sidebar--primary .md-nav__link[for="__toc"],
.md-sidebar--primary .md-nav--secondary {
  display: none !important;
}

/* Mobile drawer: Material renders the slide-in panel as a "floating card" —
   inset 8px on every side, 16px rounded corners, a translucent background, and
   a theme-dependent drop shadow (light: 0 4px 10px/.2; dark: 0 10px 40px/.4).
   That looked inconsistent between themes: the shadow read differently, and the
   scrollwrap's straight 1px border didn't follow the rounded corners, so it
   poked past the top corner. Make the drawer a flush, square, full-height panel
   with just the one 1px subtle border — identical in both themes.
   `[data-md-color-scheme]` prefix + !important are needed because Material sets
   these (notably the shadow) via scheme-scoped, !important rules. */
@media screen and (max-width: 76.1875em) {
  [data-md-color-scheme] .md-sidebar--primary {
    top: 0 !important;
    height: 100% !important; /* Material pins an explicit inset-derived height */
    /* the open transform overshoots by 8px for the float; pull it back flush */
    margin-left: -8px !important;
    border-radius: 0 !important;
    background-color: var(--color-surface-default);
    box-shadow: none !important;
  }
}

/* ------------------------------------------------------------------ */
/* Collapsed sidebar rail (md / tablet) — Figma "Screen size = md".     */
/* ------------------------------------------------------------------ */
/* Injected by javascripts/sidebar-rail.js. Hidden by default; shown only
   in the tablet range, where Material would otherwise hide the nav behind
   the header hamburger. The rail's button opens the full sidebar drawer. */
.docs-rail {
  display: none;
}

@media screen and (max-width: 76.1875em) {
  .docs-rail {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: fixed;
    top: 2.4rem; /* below the sticky header */
    left: 0;
    bottom: 0;
    width: 40px;
    padding: var(--spacing-xs); /* 4px, per Figma */
    background-color: var(--color-surface-default);
    border-right: 1px solid var(--color-border-subtle);
    z-index: 2;
    /* The whole rail is the pressable target. */
    cursor: pointer;
  }

  .docs-rail__expand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radii-md);
    color: var(--color-text-secondary);
  }

  /* Hovering anywhere on the rail tints the whole rail and the icon chip. */
  .docs-rail:hover {
    background-color: var(--color-surface-hover);
  }

  .docs-rail:focus-visible {
    outline: 2px solid var(--color-border-focused);
    outline-offset: -2px;
  }

  /* Push page content clear of the fixed rail. */
  .md-main__inner {
    padding-left: 40px;
  }

  /* The rail's expand button replaces the header hamburger as the single
     nav opener in this range. */
  .md-header__button.md-icon[for="__drawer"] {
    display: none;
  }
}

.md-sidebar .md-nav__link {
  color: var(--color-text-secondary);
  border-radius: 0;
  font-size: 15px; /* Figma font-size/sm */
  line-height: 20px; /* Figma line-height/sm */
}

/* Labels wrap, but clamp to 2 lines with an ellipsis so deep/very long names
   never balloon a row to 4–6 lines. The full name is restored as a hover
   tooltip (title) by javascripts/sidebar-tooltips.js for clamped items. */
.md-sidebar .md-nav--primary .md-nav__link .md-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  min-width: 0;
}

/* Strip Material's list/item spacing — including the default 0.2rem flex
   gap between rows, which otherwise leaves a gap between a row's divider
   line and the next row's hover/selected background. */
.md-nav--primary .md-nav__list,
.md-nav--primary .md-nav__item {
  margin: 0;
  padding: 0;
  gap: 0;
}

/* Material gives the primary nav a small top margin, which left a 2px gap
   between the header line and the first row's fill once the sidebar was
   attached to the header. Remove it so the first row sits flush. */
.md-nav--primary {
  margin: 0;
}

/* Override Material's nested-list indent (.md-nav__list .md-nav__list,
   margin-left: 0.6rem) — indentation is handled by per-level row padding
   so the row box itself can stay full width. */
.md-nav--primary .md-nav__list .md-nav__list {
  margin-left: 0;
}

/* The container is the structural row wrapper — no padding/gap of its own;
   geometry is owned by the row rules below. */
.md-sidebar .md-nav__container {
  gap: 0;
  padding: 0;
}

/* ---- Top-level section rows -------------------------------------- */
/* Flat full-width rows divided by hairlines. The item border sits at the
   bottom of the whole item, so for an expanded section it reads as the
   divider AFTER the children (the section separator). */
.md-nav--primary > .md-nav__list > .md-nav__item {
  border-bottom: 1px solid var(--color-border-subtle);
}

/* When a section is expanded, also draw a divider directly UNDER its parent
   row — i.e. between the row and its children. Collapsed rows omit this (the
   item border above already sits right under the row), so there is never a
   double line. */
.md-nav--primary > .md-nav__list > .md-nav__item:has(> .md-nav__toggle:checked) > .md-nav__container,
.md-nav--primary > .md-nav__list > .md-nav__item:has(> .md-nav__toggle:checked) > label.md-nav__link {
  border-bottom: 1px solid var(--color-border-subtle);
}

/* 36px row. For section rows (a name link + a chevron), the NAME link fills
   the whole row and carries the padding so its background covers the full
   width; the chevron is positioned ABSOLUTELY on top at the right. Keying
   hover/selection to the name link then fills the entire row, while hovering
   the chevron (which sits on top, out of the name link's flow) never triggers
   the name link's hover — so the chevron toggles with no hover styling of its
   own, with zero reliance on :has(:hover). Bare-label sections and leaf links
   ARE the row, so they carry their own padding. */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__container,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link {
  display: flex;
  align-items: center;
  min-height: 36px; /* Figma nav-item height */
  margin: 0;
  color: var(--color-text-secondary);
  font-weight: 400; /* Figma font-weight/medium */
}

.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link {
  padding: 0 12px 0 24px; /* Figma spacing md / 2xl */
}

/* Section container: positioning context only; the name link owns padding. */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__container {
  position: relative;
  padding: 0;
}

/* Name link fills the whole row; right padding reserves room for the
   absolute chevron so text never runs under it. */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__container > .md-nav__link[href] {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 36px;
  margin: 0;
  padding: 0 32px 0 24px; /* left 24 (2xl); right reserves space for chevron */
  color: inherit;
  font-weight: inherit;
}

/* Chevron sits on top at the right edge — clickable, but outside the name
   link's hover flow. */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__container > label.md-nav__link {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 12px; /* Figma spacing/md */
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* The current section reads in primary text colour, and keeps it even on
   hover (the .md-sidebar scope + inner-link target out-specify the
   hover-colour reset below). */
/* The active top-level section reads in primary colour, and KEEPS it on hover.
   `--active` lives on the <li>, not on the section's toggle <label>, so the
   hover rule's `:not(.md-nav__link--active)` guard (below) doesn't recognise
   the label as active and would dim it to secondary on hover. Cover the hover
   and focus states here so the active section's colour never changes. */
.md-sidebar .md-nav--primary > .md-nav__list > .md-nav__item--active > .md-nav__container,
.md-sidebar .md-nav--primary > .md-nav__list > .md-nav__item--active > .md-nav__container > .md-nav__link,
.md-sidebar .md-nav--primary > .md-nav__list > .md-nav__item--active > .md-nav__container > .md-nav__link:hover,
.md-sidebar .md-nav--primary > .md-nav__list > .md-nav__item--active > .md-nav__container > .md-nav__link:focus,
.md-sidebar .md-nav--primary > .md-nav__list > .md-nav__item--active > .md-nav__link,
.md-sidebar .md-nav--primary > .md-nav__list > .md-nav__item--active > .md-nav__link:hover,
.md-sidebar .md-nav--primary > .md-nav__list > .md-nav__item--active > .md-nav__link:focus {
  color: var(--color-text-primary) !important;
}

/* Material tints EVERY --active link with the accent colour
   (.md-nav--primary .md-nav__item .md-nav__link--active { background: ... }).
   A parent section is --active whenever its child is selected, so it picks up
   that base tint — which then flickers away on hover (the neutraliser forces
   transparent). Only the selected page itself (a leaf `a[href]`, tinted by the
   gradient rule below) should carry a background; parent section toggle labels
   stay background-free in every state, so hovering a parent shows no effect. */
.md-sidebar .md-nav--primary label.md-nav__link--active,
.md-sidebar .md-nav--primary label.md-nav__link--active:hover,
.md-sidebar .md-nav--primary label.md-nav__link--active:focus {
  background-color: transparent !important;
  background-image: none !important;
}

/* The chevron is a state indicator, not a separate button. Its glyph
   (.md-nav__icon::after) is painted with currentColor, so inheriting the
   row's colour makes it blend seamlessly — secondary by default, primary
   when the section is active — instead of staying a fixed grey that clashes
   with the selected-row tint. The whole-row hover/fill already covers it,
   so it needs no hover/background of its own. */
.md-nav--primary .md-nav__container > label.md-nav__link {
  /* Clickable toggle that still reads as a plain indicator: it inherits the
     row colour and has no background of its own (the whole-row hover covers
     it), but clicking it expands/collapses the section. */
  color: inherit;
  background-color: transparent;
  cursor: pointer;
}

/* Use the official Verda chevron (overrides/.icons/verda/keyboard-arrow-right.svg)
   for the section disclosure glyph. Material's default glyph points left and is
   shown via `transform: rotate(180deg)` when collapsed; this arrow already
   points right, so reset the collapsed rotation to 0. Material's own
   `:checked ~ … rotate(90deg)` (higher specificity) still wins when expanded,
   turning this right arrow into a down arrow — matching keyboard-arrow-down. */
.md-nav--primary {
  --md-nav-icon--next: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 20'><path d='M12.813 10.0041C12.813 10.4541 12.643 10.8741 12.323 11.1942L8.52276 15.0044L7.78271 14.2644L11.5829 10.4541C11.823 10.2141 11.823 9.79409 11.5829 9.55407L7.78271 5.74385L8.52276 5.0038L12.323 8.81403C12.643 9.13405 12.813 9.55407 12.813 10.0041Z'/></svg>");
}
.md-nav--primary .md-nav__icon::after {
  transform: rotate(0deg);
}

/* ---- Nested children --------------------------------------------- */
/* Each nested group is inset and carries its own left guide line. The line
   is a pseudo-element (not a border) so it can start a little BELOW the
   group's top — leaving a gap from the parent row's divider instead of
   butting straight into it. Child rows still fill the group from the line's
   x to the right edge, so their hover/selected background touches the line;
   unlike top-level rows, nested rows do NOT bleed to the far-left edge. */
.md-nav--primary .md-nav[data-md-level] {
  position: relative;
}

/* Level 1 keeps the Figma 24px inset; deeper levels tighten so very long
   labels (e.g. Clusters › Instant Clusters › Tutorials › …) keep enough text
   width instead of wrapping into many lines in the 240px column. */
.md-nav--primary .md-nav[data-md-level="1"] {
  margin-left: 24px;
}

.md-nav--primary .md-nav[data-md-level="2"] {
  margin-left: 16px;
}

.md-nav--primary .md-nav[data-md-level="3"],
.md-nav--primary .md-nav[data-md-level="4"],
.md-nav--primary .md-nav[data-md-level="5"] {
  margin-left: 12px;
}

.md-nav--primary .md-nav[data-md-level]::before {
  content: "";
  position: absolute;
  left: 0;
  /* Symmetric gaps so the line clears both the parent's divider above and
     the section divider below. */
  top: 8px;
  bottom: 8px;
  width: 1px;
  background-color: var(--color-border-subtle);
}

.md-nav--primary .md-nav[data-md-level] .md-nav__item {
  border-bottom: 0;
}

/* Leaf rows — 32px min (Figma); vertical padding gives multi-line (wrapped)
   labels breathing room and separates adjacent items so they don't run
   together. Text indented 12px from the guide line. */
.md-nav--primary .md-nav[data-md-level] .md-nav__link {
  display: flex;
  align-items: center;
  min-height: 32px;
  margin: 0;
  padding: 6px 12px;
  font-weight: 400;
  color: var(--color-text-secondary);
}

/* Nested section rows: same model as top-level — the name link fills the
   group (from the guide line to the right edge) and the chevron is absolute
   on top, so hovering the chevron never fills the row. */
.md-nav--primary .md-nav[data-md-level] .md-nav__container {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 0;
}

.md-nav--primary .md-nav[data-md-level] .md-nav__container > .md-nav__link[href] {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 32px;
  padding: 6px 32px 6px 12px; /* left 12 indent; right reserves chevron space */
}

.md-nav--primary .md-nav[data-md-level] .md-nav__container > label.md-nav__link {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 12px; /* Figma spacing/md */
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* ---- Hover / active / focus -------------------------------------- */
/* The theme applies TWO hover/focus effects to every .md-nav__link via
   high-specificity/!important rules: a lightest-fg background tint AND a
   darkened text colour. Both are what made the chevron and section labels
   "light up". Kill both on every sidebar link (!important needed to beat the
   theme), so section name links, chevron toggle labels, and bare section
   labels show NO hover styling at all. Active links keep their own colour. */
.md-sidebar .md-nav--primary .md-nav__link:hover,
.md-sidebar .md-nav--primary .md-nav__link:focus {
  background-color: transparent !important;
}

.md-sidebar .md-nav--primary .md-nav__link:hover:not(.md-nav__link--active),
.md-sidebar .md-nav--primary .md-nav__link:focus:not(.md-nav__link--active) {
  color: var(--color-text-secondary) !important;
}

/* Re-enable a hover fill ONLY for actual destination pages — a leaf
   `a[href]` that is a DIRECT child of the list item. Sections (index-link
   containers and bare toggle labels alike) and the chevron stay clean, so
   every section behaves identically; only the selected state highlights
   them. Matches the Figma design (no hover state for sections). */
.md-sidebar .md-nav--primary .md-nav__item > .md-nav__link[href]:hover:not(.md-nav__link--active) {
  background-color: var(--color-surface-hover) !important;
}

/* Top-level sections with no index page render as a bare toggle label
   (no `.md-nav__container`, no `[href]`): the whole row is the toggle, with
   no separate navigable name. It is a pure toggle like the chevron, so it
   gets NO hover fill — only the transparent base (overriding Material's own
   heavier hover/expanded background). Hover fill is reserved for navigable
   targets (page links and section name links). */
.md-sidebar .md-nav--primary > .md-nav__list > .md-nav__item > label.md-nav__link,
.md-sidebar .md-nav--primary > .md-nav__list > .md-nav__item > label.md-nav__link:hover {
  background-color: transparent;
}

/* Selected page — Figma uses a subtle diagonal tint (transparent at the
   top-left fading to ~12% Verda bright-blue at the bottom-right) over the
   sidebar surface, with dark primary text at the same weight/size as the
   rest of the list. It is an overlay, so it reads correctly in both
   themes without a hard-coded base colour. */
/* Specificity must clear the nested-link colour rule
   (.md-nav--primary .md-nav[data-md-level] .md-nav__link), hence the
   explicit .md-nav--primary scope. */
/* Selected page — the active name link spans the full row (section index
   links and leaf pages alike), so the tint reaches both sides and full
   height on its own; no container-level rule is needed. */
.md-sidebar .md-nav--primary .md-nav__link--active[href] {
  /* Weight is intentionally left to inherit the surrounding row weight so
     the selected item never changes size relative to its siblings — only
     its colour darkens and the tint appears. */
  color: var(--color-text-primary);
  background-color: transparent;
  background-image: linear-gradient(
    149deg,
    rgb(25 92 199 / 0%) 0%,
    rgb(25 92 199 / 12%) 100%
  );
}

.md-sidebar .md-nav__link:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: -2px;
}

/* ------------------------------------------------------------------ */
/* Icons (:shortcodes: via twemoji span)                               */
/* ------------------------------------------------------------------ */
/* Material's default `vertical-align: text-top` leaves the icon above
   cap-height; `middle` centers it with the text. Size stays at
   Material's 1.125em — SVGs have internal padding, a 1em icon reads
   undersized next to bold text. */
.md-typeset .twemoji {
  vertical-align: middle;
}

/* ------------------------------------------------------------------ */
/* Code - brand-tinted inline chips and quiet block backgrounds.       */
/* ------------------------------------------------------------------ */
/* Inline code — Figma CodeTag: brand-tinted pill, brand text, 13px mono. */
.md-typeset :not(pre) > code {
  font-size: var(--docs-font-size-2xs); /* 13 */
  /* 16px line + 2px padding top/bottom = 20px, fitting the body/table line
     box exactly — a 20px line-height here would make the pill taller than the
     line and overlap stacked/wrapped pills (e.g. in narrow table cells). */
  line-height: 16px;
  font-weight: var(--font-weight-normal);
  font-family: var(--font-family-monospace), monospace;
  color: var(--color-text-brand);
  background-color: var(--color-surface-brand);
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  /* Vertical: 16px line + 1px border top/bottom = 18px, which sits inside the
     20px prose/table line box with a 2px gap. Any vertical padding here pushes
     the pill past 20px so stacked/wrapped pills overlap the adjacent line. */
  padding: 0 8px;
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: break-word;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Code block — Figma Codeblock: white outer frame with a subtle border and
   4px radius, holding a light-blue (#f6f9fd) code surface. Source Code Pro
   13/16, primary text. */
.md-typeset pre {
  position: relative;
  margin: 16px 0;
  background-color: var(--color-surface-brand);
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  overflow: hidden;
}

.md-typeset pre > code {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  max-height: 320px; /* Figma: long blocks scroll past 320px */
  overflow: auto;
  scrollbar-gutter: stable;
  /* Default (auto) scroll chaining: a wheel over a block that can't scroll
     (short, or only horizontal overflow) passes through to the page instead of
     trapping it. The page's own bounce is handled by overscroll-behavior-y:none
     on html/body (custom.css). */
  /* Break unbroken tokens (long URLs, hashes) mid-token when they'd overflow. */
  overflow-wrap: anywhere;
  font-size: var(--docs-font-size-2xs); /* 13 */
  line-height: 16px;
  color: var(--color-text-primary);
  background-color: var(--color-surface-brand); /* #f6f9fd */
  border: 0;
  border-radius: 0;
  /* 48px on the right keeps every line clear of the copy button (24px wide at
     right: 20px, see .md-code__nav below) — text wraps before reaching it. */
  padding: 8px 48px 8px 12px;
  /* Wrap long lines onto multiple lines instead of scrolling horizontally, so
     code never runs underneath the copy button (CS-640). */
  white-space: pre-wrap;
  word-break: normal;
}

/* Copy button (Zensical `.md-code__button`) — inset before the scrollbar,
   24px, transparent, secondary icon, per the Figma codeblock. */
/* Material wraps the copy button in a `.md-code__nav`, which is the absolutely
   positioned element — place THAT relative to the pre. */
.md-typeset pre > .md-code__nav,
.md-typeset .highlight .md-code__nav {
  position: absolute;
  top: 4px;
  right: 20px;
  z-index: 1;
  margin: 0;
  /* Material gives the nav its own grey fill (--md-code-bg-color--lighter, and
     a darker one on hover) plus .2rem padding — that's the grey box, and the
     padding pushed the 24px button off-centre. Drop both so only the icon
     shows, centred. !important beats Material's `:hover > .md-code__nav`. */
  padding: 0;
  background: transparent !important;
  /* Constrain to the button size — Material otherwise stretches the nav to the
     code's first-line height (~33px) and centres the button in it, dropping the
     icon a few px below the first code line. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 24px;
  height: 24px;
  overflow: hidden;
}

/* Flex-centre the icon so it sits on the optical centre (the default block +
   baseline ::after made the glyph sit low relative to the first code line). */
.md-typeset .md-code__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 4px;
  color: var(--color-text-secondary);
  background-color: transparent;
}

/* Use the official Verda "copy" glyph (overrides/.icons/verda/copy.svg) instead
   of Material's clipboard icon. The ::after is a currentColor-filled mask, so
   swap its mask image; sizing/centring stays Material's. */
.md-typeset .md-code__button::after {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.73479 13.2549V4.25488H4.44908V3.50488H3.02051V14.0049H9.44908C9.97765 14.0049 10.4348 13.7049 10.6777 13.2549H3.73479Z'/><path d='M12.3064 2.75488V11.0049C12.3064 11.4174 11.985 11.7549 11.5921 11.7549H5.87786V2.75488H12.3064ZM13.0207 2.00488H5.16357V12.5049H11.5921C12.3779 12.5049 13.0207 11.8299 13.0207 11.0049V2.00488Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.73479 13.2549V4.25488H4.44908V3.50488H3.02051V14.0049H9.44908C9.97765 14.0049 10.4348 13.7049 10.6777 13.2549H3.73479Z'/><path d='M12.3064 2.75488V11.0049C12.3064 11.4174 11.985 11.7549 11.5921 11.7549H5.87786V2.75488H12.3064ZM13.0207 2.00488H5.16357V12.5049H11.5921C12.3779 12.5049 13.0207 11.8299 13.0207 11.0049V2.00488Z'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Transparent in every state (the Figma button has no fill); just shift the
   icon to brand on hover. */
.md-typeset .md-code__button:hover {
  color: var(--color-text-brand);
  background-color: transparent;
}

/* On copy, swap the glyph to a checkmark (success colour) for ~2s instead of
   Material's toast. The `--copied` class is toggled by javascripts/code-copy.js;
   the toast itself is suppressed below. */
.md-typeset .md-code__button--copied {
  color: var(--color-icon-success) !important;
}

.md-typeset .md-code__button--copied::after {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
}

/* Suppress the "Copied to clipboard" toast — the checkmark is the feedback. */
.md-dialog {
  display: none !important;
}

/* ------------------------------------------------------------------ */
/* Tables - compact cell text, secondary body color, semibold headers. */
/* ------------------------------------------------------------------ */
.md-typeset table:not([class]) {
  font-size: var(--docs-font-size-xs);
  line-height: var(--docs-line-height-sm);
  border-radius: 4px;
}

.md-typeset table:not([class]) :is(th, td) {
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: left;
}

.md-typeset table:not([class]) th {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.md-typeset table:not([class]) td {
  color: var(--color-text-primary);
}

/* ------------------------------------------------------------------ */
/* Admonitions — a bold title (type label "Note"/"Warning"/… or a custom title)
   on its own line, with the body below. No icon. Light tinted surface, thin
   full border, 4px radius, 12px padding. */
/* ------------------------------------------------------------------ */
.md-typeset .admonition,
.md-typeset details {
  position: relative;
  box-sizing: border-box;
  margin: 16px 0;
  padding: 12px;
  font-size: 15px;
  line-height: 20px;
  color: var(--color-text-primary);
  /* default = info; per-type rules below set the surface/border tint */
  background-color: var(--color-surface-info);
  border: 1px solid var(--color-border-info);
  border-radius: 4px;
  box-shadow: none;
}

/* Hide the title row entirely — admonitions show body text only. Note: this
   also hides any custom title (CSS can't distinguish an auto type-label from a
   custom title), so avoid putting essential info in a `!!! note "…"` title. */
.md-typeset .admonition > .admonition-title,
.md-typeset details > summary {
  display: none;
}

/* Drop Material's summary fold marker (details aren't used, but be safe). */
.md-typeset details > summary::after {
  display: none;
}

/* Body sits beside the icon. Zero every body block's own margins so the row
   stays compact, then add spacing/xs (4px) between consecutive body blocks
   (paragraph spacing per the design). The `html` prefix matches Material's own
   specificity for `html .md-typeset .admonition > :last-child`. */
html .md-typeset .admonition > :not(.admonition-title),
html .md-typeset details > :not(summary) {
  margin-top: 0;
  margin-bottom: 0;
}
html .md-typeset .admonition > :not(.admonition-title) + :not(.admonition-title),
html .md-typeset details > :not(summary) + :not(summary) {
  margin-top: 4px;
}

/* Suppress the base theme's admonition icon (::before). This design has no
   icon, so we must hide the vendor glyph explicitly — merely not defining our
   own ::before lets the stock icon reappear (overlapping the title text). Our
   selector matches the base's specificity and loads later, so it wins. */
.md-typeset .admonition > .admonition-title::before,
.md-typeset details > summary::before {
  content: none;
  display: none;
}

/* info — light blue surface. */
.md-typeset .admonition.info,
.md-typeset details.info {
  background-color: var(--color-surface-info);
  border-color: var(--color-border-info);
}

/* note / abstract — neutral grey surface. */
.md-typeset .admonition.note,
.md-typeset .admonition.abstract,
.md-typeset details.note {
  background-color: var(--color-surface-sunken);
  border-color: var(--color-border-subtle);
}

/* tip / success — green surface. */
.md-typeset .admonition.tip,
.md-typeset .admonition.success,
.md-typeset .admonition.check,
.md-typeset details.tip {
  background-color: var(--color-surface-success);
  border-color: var(--color-border-success);
}

/* warning / caution — orange surface. */
.md-typeset .admonition.warning,
.md-typeset .admonition.caution,
.md-typeset details.warning {
  background-color: var(--color-surface-warning);
  border-color: var(--color-border-warning);
}

/* danger / error / bug — red surface. */
.md-typeset .admonition.danger,
.md-typeset .admonition.error,
.md-typeset .admonition.bug,
.md-typeset details.danger {
  background-color: var(--color-surface-critical);
  border-color: var(--color-border-critical);
}

/* ------------------------------------------------------------------ */
/* Right "On this page" TOC (Figma node 27521:6046) — 240px column, 12px
   left padding; monospace overline label; 13/16 items in secondary, brand
   when active (no bar/background); H3 sub-headings indented 8px. */
/* ------------------------------------------------------------------ */
.md-sidebar--secondary {
  width: 240px;
}

.md-sidebar--secondary .md-sidebar__inner {
  padding-left: 12px;
}

/* "On this page" label — monospace overline, primary. Zero Material's own
   left padding so the label's left edge lines up with the nav items (both at
   the container's 12px inset). */
.md-sidebar--secondary .md-nav__title {
  margin: 0;
  padding-left: 0;
  font-family: var(--font-family-monospace), monospace;
  font-size: 13px;
  line-height: 16px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.39px;
  color: var(--color-text-primary);
  text-transform: none;
}

/* Items — Source Sans 3 13/16, secondary, 4px vertical padding. */
.md-sidebar--secondary .md-nav__item {
  margin: 0;
  padding: 0;
}

.md-sidebar--secondary .md-nav__link {
  margin: 0;
  padding: 4px 0;
  font-size: 13px;
  line-height: 16px;
  font-weight: var(--font-weight-normal); /* Material bolds active/passed to 500 */
  color: var(--color-text-secondary);
  background: none !important; /* text-only highlight — never a background pill */
}

/* Material wraps the TOC label text in `.md-ellipsis > .md-typeset`, and
   `.md-typeset` sets its own colour — which overrode the link colour, so the
   active/hover colour never reached the visible text. Make the inner spans
   inherit the link's colour. */
.md-sidebar--secondary .md-nav__link .md-ellipsis,
.md-sidebar--secondary .md-nav__link .md-typeset {
  color: inherit;
  /* `.md-typeset` sets its own 15px; without these the label rendered at 15px
     (too large) instead of the link's 13px (font-size/2xs). */
  font-size: inherit;
  line-height: inherit;
}

/* Active heading = brand colour, SAME weight (the design doesn't bold it). */
.md-sidebar--secondary .md-nav__link--active,
.md-sidebar--secondary .md-nav__link:hover,
.md-sidebar--secondary .md-nav__link:focus {
  color: var(--color-text-brand);
  font-weight: var(--font-weight-normal);
}

/* H3 sub-headings indent 8px under their H2 parent. */
.md-sidebar--secondary .md-nav__list .md-nav__list {
  margin-left: 8px;
}

/* Some source headings are authored with inline bold (e.g. `#### **Title**`),
   so Material copies a <strong> into the TOC entry and it renders bold. Keep
   TOC entries uniform — inline emphasis inherits the item's (normal) weight. */
.md-sidebar--secondary .md-nav__link strong,
.md-sidebar--secondary .md-nav__link b {
  font-weight: inherit;
}

/* ------------------------------------------------------------------ */
/* Page "last updated" meta row (Figma) — a divider, then an auto-renew
   icon + "Page last updated {date}" in 14/20 secondary. The label text and
   icon come from the overridden partials/source-file.html. */
/* ------------------------------------------------------------------ */
.md-source-file {
  margin: 24px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-secondary);
}

.md-source-file .md-source-file__fact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 14px;
}

.md-source-file .md-source-file__fact .md-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
}

.md-source-file .md-source-file__fact .md-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* ------------------------------------------------------------------ */
/* Top nav bar (Figma "Top-nav-bar")                                   */
/* ------------------------------------------------------------------ */

/* "Documentation" wordmark — monospace overline in primary text. Material
   shows the site title (and swaps to the page title on scroll); style the
   site-title topic as the wordmark. */
.md-header__title {
  font-family: var(--font-family-monospace), monospace;
  font-weight: var(--font-weight-semibold);
}

.md-header__topic > .md-ellipsis {
  font-size: 13px; /* Figma font-size/2xs */
  line-height: 16px; /* Figma line-height/xs */
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.03em; /* Figma overline tracking (~0.39px on 13px) */
  color: var(--color-text-primary);
  /* Optically centre the wordmark against the larger logo (the monospace
     line-box and the logo's lowercase optical centre leave it sitting high). */
  position: relative;
  top: 2px;
}

/* Right-side quick links (API / SDK / Open console) — brand-coloured
   button-style links, injected by javascripts/navbar.js after the theme
   toggle and before search. */
.md-header__links {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
}

.md-header__link {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 4px 16px; /* Figma spacing xs / lg, pinned in px (rem inflates at the docs' root) */
  border-radius: var(--radii-md);
  font-family: var(--font-family-main), sans-serif;
  font-size: 14px; /* Figma font-size/xs */
  line-height: 16px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-brand);
  white-space: nowrap;
  text-decoration: none;
  transition:
    color 120ms ease,
    background-color 120ms ease;
}

/* Hover intentionally omitted — the official design has no navbar hover
   state yet; add it back once specced. */

.md-header__link:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: -2px;
}

/* SDK is a dropdown in the desktop quick links, so visitors can choose the
   language-specific client without leaving the navigation bar. */
.md-header__sdk {
  position: relative;
}

.md-header__sdk-toggle {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.md-header__sdk-chevron {
  width: 14px;
  height: 14px;
  margin-left: 4px;
  transition: transform 120ms ease;
}

.md-header__sdk.is-open .md-header__sdk-chevron {
  transform: rotate(180deg);
}

.md-header__sdk-menu {
  display: none;
  position: absolute;
  top: calc(100% + var(--spacing-sm));
  right: 0;
  min-width: 132px;
  flex-direction: column;
  padding: var(--spacing-xs);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radii-md);
  box-shadow: 0 6px 24px rgb(5 21 49 / 12%);
  z-index: 10;
}

.md-header__sdk.is-open .md-header__sdk-menu {
  display: flex;
}

.md-header__sdk-link {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radii-sm);
  color: var(--color-text-brand);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  line-height: 16px;
  text-decoration: none;
  white-space: nowrap;
}

.md-header__sdk-link:hover,
.md-header__sdk-link:focus-visible {
  background-color: var(--color-surface-hover);
  color: var(--color-text-brand);
}

.md-header__sdk-link:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: -2px;
}

/* Show only the site-title wordmark, vertically centred. Material stacks two
   absolutely-positioned topics (site title + page title) to swap them on
   scroll; the design just shows "Documentation", so make the topic static,
   centre it, and hide the page-title topic. */
.md-header__ellipsis {
  display: flex;
  align-items: center;
}

.md-header__topic {
  position: static;
}

.md-header__topic ~ .md-header__topic {
  display: none;
}

/* No repository link in the navbar (the SDK quick-link covers GitHub). Material
   still renders an empty `.md-header__source` slot (~230px + margin) flush
   right, which pushed the controls toward the centre. Hide it so the toggle /
   links / search cluster sits flush to the right edge, per the Figma design. */
.md-header__source {
  display: none;
}

/* Align the navbar with the content container on desktop. The header inner
   shares the 1200px `.md-grid` cap, but its 8px padding (plus the logo's
   margin) left the logo ~12px right of the sidebar's left edge and the search
   box ~8px short of the TOC's right edge. Zero them so the logo lines up with
   the primary sidebar (container left) and the search/controls line up with
   the right "On this page" column (container right). Desktop only — narrow
   layouts keep the breathing room. */
@media screen and (min-width: 76.25em) {
  .md-header__inner.md-grid {
    padding-left: 0;
    padding-right: 0;
  }

  .md-header__inner.md-grid > .md-header__button.md-logo {
    margin-left: 0;
  }
}

/* Theme toggle — segmented light/dark control (Figma). The control is
   injected into the palette form by navbar.js; hide Material's default
   cycling palette button(s). The active segment is highlighted from the
   body's data-md-color-scheme, so no JS is needed for state. */
.md-header__option > label.md-header__button {
  display: none !important;
}

.md-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px; /* Figma spacing/2xs, pinned px */
  padding: 2px;
  background-color: var(--color-surface-sunken);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radii-md);
}

.md-theme-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px; /* Figma segment height */
  height: 20px;
  border: 1px solid transparent;
  border-radius: var(--radii-md);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition:
    color 120ms ease,
    background-color 120ms ease,
    border-color 120ms ease;
}

.md-theme-toggle__btn svg {
  width: 16px;
  height: 16px;
}

[data-md-color-scheme="default"] .md-theme-toggle__btn[data-scheme="default"],
[data-md-color-scheme="slate"] .md-theme-toggle__btn[data-scheme="slate"] {
  background-color: var(--color-surface-raised);
  border-color: var(--color-border-brand);
  color: var(--color-text-brand);
}

.md-theme-toggle__btn:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: -2px;
}

/* Search — match the Figma 184px input-style box: light raised surface,
   action border, search icon + "Search" placeholder, no keyboard hint.
   Material renders the header search as a button with a ::before magnifier
   and a ::after "⌘K" chip; restyle the box, recolour the icon, hide the
   chip. (On md/sm Material collapses this to the search icon already.) */
.md-search__button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-sm);
  width: 184px;
  height: 32px;
  margin: 0;
  padding: 0 var(--spacing-sm);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border-action);
  border-radius: var(--radii-md);
  color: var(--color-text-secondary);
  font-size: 15px;
  font-weight: var(--font-weight-normal);
  cursor: pointer;
  /* Override Material's larger padding-left (reserved for an absolute icon). */
  padding-left: var(--spacing-sm) !important;
  padding-right: var(--spacing-sm) !important;
}

.md-search__button::before {
  position: static;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  background-color: var(--color-text-secondary);
}

.md-search__button::after {
  display: none;
}

/* Neutralize Material's default search-button hover (it darkens the box) so
   the navbar has no hover state for now — keep the base look on hover. */
.md-search__button:hover {
  background-color: var(--color-surface-raised) !important;
  color: var(--color-text-secondary) !important;
}

.md-search__button:hover::before {
  background-color: var(--color-text-secondary);
}

/* Hamburger links menu (Figma md/sm) — the inline links collapse into a
   dropdown below the desktop breakpoint. Hidden on desktop. */
.md-header__menu-wrap {
  display: none;
}

.md-header__menu-toggle {
  display: none;
}

/* Collapse to the Figma "md" navbar at 60em — the SAME point Material
   collapses the inline search box to its icon — so the two switch together.
   Above 60em: lg (inline links + search box, no burger). Below: md (search
   icon + burger), matching the Figma variants. (The sidebar rail still
   collapses at its own, wider breakpoint — navbar and sidebar are decoupled.) */
@media screen and (max-width: 59.9375em) {
  /* Inline links give way to the hamburger. */
  .md-header__links {
    display: none;
  }

  /* Cluster the controls at the right with even gaps (Figma md): the inline
     links no longer separate the toggle from the search icon. */
  .md-header__option {
    margin-right: var(--spacing-xs);
  }

  .md-header__menu-wrap {
    display: block;
    position: relative;
    margin-left: var(--spacing-xs);
  }

  .md-header__menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radii-md);
    color: var(--color-text-secondary);
    cursor: pointer;
  }

  .md-header__menu {
    display: none;
    position: absolute;
    top: calc(100% + var(--spacing-sm));
    right: 0;
    min-width: 180px;
    flex-direction: column;
    padding: var(--spacing-xs);
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radii-md);
    box-shadow: 0 6px 24px rgb(5 21 49 / 12%);
    z-index: 10;
  }

  .md-header__menu-toggle:checked ~ .md-header__menu {
    display: flex;
  }

  .md-header__menu-link {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radii-sm);
    color: var(--color-text-brand);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
    text-decoration: none;
    white-space: nowrap;
  }
}


/* The mobile sidebar drawer repeats "Documentation" (Material's site title)
   at the top. The logo there is already hidden (custom.css), so that row is
   just the redundant word — drop it; the header wordmark already covers it. */
.md-nav--primary > .md-nav__title {
  display: none !important;
}

/* ---- sm (mobile) navbar — Figma "Screen size = sm" --------------- */
/* The single row can't fit logo + wordmark + controls, so stack: row 1 =
   logo (left) + controls (right), row 2 = the "Documentation" wordmark.
   The bar grows to two rows (~80px). */
@media screen and (max-width: 29.9375em) {
  .md-header,
  .md-header__inner {
    height: auto;
  }

  .md-header__inner {
    flex-wrap: wrap;
    align-content: center;
    row-gap: 8px; /* between the two rows */
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* Wordmark drops to its own full-width row, below the logo. Material gives
     the title a fixed 48px height (the single-row header height) — collapse
     it so the row is just the wordmark. */
  .md-header__title {
    order: 10;
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    margin: 0;
  }

  .md-header__topic > .md-ellipsis {
    top: 0; /* reset the lg optical nudge — no logo beside it on this row */
  }

  /* Group the controls to the right of row 1. */
  .md-header__option {
    margin-left: auto;
  }

  /* Material's search-toggle icon (shown only below desktop) is 36px tall with
     4px block margins → 44px, which inflates row 1. Pin it to the 32px control
     height with no margin so row 1 = 32px and the bar lands at ~80px. */
  .md-header__button.md-icon[for="__search"] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
  }

  /* The collapsed sidebar rail must clear the now-taller (two-row) header. */
  .docs-rail {
    top: 80px;
  }
}

/* ------------------------------------------------------------------ */
/* "Ask" menu — dropdown at the top of every article, rendered by        */
/* overrides/partials/actions.html; behaviour in javascripts/ai-actions.js.*/
/* Mirrors GitBook's upstream "Ask" affordance.  */
/* Scoped under .md-typeset because it sits inside the article           */
/* (.md-typeset a would otherwise win the cascade on the link items).    */
/* ------------------------------------------------------------------ */
.md-typeset .md-ask {
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin: 0 0 8px;
}

.md-typeset .md-ask__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 8px 0 12px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radii-md);
  background-color: var(--color-surface-raised);
  color: var(--color-text-body);
  font-family: var(--font-family-main), sans-serif;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 120ms ease,
    color 120ms ease,
    background-color 120ms ease;
}

.md-typeset .md-ask__toggle:hover,
.md-typeset .md-ask__toggle:focus-visible,
.md-typeset .md-ask--open .md-ask__toggle {
  border-color: var(--color-border-brand);
  color: var(--color-text-brand);
  background-color: var(--color-surface-hover);
}

.md-typeset .md-ask__icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.md-typeset .md-ask__chevron {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform 150ms ease;
}

.md-typeset .md-ask--open .md-ask__chevron {
  transform: rotate(180deg);
}

/* Popover panel */
.md-typeset .md-ask__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 5;
  min-width: 320px;
  max-width: calc(100vw - 2.4rem);
  padding: 6px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radii-md);
  background-color: var(--color-surface-raised);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.14),
    0 2px 8px rgba(0, 0, 0, 0.08);
}

.md-typeset .md-ask__menu[hidden] {
  display: none;
}

.md-typeset .md-ask__group {
  padding: 4px 0;
}

.md-typeset .md-ask__group:not(:last-child) {
  border-bottom: 1px solid var(--color-border-subtle);
}

.md-typeset .md-ask__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: var(--radii-sm);
  background: transparent;
  color: var(--color-text-body);
  font-family: var(--font-family-main), sans-serif;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.md-typeset .md-ask__item:hover,
.md-typeset .md-ask__item:focus-visible {
  background-color: var(--color-surface-hover);
}

.md-typeset .md-ask__item-icon {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
  color: var(--color-text-secondary);
}

.md-typeset .md-ask__item:hover .md-ask__item-icon {
  color: var(--color-text-brand);
}

.md-typeset .md-ask__item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.md-typeset .md-ask__item-label {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  color: var(--color-text-body);
}

.md-typeset .md-ask__item-desc {
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-text-secondary);
}

.md-typeset .md-ask__ext {
  font-size: 11px;
  color: var(--color-text-secondary);
}