/* =========================================================================
   Mango Inference docs theme: the console's design system on Material
   Rationale: .claude/decisions/0017-adopt-frontend-design-system.md
   Tokens:    tokens.css (verbatim copy of the console's values; don't edit)
   Fonts:     fonts.css

   Colors are tokens from tokens.css, or literals derived from one (noted
   inline); hex, rgb(a) or hsl only, never color-mix(). The console sizes
   things in px on a 16px root; Material's root is 20px (22/24px on very
   wide screens). Text converts to rem (14px = 0.7rem, 16px = 0.8rem);
   header chrome and radii stay px to match the console exactly.

    1. Docs-only values     2. Map onto Material    3. Typography
    4. Header               5. Navigation tabs      6. Sidebar
    7. Content + TOC        8. Links + buttons      9. Cards + hero
   10. Admonitions         11. Content tabs        12. Code
   13. Tables              14. Footer
   ========================================================================= */

/* 1. Docs-only values ------------------------------------------------------ */
:root {
  /* The console's radius scale (--radius is 0.75rem on a 16px root), in px
     so it doesn't grow 25% on Material's 20px root. */
  --mi-radius-md: 10px;
  --mi-radius-lg: 12px;
  --mi-radius-xl: 16px;
  --mi-radius-full: 9999px;

  /* Header rows, in px like the console's chrome. Shorter than the console's
     72px top bar because the docs stack the tabs row under it (ADR 0017). */
  --mi-header-height: 56px;
  --mi-tabs-height: 40px;

  /* theme.font is false; point Material at the faces in fonts.css. */
  --md-text-font: "DM Sans";
  --md-code-font: "JetBrains Mono";
}

[data-md-color-scheme="default"] {
  /* The deliberate difference from the console (ADR 0017): light-mode link
     text. The console's --link (#b4740a) is 3.60:1 on --background; #9c6408
     is 4.61:1, the AA option the console's own DESIGN.md lists. */
  --docs-link: #9c6408;
  /* Mango at 12% flattened over white, so --docs-link keeps 4.61:1 on it. */
  --mi-gold-wash: #fff6e4;
  --mi-card-ring: rgba(21, 24, 45, 0.1); /* ring-foreground/10 */
  --mi-row-hover: rgba(245, 246, 250, 0.5); /* bg-muted/50 */
  --mi-seg-track: var(--border);
  --mi-seg-fg: var(--foreground-secondary);
  --mi-seg-active-bg: var(--card);
  --mi-seg-active-border: var(--border);
  --mi-outline-border: var(--border);
  --mi-outline-bg: var(--background);
  --mi-outline-bg-hover: var(--muted);
  --mi-logotype: #4d4a49; /* the logo's "INFERENCE", a brand constant */

  /* Prism One Light, as the console's CodeBlock uses. */
  --mi-code-base: hsl(230, 8%, 24%);
  --mi-code-comment: hsl(230, 4%, 64%);
  --mi-code-keyword: hsl(301, 63%, 40%);
  --mi-code-string: hsl(119, 34%, 47%);
  --mi-code-number: hsl(35, 99%, 36%);
  --mi-code-function: hsl(221, 87%, 60%);
  --mi-code-tag: hsl(5, 74%, 59%);
}

[data-md-color-scheme="slate"] {
  --docs-link: var(--link); /* #ffb81c, as the console */
  --mi-gold-wash: rgba(255, 184, 28, 0.12);
  --mi-card-ring: rgba(241, 241, 245, 0.1);
  --mi-row-hover: rgba(28, 33, 64, 0.5);
  --mi-seg-track: var(--accent);
  --mi-seg-fg: var(--muted-foreground);
  --mi-seg-active-bg: var(--color-navy-600);
  --mi-seg-active-border: var(--input);
  --mi-outline-border: var(--input);
  --mi-outline-bg: rgba(255, 255, 255, 0.048); /* bg-input/30 */
  --mi-outline-bg-hover: rgba(255, 255, 255, 0.08); /* bg-input/50 */
  --mi-logotype: #ffffff;

  /* Prism One Dark */
  --mi-code-base: hsl(220, 14%, 71%);
  --mi-code-comment: hsl(220, 10%, 40%);
  --mi-code-keyword: hsl(286, 60%, 67%);
  --mi-code-string: hsl(95, 38%, 62%);
  --mi-code-number: hsl(29, 54%, 61%);
  --mi-code-function: hsl(207, 82%, 66%);
  --mi-code-tag: hsl(355, 65%, 65%);
}

/* 2. Map onto Material ----------------------------------------------------- */
/* `:root [data-md-color-scheme]` is one step more specific than Material's
   own scheme rules and ties palette.css's scheme+primary rules (later wins),
   so a visitor whose saved palette still says "amber" gets these too. */
:root [data-md-color-scheme="default"],
:root [data-md-color-scheme="slate"] {
  --md-default-fg-color: var(--foreground);
  --md-default-fg-color--light: var(--muted-foreground);
  --md-default-fg-color--lighter: var(--border-strong);
  --md-default-fg-color--lightest: var(--border);
  --md-default-bg-color: var(--background);

  --md-primary-fg-color: var(--primary);
  --md-primary-fg-color--light: var(--primary-hover);
  --md-primary-fg-color--dark: var(--color-gold-600);
  --md-primary-bg-color: var(--primary-foreground);
  --md-primary-bg-color--light: var(--muted-foreground);
  --md-accent-fg-color: var(--docs-link);
  --md-accent-fg-color--transparent: rgba(255, 184, 28, 0.12);
  --md-accent-bg-color: var(--primary-foreground);
  --md-accent-bg-color--light: var(--muted-foreground);

  --md-typeset-color: var(--foreground);
  --md-typeset-a-color: var(--docs-link);
  --md-typeset-mark-color: rgba(255, 184, 28, 0.35);
  --md-typeset-table-color: var(--border);
  --md-typeset-table-color--light: var(--mi-row-hover);

  --md-code-fg-color: var(--mi-code-base);
  --md-code-bg-color: var(--muted);
  --md-code-hl-color: var(--primary);
  --md-code-hl-color--light: rgba(255, 184, 28, 0.12);
  --md-code-hl-number-color: var(--mi-code-number);
  --md-code-hl-special-color: var(--mi-code-tag);
  --md-code-hl-function-color: var(--mi-code-function);
  --md-code-hl-constant-color: var(--mi-code-number);
  --md-code-hl-keyword-color: var(--mi-code-keyword);
  --md-code-hl-string-color: var(--mi-code-string);
  --md-code-hl-name-color: var(--mi-code-base);
  --md-code-hl-operator-color: var(--mi-code-function);
  --md-code-hl-punctuation-color: var(--mi-code-base);
  --md-code-hl-comment-color: var(--mi-code-comment);
  --md-code-hl-generic-color: var(--mi-code-comment);
  --md-code-hl-variable-color: var(--mi-code-function);

  --md-admonition-fg-color: var(--foreground);
  --md-admonition-bg-color: var(--card);

  --md-footer-fg-color: var(--foreground);
  --md-footer-fg-color--light: var(--foreground-secondary);
  --md-footer-fg-color--lighter: var(--muted-foreground);
  --md-footer-bg-color: var(--background);
  --md-footer-bg-color--dark: var(--background);

  /* The console uses shadows sparingly: Tailwind's defaults, none on cards. */
  --md-shadow-z1: none;
  --md-shadow-z2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --md-shadow-z3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* 3. Typography ------------------------------------------------------------ */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The console's signature selection. */
::selection {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.md-typeset {
  font-size: 0.8rem; /* Body 16/24 */
  line-height: 1.5;
}

/* The console's type scale (DESIGN.md): Heading 24/32 Bold, Heading 18/28
   SemiBold, Body 16/24 SemiBold for h3. */
.md-typeset h1 {
  margin: 0 0 1em;
  color: var(--foreground);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.333;
  letter-spacing: -0.025em;
}

.md-typeset h2 {
  margin: 1.8em 0 0.6em;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.556;
  letter-spacing: -0.01em;
}

.md-typeset h3 {
  margin: 1.6em 0 0.5em;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
}

.md-typeset h4 {
  font-weight: 600;
}

/* 4. Header ---------------------------------------------------------------- */
/* The console's top bar (layout/top-bar.tsx): white (navy in dark), bottom
   border, px-4 sm:px-6. 56px, not the console's 72px: the sticky tabs row
   stays below it (ADR 0007), and together they read too tall at 72px.
   Markup: overrides/partials/header.html. */
.md-header {
  border-bottom: 1px solid var(--sidebar-border);
  background-color: var(--sidebar);
  color: var(--sidebar-foreground);
}

/* The console's top bar has a border, not a shadow. */
.md-header--shadow {
  box-shadow: none;
}

.md-header__inner {
  height: var(--mi-header-height);
  padding: 0 16px;
}

@media screen and (min-width: 40em) {
  .md-header__inner {
    padding: 0 24px;
  }
}

/* Logo: always visible (Material hides it below 76.25em). */
.md-header__button.mi-header__brand {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 4px;
  color: var(--mi-logotype);
}

/* Material fades header buttons on focus and hover; the console's logo doesn't. */
.md-header__button.mi-header__brand:is(:focus, :hover) {
  opacity: 1;
}

/* The drawer selector repeats Material's own qualifiers so it wins on order. */
.md-header__button.mi-header__brand svg,
.md-nav__title .md-nav__button.md-logo svg {
  width: auto;
  height: 24px; /* the console's h-6 */
}

.md-nav__button.md-logo {
  color: var(--mi-logotype);
}

.mi-header__mark {
  display: none;
}

/* [dir]: Material sets this margin in [dir="ltr"]/[dir="rtl"] rules. */
[dir] .md-header__title {
  height: var(--mi-header-height);
  margin-inline: 12px 8px;
  font-size: 14px;
  line-height: var(--mi-header-height);
}

.md-header__topic:first-child {
  font-weight: 500;
}

.mi-header__label {
  color: var(--muted-foreground);
}

/* Theme toggle: the console's round icon button (size-9, bg-border). The
   `label` ties Material's `.md-option:checked + label:not([hidden])`
   (display: block once a scheme is picked) so this wins on order. */
.md-header__option > label.md-header__button:not([hidden]) {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0 0 0 8px; /* the top bar's gap-2 */
  padding: 0;
  border-radius: var(--mi-radius-full);
  background-color: var(--border);
  color: var(--foreground);
  transition: background-color 150ms ease-out;
}

/* Material fades header buttons on hover; the console darkens the fill only. */
.md-header__option > .md-header__button:not([hidden]):hover {
  background-color: var(--border-strong);
  opacity: 1;
}

.md-header__option > .md-header__button svg {
  width: 18px;
  height: 18px;
}

/* "Go to console": the console's header pill (layout/header-pill.ts). */
.mi-console-pill {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  height: 32px; /* h-8 */
  /* The gap is the pill's own: Material collapses the toggle while search
     is open, so a margin on the toggle would vanish with it. */
  margin-inline-start: 8px;
  padding: 0 16px 0 20px; /* pl-5 pr-4 */
  border: 1px solid var(--border);
  border-radius: var(--mi-radius-full);
  background-color: var(--background);
  color: var(--foreground);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}

.mi-console-pill:is(:focus, :hover) {
  border-color: var(--border-strong);
  background-color: var(--muted);
  color: var(--foreground);
}

.mi-console-pill:focus-visible,
.md-header__option > .md-header__button:focus-visible {
  outline: 3px solid rgba(255, 184, 28, 0.5);
  outline-offset: 2px;
}

/* Drawer title bar (below 76.25em Material paints it in the primary color). */
.md-nav--primary .md-nav__title[for="__drawer"] {
  border-bottom: 1px solid var(--sidebar-border);
  background-color: var(--sidebar);
  color: var(--sidebar-foreground);
}

/* Search: the console's pill input, from 60em (below, it's a full-screen
   modal opened from the icon). */
@media screen and (min-width: 60em) {
  .md-search__form {
    height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--mi-radius-full);
    background-color: var(--background);
    transition: background-color 150ms ease-out, border-color 150ms ease-out;
  }

  .md-search__form:hover {
    border-color: var(--border-strong);
    background-color: var(--muted);
  }

  .md-search__input {
    font-size: 14px;
  }

  /* Material colors this icon as text on a gold header (navy in both
     schemes); follow the header's own text color instead. */
  .md-search__input + .md-search__icon {
    color: var(--sidebar-foreground);
  }

  [data-md-toggle="search"]:checked ~ .md-header .md-search__form {
    border-radius: var(--mi-radius-lg) var(--mi-radius-lg) 0 0;
    background-color: var(--card);
  }

  /* [dir]: Material sets these corners in [dir="ltr"]/[dir="rtl"] rules. */
  [dir] .md-search__output {
    border-radius: 0 0 var(--mi-radius-lg) var(--mi-radius-lg);
  }
}

/* Narrow screens: the rocket mark, no console pill. */
@media screen and (max-width: 59.984375em) {
  .mi-header__lockup,
  .mi-console-pill {
    display: none;
  }

  .mi-header__mark {
    display: block;
  }
}

/* Offsets for the header's own heights. Material's JS re-measures the header
   for the sidebars; these are the CSS fallbacks (before JS runs) and the
   anchor offsets, which are CSS only. 1.2rem = Material's 24px gap; the tabs
   row shows from 76.25em. */
.md-typeset :target {
  --md-scroll-margin: calc(var(--mi-header-height) + 1.2rem);
}

@media screen and (min-width: 60em) {
  .md-sidebar--secondary {
    top: var(--mi-header-height);
  }
}

@media screen and (min-width: 76.25em) {
  .md-header--lifted ~ .md-container .md-sidebar {
    top: calc(var(--mi-header-height) + var(--mi-tabs-height));
  }

  .md-header--lifted ~ .md-container .md-typeset :target {
    --md-scroll-margin: calc(var(--mi-header-height) + var(--mi-tabs-height) + 1.2rem);
  }
}

/* 5. Navigation tabs ------------------------------------------------------- */
.md-tabs {
  background-color: transparent;
  color: var(--foreground-secondary);
}

/* A 40px row (Material's is 2.4rem); the label fills it, centred by its
   line height, so the streak below sits the same 3px off the row's edge. */
.md-tabs__item {
  height: var(--mi-tabs-height);
}

.md-tabs__link {
  margin-top: 0;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: var(--mi-tabs-height);
  opacity: 1;
  transition: color 150ms ease-out;
}

.md-tabs__link:is(:focus, :hover) {
  color: var(--foreground);
}

.md-tabs__item--active > .md-tabs__link {
  position: relative;
  color: var(--foreground);
  font-weight: 600;
}

/* The console's active streak (its collapsed rail marks the active row with
   a 2px brand gradient). */
.md-tabs__item--active > .md-tabs__link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background-image: var(--gradient-brand);
}

/* 6. Sidebar --------------------------------------------------------------- */
.md-nav {
  font-size: 0.7rem; /* text-sm */
}

/* Section labels (navigation.sections) read as captions. Only from 76.25em,
   where Material renders them as sections; in the drawer they are links to
   a nested level and keep the row style. */
@media screen and (min-width: 76.25em) {
  .md-nav__item--section > .md-nav__link {
    color: var(--muted-foreground);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}

/* Page rows: the console's sidebar rows (rounded-lg, px-3, font-medium),
   tighter vertically because the docs nav has about three times the rows. */
.md-sidebar--primary .md-nav__item:not(.md-nav__item--section) > .md-nav__link {
  margin: 1px 0;
  padding: 6px 12px;
  border-radius: var(--mi-radius-lg);
  color: var(--foreground-secondary);
  font-weight: 500;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.md-sidebar--primary .md-nav__item:not(.md-nav__item--section) > .md-nav__link:is(:focus, :hover) {
  background-color: var(--sidebar-accent);
  color: var(--foreground);
}

/* Same qualifiers as the row rules above, so the active row wins on order. */
.md-sidebar--primary .md-nav__item:not(.md-nav__item--section) > .md-nav__link--active,
.md-sidebar--primary .md-nav__item:not(.md-nav__item--section) > .md-nav__link--active:is(:focus, :hover) {
  background-color: var(--mi-gold-wash);
  color: var(--docs-link);
  font-weight: 600;
}

/* Three-level nav (Category > Sub Category > Topic), ADR 0007.
   navigation.tabs "lifts" the primary nav: the active Category renders BOTH as
   the highlighted header tab AND as a sticky label at the top of the sidebar.
   Drop the sidebar copy on desktop so the sidebar starts at Sub Category.
   Sub Category labels (`--section` items) sit deeper in the tree, so they're
   untouched; the mobile drawer nav is not `--lifted`, so its full tree stays. */
@media screen and (min-width: 76.25em) {
  .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
    display: none;
  }
}

/* 7. Content + TOC --------------------------------------------------------- */
.md-main__inner {
  margin-top: 0;
}

.md-content {
  padding-bottom: 3rem;
}

.md-grid {
  max-width: 68rem;
}

.md-sidebar--secondary .md-nav__title {
  color: var(--foreground);
}

.md-nav--secondary .md-nav__link {
  color: var(--muted-foreground);
}

.md-nav--secondary .md-nav__link:is(:focus, :hover) {
  color: var(--foreground);
}

.md-nav--secondary .md-nav__link--active {
  color: var(--docs-link);
  font-weight: 600;
}

/* 8. Links + buttons ------------------------------------------------------- */
/* The console's link: medium weight, underline on hover. */
.md-typeset a {
  font-weight: 500;
  text-decoration: none;
}

.md-typeset a:not(.md-button):is(:focus, :hover) {
  color: var(--docs-link);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Buttons: the console's Button. Secondary = its `outline` variant. */
.md-typeset .md-button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 1.8rem; /* h-9 */
  padding: 0 0.7rem; /* px-3.5 */
  border: 1px solid var(--mi-outline-border);
  border-radius: var(--mi-radius-full);
  background-color: var(--mi-outline-bg);
  color: var(--foreground);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}

.md-typeset .md-button:is(:focus, :hover) {
  border-color: var(--mi-outline-border);
  background-color: var(--mi-outline-bg-hover);
  color: var(--foreground);
}

.md-typeset .md-button--primary {
  border-color: transparent;
  background-color: var(--primary);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); /* shadow-sm */
  color: var(--primary-foreground);
}

.md-typeset .md-button--primary:is(:focus, :hover) {
  border-color: transparent;
  background-color: var(--primary-hover);
  color: var(--primary-foreground);
}

.md-typeset .md-button:focus-visible {
  outline: 3px solid rgba(255, 184, 28, 0.5); /* ring-3 ring-ring/50 */
  outline-offset: 0;
}

/* 9. Cards + hero ---------------------------------------------------------- */
/* Grid cards: the console's Card (rounded-xl, ring-1 ring-foreground/10, no
   shadow, no hover lift). */
.md-typeset .grid.cards > :is(ul, ol) > li,
.md-typeset .grid > .card {
  padding: 1rem; /* --card-spacing: 20px */
  border: 0;
  border-radius: var(--mi-radius-xl);
  background-color: var(--card);
  box-shadow: 0 0 0 1px var(--mi-card-ring);
  transition: box-shadow 150ms ease-out;
}

.md-typeset .grid.cards > :is(ul, ol) > li:is(:hover, :focus-within),
.md-typeset .grid > .card:is(:hover, :focus-within) {
  border-color: transparent;
  box-shadow: 0 0 0 1px var(--border-strong);
}

.md-typeset .grid.cards strong {
  font-weight: 500; /* CardTitle: font-medium */
}

.md-typeset .grid.cards hr {
  border-bottom-color: var(--border);
}

.md-typeset .grid.cards .twemoji.lg {
  color: var(--primary);
}

.md-typeset .grid.cards .twemoji.lg svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* The inline "read more" arrow follows its link's color and baseline. */
.md-typeset .grid.cards a .twemoji {
  color: currentcolor;
  vertical-align: -0.125em;
}

/* Hero (home page, .mg-hero). */
.mg-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.5rem;
  align-items: center;
  padding: 1.5rem 0 2.5rem;
}

/* Eyebrow: the console's "brand" status chip. Light text uses --docs-link on
   the flattened wash (Mango on its own 10% tint is about 1.6:1). */
.mg-hero__eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 2px 10px;
  border-radius: var(--mi-radius-full);
  background-color: var(--mi-gold-wash);
  color: var(--docs-link);
  font-size: 0.55rem; /* 11px */
  font-weight: 600;
  line-height: 16px;
}

[data-md-color-scheme="slate"] .mg-hero__eyebrow {
  background-color: rgba(255, 184, 28, 0.2); /* bg-primary/20 */
}

.md-typeset .mg-hero h1 {
  margin: 0 0 0.6rem;
  font-size: 1.8rem;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.mg-hero__lead {
  max-width: 32rem;
  margin-bottom: 1.4rem;
  color: var(--foreground-secondary);
  font-size: 0.9rem;
}

.mg-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Decorative panel: the brand gradient's two ends as soft glows on a Card. */
.mg-hero__art {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--mi-radius-xl);
  background:
    radial-gradient(120% 120% at 80% 10%, rgba(255, 217, 64, 0.45), transparent 55%), /* gold-400 */
    radial-gradient(120% 120% at 10% 90%, rgba(242, 107, 20, 0.35), transparent 55%), /* gold-600 */
    var(--card);
  box-shadow: 0 0 0 1px var(--mi-card-ring);
}

.mg-hero__art img {
  width: 34%;
  filter: drop-shadow(0 12px 24px rgba(242, 107, 20, 0.3));
}

@media screen and (max-width: 76.234375em) {
  .mg-hero {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .mg-hero__art {
    display: none; /* keep the landing focused on tablet and mobile */
  }

  .md-typeset .mg-hero h1 {
    font-size: 1.5rem;
  }
}

/* 10. Admonitions ---------------------------------------------------------- */
/* The console's Banner shape. Tones (ADR 0017): note/abstract/info/question
   = info, tip/success/example = success, warning = warning,
   failure/danger/bug = destructive, quote = neutral. Light fills are the
   tone at 6% over white (flattened), so links inside keep 4.6:1 or better. */
.md-typeset .admonition,
.md-typeset details {
  --mi-tone-rgb: 76, 134, 240;
  --mi-tone-wash: #f4f8fe;
  border: 1px solid rgba(var(--mi-tone-rgb), 0.5);
  border-radius: var(--mi-radius-xl);
  box-shadow: none;
  font-size: 0.7rem;
}

.md-typeset .admonition:is(.note, .abstract, .info, .question),
.md-typeset details:is(.note, .abstract, .info, .question) {
  --mi-tone-rgb: 76, 134, 240; /* --color-info */
  --mi-tone-wash: #f4f8fe;
}

.md-typeset .admonition:is(.tip, .success, .example),
.md-typeset details:is(.tip, .success, .example) {
  --mi-tone-rgb: 47, 179, 122; /* --color-success */
  --mi-tone-wash: #f3faf7;
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  --mi-tone-rgb: 245, 176, 39; /* --color-warning */
  --mi-tone-wash: #fefaf2;
}

.md-typeset .admonition:is(.failure, .danger, .bug),
.md-typeset details:is(.failure, .danger, .bug) {
  --mi-tone-rgb: 229, 85, 91; /* --destructive */
  --mi-tone-wash: #fdf5f5;
}

.md-typeset .admonition.quote,
.md-typeset details.quote {
  --mi-tone-rgb: 110, 111, 125; /* light --muted-foreground */
  --mi-tone-wash: #fbfbfd; /* bg-muted/40 over white: the Banner's grey `info` tone */
}

/* Same specificity as Material's per-type rules, later in the cascade. */
.md-typeset .admonition:is(.note, .abstract, .info, .tip, .success, .question, .warning, .failure, .danger, .bug, .example, .quote),
.md-typeset details:is(.note, .abstract, .info, .tip, .success, .question, .warning, .failure, .danger, .bug, .example, .quote) {
  border-color: rgba(var(--mi-tone-rgb), 0.5);
}

.md-typeset .admonition:is(.note, .abstract, .info, .tip, .success, .question, .warning, .failure, .danger, .bug, .example, .quote):focus-within,
.md-typeset details:is(.note, .abstract, .info, .tip, .success, .question, .warning, .failure, .danger, .bug, .example, .quote):focus-within {
  box-shadow: 0 0 0 3px rgba(var(--mi-tone-rgb), 0.2);
}

[data-md-color-scheme="default"] .md-typeset :is(.admonition, details) {
  background-color: var(--mi-tone-wash);
}

[data-md-color-scheme="slate"] .md-typeset :is(.admonition, details) {
  background-color: rgba(var(--mi-tone-rgb), 0.1);
}

.md-typeset :is(.admonition, details) > :is(.admonition-title, summary) {
  background-color: transparent;
  font-weight: 600;
}

.md-typeset :is(.admonition, details) > :is(.admonition-title, summary)::before {
  background-color: rgb(var(--mi-tone-rgb));
}

.md-typeset :is(.admonition, details) > :is(.admonition-title, summary)::after {
  color: rgb(var(--mi-tone-rgb));
}

/* 11. Content tabs --------------------------------------------------------- */
/* The console's segmented control: a track with the active option raised. */
.md-typeset .tabbed-labels {
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 8px;
  padding: 4px 12px; /* px-3 py-1 */
  border-radius: var(--mi-radius-lg);
  background-color: var(--mi-seg-track);
  box-shadow: none;
}

/* No sliding underline. Material's indicator rule is `.js .md-typeset …`, so
   match its specificity. */
.js .md-typeset .tabbed-labels::before {
  display: none;
}

.md-typeset .tabbed-labels > label {
  height: 28px; /* h-7 */
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--mi-radius-md);
  color: var(--mi-seg-fg);
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 26px;
  transition: color 150ms ease-out;
}

.md-typeset .tabbed-labels > label:hover {
  color: var(--foreground);
}

/* Material wraps each label's text in a deep-link <a> with its own padding
   (.tabbed-labels--linked); the label carries the padding, weight and color
   here instead, and the link styles in section 8 must not reach it. */
.md-typeset .tabbed-labels--linked > label > a,
.md-typeset .tabbed-labels--linked > label > a:is(:focus, :hover) {
  padding: 0;
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

/* Phones: Material bleeds top-level tab labels to the screen edge; the track
   is a contained control, so keep it inside the column. `[dir]` matches the
   `[dir="ltr"]` rules Material compiles its logical padding into. */
@media screen and (max-width: 44.984375em) {
  [dir] .md-content__inner > .tabbed-set .tabbed-labels {
    max-width: 100%;
    margin: 0 0 8px;
    padding: 4px 12px;
  }

  .md-content__inner > .tabbed-set .tabbed-labels::after {
    content: none;
  }
}

/* Material pairs radio N with label N. Pages here use at most 2 tabs; 1-10
   are covered. */
.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),
.md-typeset .tabbed-set > input:nth-child(7):checked ~ .tabbed-labels > :nth-child(7),
.md-typeset .tabbed-set > input:nth-child(8):checked ~ .tabbed-labels > :nth-child(8),
.md-typeset .tabbed-set > input:nth-child(9):checked ~ .tabbed-labels > :nth-child(9),
.md-typeset .tabbed-set > input:nth-child(10):checked ~ .tabbed-labels > :nth-child(10) {
  border-color: var(--mi-seg-active-border);
  background-color: var(--mi-seg-active-bg);
  color: var(--foreground);
  font-weight: 600;
}

.md-typeset .tabbed-set > input.focus-visible ~ .tabbed-labels {
  outline: 3px solid rgba(255, 184, 28, 0.5);
  outline-offset: 2px;
}

/* 12. Code ----------------------------------------------------------------- */
/* The console's CodeBlock: --muted fill, rounded-md, px-4. The 1px edge is a
   docs addition: --muted on --background has no visible boundary. */
.md-typeset pre > code {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--mi-radius-md);
}

/* Material squares a tab's first code block so it sits on the tab underline;
   the segmented track stands apart, so keep the full radius. */
.md-typeset .tabbed-block > .highlight:first-child > pre > code,
.md-typeset .tabbed-block > pre:first-child > code {
  border-radius: var(--mi-radius-md);
}

.md-typeset :is(.highlight, .highlighttable) {
  border-radius: var(--mi-radius-md);
}

/* Phones: Material runs top-level code blocks edge to edge with square
   corners; drop the side edges there so the block doesn't end in a half
   border. */
@media screen and (max-width: 44.984375em) {
  .md-content__inner > .highlight > pre > code {
    border-right-width: 0;
    border-left-width: 0;
    border-radius: 0;
  }
}

.md-typeset code {
  border-radius: 4px; /* inline code: `rounded` */
}

.md-typeset .md-clipboard,
.md-typeset :hover > .md-clipboard {
  color: var(--muted-foreground);
}

.md-typeset .md-clipboard:is(:focus, :hover) {
  color: var(--foreground);
}

/* 13. Tables --------------------------------------------------------------- */
/* shadcn Table inside a Card-like frame. Row borders and the hover wash come
   from --md-typeset-table-color(--light) in section 2. */
.md-typeset table:not([class]) {
  border: 1px solid var(--border);
  border-radius: var(--mi-radius-lg);
  background-color: var(--card);
  box-shadow: none;
  font-size: 0.7rem;
}

.md-typeset table:not([class]) th {
  border-bottom: 1px solid var(--border);
  background-color: transparent;
  color: var(--foreground);
  font-weight: 500;
}

/* 14. Footer --------------------------------------------------------------- */
/* Previous/next as the console's Card; the bottom row as its public footer
   ((public)/layout.tsx: border-t, text-sm, text-foreground-secondary). */
.md-footer {
  background-color: transparent;
  color: var(--foreground);
}

.md-footer__inner {
  gap: 16px;
  padding: 0 0.8rem;
}

.md-footer__link {
  flex: 1 1 0;
  align-items: center;
  max-width: calc(50% - 8px);
  margin-block: 0.8rem 0.4rem;
  padding: 8px 16px;
  border-radius: var(--mi-radius-xl);
  background-color: var(--card);
  box-shadow: 0 0 0 1px var(--mi-card-ring);
  transition: box-shadow 150ms ease-out;
}

.md-footer__link:is(:focus, :hover) {
  box-shadow: 0 0 0 1px var(--border-strong);
  opacity: 1;
}

.md-footer__title {
  margin-bottom: 0;
  font-size: 0.8rem;
  font-weight: 500;
}

.md-footer__direction {
  color: var(--muted-foreground);
  font-size: 0.6rem;
  opacity: 1;
}

.md-footer__button {
  margin: 0;
  color: var(--muted-foreground);
}

/* Phones: Material hides the previous page's title, so that card shrinks to
   its arrow and the next card takes the rest of the row. */
@media screen and (max-width: 44.984375em) {
  .md-footer__link--prev {
    flex: 0 0 auto;
  }

  .md-footer__link--next {
    max-width: none;
  }
}

.md-footer-meta {
  border-top: 1px solid var(--border);
  background-color: transparent;
}

.md-copyright {
  width: auto; /* one row on phones too; Material stacks it below 45em */
  color: var(--foreground-secondary);
  font-size: 0.7rem;
}

.md-copyright__highlight {
  color: inherit;
}

/* The social icons set the row's height; Material pads them .6rem. */
.md-social {
  padding-block: 0.2rem;
}

html .md-footer-meta.md-typeset a {
  color: var(--foreground-secondary);
}

html .md-footer-meta.md-typeset a:is(:focus, :hover) {
  color: var(--foreground);
}