/* ============================================================================
   Smart Router docs — design system
   Brand color: magma orange. Layout/typography per the documentation spec.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* Mintlify-extracted warm gray ramp (RGB triplets) */
  --gray-50:  243 246 244;
  --gray-100: 238 241 239;
  --gray-200: 223 225 224;
  --gray-300: 206 209 207;
  --gray-400: 159 161 160;
  --gray-500: 112 115 113;
  --gray-600: 80 83 81;
  --gray-700: 63 65 64;
  --gray-800: 38 40 39;
  --gray-900: 23 26 24;
  --gray-950: 10 13 12;
  --bg-light: 255 255 255;
  --bg-dark:  10 13 13;

  /* --- Brand --- */
  --primary:      #FF3900;
  --primary-dark: #CC2E00;

  /* Standard transition token — apply to all hover-able chrome */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t: 0.15s var(--ease);

  /* Material accent → magma */
  --md-accent-fg-color:              var(--primary);
  --md-accent-fg-color--transparent: rgba(255, 57, 0, 0.08);
  --md-typeset-a-color:              var(--primary);
}

/* === Light scheme: three-tier text ramp + surfaces === */
[data-md-color-scheme="default"] {
  --text-strong:    rgb(var(--gray-900));   /* headings, bold */
  --text-body:      rgb(var(--gray-700));   /* paragraphs, lists */
  --text-muted:     rgb(var(--gray-500));   /* nav, TOC, secondary */
  --surface:        rgb(var(--bg-light));
  --surface-subtle: rgba(23, 26, 24, 0.05);
  --border-subtle:  rgba(23, 26, 24, 0.09);

  --md-default-fg-color:           var(--text-strong);
  --md-default-fg-color--light:    var(--text-body);
  --md-default-fg-color--lighter:  var(--text-muted);
  --md-default-fg-color--lightest: rgb(var(--gray-200));
  --md-default-bg-color:           var(--surface);
  --md-default-bg-color--light:    rgb(var(--gray-50));
  --md-primary-fg-color:           #fff;
  --md-primary-bg-color:           rgb(var(--gray-900));
  --md-code-fg-color:              var(--text-strong);
  --md-code-bg-color:              var(--surface);
}

/* === Dark scheme === */
[data-md-color-scheme="slate"] {
  --text-strong:    rgb(var(--gray-100));
  --text-body:      rgb(var(--gray-300));
  --text-muted:     rgb(var(--gray-400));
  --surface:        rgb(var(--bg-dark));
  --surface-subtle: rgba(255, 255, 255, 0.06);
  --border-subtle:  rgba(255, 255, 255, 0.09);

  --md-default-fg-color:           var(--text-strong);
  --md-default-fg-color--light:    var(--text-body);
  --md-default-fg-color--lighter:  var(--text-muted);
  --md-default-fg-color--lightest: rgb(var(--gray-800));
  --md-default-bg-color:           var(--surface);
  --md-default-bg-color--light:    rgb(var(--gray-900));
  --md-default-bg-color--lighter:  rgb(var(--gray-800));
  --md-default-bg-color--lightest: rgb(var(--gray-700));
  --md-primary-fg-color:           var(--surface);
  --md-primary-bg-color:           rgb(var(--gray-100));
  --md-code-fg-color:              var(--text-strong);
  --md-code-bg-color:              var(--surface);
}

/* ============================================================================
   1–2. Foundations & typographic scale
   Body 16px/1.5; paragraphs 1.75. Headings medium (500), tight tracking,
   text-strong. Body copy text-body (lighter than headings).
   ============================================================================ */

.md-typeset {
  font-family: 'Inter', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: "ss01", "cv11";
  font-size: 16px;
  line-height: 1.5;            /* 24px base */
  color: var(--text-body);     /* body copy is one tier lighter than headings */
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;
  color: var(--text-strong);
  scroll-margin-top: 96px;     /* sticky-header offset for anchor jumps */
}

.md-typeset h1 {
  font-size: 30px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -0.5px;
  margin: 0 0 16px;
}
.md-typeset h2 {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.6px;
  margin: 48px 0 16px;
}
.md-typeset h3 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
  margin: 48px 0 12px;
}
.md-typeset h4 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: normal;
  margin: 32px 0 8px;
}
.md-typeset h5,
.md-typeset h6 {
  font-size: 14px;
  font-weight: 500;
  margin: 24px 0 8px;
}
.md-typeset h6 { font-style: italic; font-weight: 400; }

.md-typeset > h1:first-child { margin-top: 12px; }

/* Lead paragraph — first <p> after the page title */
.md-typeset h1 + p {
  font-size: 20px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 16px 0 24px;
}

/* Body paragraphs — looser 1.75 line-height for comfortable reading */
.md-typeset p {
  font-size: 16px;
  line-height: 1.75;          /* 28px */
  margin: 16px 0;
}

/* Bold/strong inline — semibold, strongest tier */
.md-typeset strong,
.md-typeset b {
  font-weight: 600;
  color: var(--text-strong);
}

/* Inline code inside headings reads slightly smaller */
.md-typeset h2 code { font-size: 0.875em; }
.md-typeset h3 code { font-size: 0.9em; }

/* ============================================================================
   4. Links (in-content / prose)
   Same color as surrounding text, semibold, 1px primary underline accent.
   Hover thickens the underline 1px→2px; color does NOT change.
   ============================================================================ */

.md-typeset p a,
.md-typeset li a,
.md-typeset td a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--primary);
  word-wrap: break-word;
  transition: border-bottom-width var(--t), color var(--t);
}
.md-typeset p a:hover,
.md-typeset li a:hover,
.md-typeset td a:hover {
  color: var(--primary-dark);
  border-bottom-width: 2px;
}
/* Inline code inside a link inherits the orange link color (so it stays legible) */
.md-typeset p a code,
.md-typeset li a code,
.md-typeset td a code {
  color: var(--primary);
  background-color: rgba(255, 57, 0, 0.08);
}
/* Don't double-style links wrapped in <strong> */
.md-typeset strong a,
.md-typeset a strong { color: inherit; font-weight: inherit; }

/* ============================================================================
   8. Inline code vs. code blocks
   ============================================================================ */

/* Inline code — mono 14px medium, text-strong on a faint tint, no border */
.md-typeset code {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-strong);
  background-color: var(--surface-subtle);
  border-radius: 6px;
  padding: 2px 8px;
  border: none;
}

/* Code block — surface card, rounded, subtle outline */
.md-typeset .highlight > pre,
.md-typeset pre.highlight,
.md-typeset > pre {
  background-color: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: none;
  padding: 14px 16px;
}
.md-typeset .highlight pre > code,
.md-typeset > pre > code {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-strong);
  background: transparent;
  padding: 0;
}

/* Copy button — subtle, appears on hover, tints primary */
.md-clipboard {
  width: 1.4em;
  height: 1.4em;
  top: 0.6em;
  right: 0.6em;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity var(--t), color var(--t);
}
.md-typeset .highlight:hover .md-clipboard,
.md-clipboard:focus { opacity: 1; }
.md-clipboard::after { width: 0.95em; height: 0.95em; background-color: currentColor; }
.md-clipboard:hover { color: var(--primary); }

/* Line numbers — recede */
.md-typeset .highlighttable .linenos {
  background: transparent;
  color: var(--text-muted);
  border-right: 1px solid var(--border-subtle);
  padding-right: 0.75em;
  font-size: 14px;
}

/* Tabbed code (=== "tab" syntax) */
.md-typeset .tabbed-set { margin: 1.25em 0; }
.md-typeset .tabbed-labels { border-bottom: 1px solid var(--border-subtle); }
.md-typeset .tabbed-labels > label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 0.6em 1em;
  transition: color var(--t);
}
.md-typeset .tabbed-labels > label:hover { color: var(--text-strong); }
.md-typeset .tabbed-set > input:checked + label {
  color: var(--primary);
  border-color: var(--primary);
}

/* ============================================================================
   9. Lists — body copy, 8px gap, recessive bullet markers
   ============================================================================ */

.md-typeset ul,
.md-typeset ol { margin: 16px 0; }
.md-typeset li {
  font-size: 16px;
  line-height: 1.75;          /* 28px */
  margin-bottom: 8px;
}
.md-typeset ul > li::marker { color: rgb(var(--gray-400)); }

/* ============================================================================
   7. Buttons
   ============================================================================ */

/* Primary — solid pill; hover drops opacity only */
.md-typeset .md-button--primary {
  background-color: var(--primary);
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border-radius: 9999px;
  padding: 0.55em 16px;
  box-shadow: none;
  transition: opacity var(--t);
}
.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  background-color: var(--primary);
  color: #fff;
  opacity: 0.8;
}

/* Secondary / utility — outlined, surface bg */
.md-typeset .md-button {
  background-color: var(--surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  border-radius: 12px;
  padding: 6px 12px;
  transition: color var(--t), background-color var(--t), border-color var(--t);
}
.md-typeset .md-button:not(.md-button--primary):hover {
  color: var(--text-strong);
  border-color: var(--border-subtle);
  background-color: var(--surface-subtle);
}

/* ============================================================================
   Tables
   ============================================================================ */

.md-typeset table:not([class]) {
  border-radius: 12px;
  overflow: hidden;
  font-size: 14px;
  border: 1px solid var(--border-subtle);
  border-collapse: separate;
  border-spacing: 0;
}
.md-typeset table:not([class]) th {
  background-color: var(--surface-subtle);
  color: var(--text-strong);
  font-weight: 600;
}
.md-typeset table:not([class]) td { color: var(--text-body); }

/* ============================================================================
   Admonitions
   ============================================================================ */

.md-typeset .admonition,
.md-typeset details {
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-subtle);
  box-shadow: none;
  font-size: 14px;
}
.md-typeset .admonition.tip,
.md-typeset details.tip {
  background-color: rgba(255, 57, 0, 0.06);
  border-color: rgba(255, 57, 0, 0.18);
}
.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary { background-color: transparent; }
.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before { background-color: var(--primary); }

/* ============================================================================
   3. Layout — three columns, ~980px content, sidebars flank
   ============================================================================ */

/* Bound the whole page to a centered column (drpc-style). `.md-grid` is the
   shared width constraint for the header inner, main, and footer inner, so this
   one rule centers the nav bar, content, and footer together — pulling the logo
   + search/GitHub in from the window edges. */
.md-grid { max-width: 1600px; margin: 0 auto; padding: 0; }
.md-main__inner { margin-top: 0; }
.md-content {
  max-width: 1320px;
  margin: 0 auto;
  padding: 1.5rem 3rem 4rem;
}
.md-content__inner { padding-top: 0.5rem; padding-bottom: 4rem; }
.md-content__inner::before { height: 0; }

/* ============================================================================
   6. Header
   ============================================================================ */

.md-header {
  box-shadow: none;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-strong);
  height: 4rem;
}
[data-md-color-scheme="default"] .md-header { background-color: #fff; }
[data-md-color-scheme="slate"]   .md-header { background-color: var(--surface); }
.md-header__inner {
  padding: 0 1rem;
  display: flex;
  align-items: center;
  height: 100%;
}
.md-header__inner > * { align-self: center; }
.md-header__option,
.md-header__source,
.md-header__button { display: flex; align-items: center; margin-top: 0; margin-bottom: 0; }
/* Search pushed right; GitHub icon sits tightly beside it (drpc-style).
   Fixed-width wide pill so it reads as a stable search bar, not a collapsing
   icon — matches drpc's "Search documentation…  CTRL K" box. */
.md-search { display: flex; align-items: center; margin-left: auto; margin-right: 0.75rem; }
.md-search__inner { width: 20rem; }
.md-header__source { margin-left: 0 !important; padding-left: 0 !important; }
.md-header__option { margin-left: 0 !important; }

/* Volcanic accent hairline at the very top edge */
.md-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary) 50%, transparent);
  opacity: 0.6;
}

/* Top-nav pill links (if tabs re-enabled): 14px medium muted, tinted hover */
.md-tabs { background: transparent; }
.md-tabs__link {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.35px;
  color: var(--text-muted);
  opacity: 1;
  border-radius: 9999px;
  padding: 0 16px;
  transition: color var(--t), background-color var(--t);
}
.md-tabs__link:hover {
  color: var(--text-strong);
  background-color: rgba(23, 26, 24, 0.03);
}
.md-tabs__link--active { color: var(--text-strong); }

/* Search input — wide rounded-rect box (always expanded, drpc-style).
   Width is left to Material so the form + results dropdown share one width and
   stay aligned; we only style appearance. Modest 8px radius (not a full pill). */
.md-search__form {
  background-color: var(--surface-subtle);
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  height: 2.4rem;
  box-shadow: none;
  transition: background-color var(--t), border-color var(--t), border-radius 0s;
}
.md-search__input {
  color: var(--text-strong);
  border-radius: 8px;
  width: 100%;
  padding-left: 2.4rem;   /* room for the magnifier icon */
}

.md-search__input:hover { background-color: var(--surface); }

/* Focused state: the input fuses with the results dropdown into ONE connected
   surface — input rounds only its TOP corners, dropdown rounds only its BOTTOM,
   no gap between them, sharing a soft brand-tinted border + one soft shadow. */
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background-color: var(--surface);
  border-color: rgba(255, 57, 0, 0.45);
  border-bottom-color: var(--border-subtle);
  border-radius: 10px 10px 0 0;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
}
[data-md-toggle="search"]:checked ~ .md-header .md-search__input { border-radius: 10px 10px 0 0; }

/* Results dropdown — flush under the input, rounded bottom corners only, same
   border + shadow so input + results read as a single floating card. */
.md-search__output {
  margin-top: 0;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 57, 0, 0.45);
  border-top: none;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
}
[data-md-color-scheme="default"] .md-search__scrollwrap { background-color: #fff; }
[data-md-color-scheme="slate"]   .md-search__scrollwrap { background-color: var(--surface); }
.md-search__input::placeholder { color: var(--text-muted); }
.md-search__icon { color: var(--text-muted); }

/* Results meta row ("Type to start searching" / "N matching documents") —
   quiet, not a flat gray strip. */
.md-search-result__meta {
  background-color: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 2.4;
  padding: 0 0.9rem;
  border-bottom: 1px solid var(--border-subtle);
}
/* Result rows — clean hover tint matching the brand */
.md-search-result__item { box-shadow: none; }
.md-search-result__link { border-radius: 0; transition: background-color var(--t); }
.md-search-result__link:hover,
.md-search-result__link[data-md-state="active"] { background-color: var(--md-accent-fg-color--transparent); }
.md-search-result__title { font-weight: 600; color: var(--text-strong); }
.md-search-result mark { color: var(--primary); background: transparent; font-weight: 600; }

/* ============================================================================
   Logo
   ============================================================================ */

.md-header__button.md-logo { margin: 0.4rem 0.6rem 0.4rem 0.4rem; padding: 0; }
.md-header__button.md-logo img,
.md-header__button.md-logo svg { height: 1.5rem; width: auto; }
[data-md-color-scheme="slate"] .md-header__button.md-logo img {
  content: url('../assets/magma-logo-white.svg');
}
.md-header__title { display: none; }
.md-sidebar--primary .md-nav__title { display: none; }
@media (max-width: 76.1875em) {
  .md-sidebar--primary .md-nav__title { display: block; }
}

/* ============================================================================
   5. Sidebar (left navigation)
   Section labels: 12px semibold text-strong, capitalized, non-interactive.
   Nav links: 14px/400 text-muted, indented; hover & active = primary, no fill.
   ============================================================================ */

.md-sidebar--primary {
  width: 17.5rem;
  padding-left: 1.25rem;       /* inset the nav from the window's left edge */
  border-right: 1px solid var(--border-subtle);
}
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary { padding-top: 1rem; }
}
.md-sidebar--primary .md-sidebar__scrollwrap {
  padding-left: 1.25rem;
  padding-right: 0.25rem;
  margin-right: 0;
}

/* Reset list/item box model so the section label sits flush-left */
.md-sidebar--primary .md-nav,
.md-sidebar--primary .md-nav .md-nav,
.md-sidebar--primary .md-nav__list,
.md-sidebar--primary .md-nav__item {
  padding: 0 !important;
  margin: 0 !important;
}

/* Nav links (inactive): 14px / 400 / muted, indented 16px left */
.md-sidebar--primary .md-nav__item .md-nav__link {
  background: transparent !important;
  border-radius: 0;
  padding: 6px 12px 6px 16px;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-muted);
  transition: color var(--t);
}
.md-sidebar--primary .md-nav__item .md-nav__link:hover { color: var(--primary); }
/* Active: primary color, SAME weight/size as inactive — no fill, no border */
.md-sidebar--primary .md-nav__item .md-nav__link--active {
  color: var(--primary) !important;
  font-weight: 400;
}

/* Section labels (drpc-style): 11px / 600 / UPPERCASE / muted, letter-spaced,
   non-interactive group headers — clearly distinct from clickable page links. */
.md-sidebar--primary .md-nav__item--section > .md-nav__link {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  margin: 26px 0 8px !important;
  padding: 0 !important;
  background: transparent !important;
  cursor: default;
  display: flex;
  align-items: center;
}
.md-sidebar--primary .md-nav__item--section > .md-nav__link:hover { color: var(--text-muted) !important; }

/* Divider line above each top-level section so groups are clearly separated
   and every section header (incl. Reference) reads consistently. The first
   section has no divider and no top gap. */
.md-sidebar--primary .md-nav > .md-nav__list > .md-nav__item--section {
  border-top: 1px solid var(--border-subtle);
  margin-top: 18px !important;
  padding-top: 18px !important;
}
.md-sidebar--primary .md-nav > .md-nav__list > .md-nav__item--section:first-child {
  border-top: none;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.md-sidebar--primary .md-nav > .md-nav__list > .md-nav__item--section > .md-nav__link { margin-top: 0 !important; }

/* Section icons — 14×14 currentColor mask, inline before the label */
.md-sidebar--primary .md-nav__item--section > .md-nav__link::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  margin-right: 7px;
  opacity: 0.8;
  background-color: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
/* Get started — rocket */
.md-sidebar--primary .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(1) > .md-nav__link::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
}
/* Using the API — code */
.md-sidebar--primary .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(2) > .md-nav__link::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
}
/* Configuration — sliders */
.md-sidebar--primary .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(3) > .md-nav__link::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' x2='4' y1='21' y2='14'/%3E%3Cline x1='4' x2='4' y1='10' y2='3'/%3E%3Cline x1='12' x2='12' y1='21' y2='12'/%3E%3Cline x1='12' x2='12' y1='8' y2='3'/%3E%3Cline x1='20' x2='20' y1='21' y2='16'/%3E%3Cline x1='20' x2='20' y1='12' y2='3'/%3E%3Cline x1='2' x2='6' y1='14' y2='14'/%3E%3Cline x1='10' x2='14' y1='8' y2='8'/%3E%3Cline x1='18' x2='22' y1='16' y2='16'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' x2='4' y1='21' y2='14'/%3E%3Cline x1='4' x2='4' y1='10' y2='3'/%3E%3Cline x1='12' x2='12' y1='21' y2='12'/%3E%3Cline x1='12' x2='12' y1='8' y2='3'/%3E%3Cline x1='20' x2='20' y1='21' y2='16'/%3E%3Cline x1='20' x2='20' y1='12' y2='3'/%3E%3Cline x1='2' x2='6' y1='14' y2='14'/%3E%3Cline x1='10' x2='14' y1='8' y2='8'/%3E%3Cline x1='18' x2='22' y1='16' y2='16'/%3E%3C/svg%3E");
}
/* Deployment — server */
.md-sidebar--primary .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(4) > .md-nav__link::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='8' x='2' y='2' rx='2'/%3E%3Crect width='20' height='8' x='2' y='14' rx='2'/%3E%3Cline x1='6' x2='6.01' y1='6' y2='6'/%3E%3Cline x1='6' x2='6.01' y1='18' y2='18'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='8' x='2' y='2' rx='2'/%3E%3Crect width='20' height='8' x='2' y='14' rx='2'/%3E%3Cline x1='6' x2='6.01' y1='6' y2='6'/%3E%3Cline x1='6' x2='6.01' y1='18' y2='18'/%3E%3C/svg%3E");
}
/* Reference — book */
.md-sidebar--primary .md-nav > .md-nav__list > .md-nav__item--section:nth-of-type(5) > .md-nav__link::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20'/%3E%3C/svg%3E");
}

/* Nested sub-section labels (e.g. Projects, Failover) — same family as
   top-level headers but a touch quieter, no icon. */
.md-sidebar--primary .md-nav .md-nav .md-nav__item--section > .md-nav__link {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  opacity: 0.85;
  margin: 14px 0 4px !important;
}
.md-sidebar--primary .md-nav .md-nav .md-nav__item--section > .md-nav__link::before { display: none; }

/* === Indentation by nesting depth ===
   Every row at a given depth shares one left edge (whether or not it has
   children); each nested level is offset relative to its parent. Depth 0
   section labels stay flush (icon at the edge); depth-1 rows align under the
   parent's text (icon 14 + gap 8 = 22px); depth 2 steps in a further 16px. */
.md-nav--primary > .md-nav__list > .md-nav__item
  > .md-nav > .md-nav__list > .md-nav__item
  > .md-nav__link {
  padding-left: 22px !important;
}
.md-nav--primary > .md-nav__list > .md-nav__item
  > .md-nav > .md-nav__list > .md-nav__item
  > .md-nav > .md-nav__list > .md-nav__item
  > .md-nav__link {
  padding-left: 38px !important;
}

/* === Chevron (expand/collapse) — fixed gap after the title text ===
   Material pushes the toggle arrow to the far right (margin-left:auto), so the
   text→chevron gap varies by label length. Pack it right after the text with a
   fixed gap instead. */
.md-sidebar--primary .md-nav__item--nested > .md-nav__link {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
}
/* Nested toggle-groups that are NOT top-level sections (e.g. Projects,
   Failover & retry) get a consistent sub-header treatment: 13px semibold in the
   strong tier — clearly a group title, distinct from both the tiny uppercase
   section headers above and the 16px regular leaf links below. */
.md-sidebar--primary .md-nav .md-nav .md-nav__item--nested:not(.md-nav__item--section) > .md-nav__link,
.md-sidebar--primary .md-nav .md-nav .md-nav__item--nested:not(.md-nav__item--section) > .md-nav__container > .md-nav__link {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  color: var(--text-strong) !important;
}
.md-sidebar--primary .md-nav__item--nested > .md-nav__link > .md-nav__icon {
  margin-left: 6px !important;
  margin-right: 0 !important;
  width: 0.85rem;
  height: 0.85rem;
  color: var(--text-muted);
}
.md-sidebar--primary .md-nav__icon svg { width: 100%; height: 100%; }

/* === Active nested section ===
   The current section renders via a `div.md-nav__container` wrapping a separate
   <a> (text) and <label> (chevron). Left as-is it double-indents and floats the
   chevron right. Treat the container as the single row: it carries the depth
   indent, the inner link/label add none, and the chevron sits inline. */
.md-sidebar--primary .md-nav__container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.md-sidebar--primary .md-nav__container > .md-nav__link {
  padding: 0 !important;
  flex: 0 1 auto;
}
.md-sidebar--primary .md-nav__container > .md-nav__link:first-child {
  flex: 0 1 auto;
  min-width: 0;
}
.md-sidebar--primary .md-nav__container .md-nav__icon {
  margin-left: 6px !important;
  margin-right: 0 !important;
  width: 0.85rem;
  height: 0.85rem;
  color: var(--text-muted);
}

/* ============================================================================
   10. Right "On this page" TOC
   14px/400 muted; active section darkens to text-strong, no underline/marker.
   ============================================================================ */

.md-sidebar--secondary {
  width: 14rem;
  padding-right: 0;
  border-left: 1px solid var(--border-subtle);
}
.md-sidebar--secondary .md-sidebar__scrollwrap { padding: 1rem 1.5rem 1rem 0.75rem; margin-left: 0; }

.md-sidebar--secondary .md-nav__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  margin: 0 0 0.7rem;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  box-shadow: none;
}
.md-sidebar--secondary .md-nav__title::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 14px; height: 14px;
  background-color: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' x2='21' y1='6' y2='6'/%3E%3Cline x1='8' x2='21' y1='12' y2='12'/%3E%3Cline x1='8' x2='21' y1='18' y2='18'/%3E%3Cline x1='3' x2='3.01' y1='6' y2='6'/%3E%3Cline x1='3' x2='3.01' y1='12' y2='12'/%3E%3Cline x1='3' x2='3.01' y1='18' y2='18'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' x2='21' y1='6' y2='6'/%3E%3Cline x1='8' x2='21' y1='12' y2='12'/%3E%3Cline x1='8' x2='21' y1='18' y2='18'/%3E%3Cline x1='3' x2='3.01' y1='6' y2='6'/%3E%3Cline x1='3' x2='3.01' y1='12' y2='12'/%3E%3Cline x1='3' x2='3.01' y1='18' y2='18'/%3E%3C/svg%3E");
}
.md-sidebar--secondary .md-nav__list { padding: 0; margin: 0; border-left: none; }
.md-sidebar--secondary .md-nav__item { padding: 0; margin: 0; }
.md-sidebar--secondary .md-nav__link {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  padding: 5px 0 5px 16px;
  margin: 0;
  line-height: 1.35;
  border-left: none;
  background: transparent;
  transition: color var(--t);
}
.md-sidebar--secondary .md-nav__link:hover { color: var(--text-strong); }
.md-sidebar--secondary .md-nav__link--active { color: var(--text-strong) !important; font-weight: 400; }

/* Depth-based indentation so the TOC hierarchy is clean & consistent:
   page title (injected) flush · h2 base · h3 +14px · h4 +28px. */
.md-sidebar--secondary .md-nav__item--toc-title > .md-nav__link { padding-left: 0; }
.md-sidebar--secondary .md-nav .md-nav .md-nav__link { padding-left: 30px; }
.md-sidebar--secondary .md-nav .md-nav .md-nav .md-nav__link { padding-left: 44px; }

/* ============================================================================
   Diagrams & illustrations
   ============================================================================ */

.md-typeset img[src$=".svg"] {
  display: block;
  margin: 1.75rem auto;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
}

/* Eyebrow label above page titles */
.md-typeset .eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 0.3rem;
}

/* ============================================================================
   Landing-page card grid
   ============================================================================ */

.md-typeset .card-grid.grid.cards,
.md-typeset .card-grid.grid.cards > ul {
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.75rem 0 2.5rem;
}
.md-typeset .card-grid.grid.cards > ul > li {
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-color: var(--surface);
  display: flex;
  flex-direction: column;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}
.md-typeset .card-grid.grid.cards > ul > li:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 57, 0, 0.35);
  box-shadow: 0 10px 30px rgba(255, 57, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.04);
}
.md-typeset .card-grid.grid.cards img.card-illustration {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--border-subtle);
}
.md-typeset .card-grid.grid.cards > ul > li > * { padding: 0 1.25rem; }
.md-typeset .card-grid.grid.cards > ul > li > p:has(img.card-illustration) { padding: 0; margin: 0; }
.md-typeset .card-grid.grid.cards > ul > li > p:nth-of-type(2) {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-strong);
  margin: 1.1rem 0 0.4rem;
}
.md-typeset .card-grid.grid.cards > ul > li > p:nth-of-type(3) {
  color: var(--text-body);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 1.1rem;
  flex: 1;
}
.md-typeset .card-grid.grid.cards > ul > li > p:last-child { margin-bottom: 1.25rem; }
.md-typeset .card-grid.grid.cards a {
  color: var(--primary);
  border-bottom: none;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: color var(--t);
}
.md-typeset .card-grid.grid.cards a:hover { color: var(--primary-dark); }

@media (max-width: 720px) {
  .md-typeset .card-grid.grid.cards,
  .md-typeset .card-grid.grid.cards > ul { grid-template-columns: 1fr; }
}

/* ============================================================================
   Breadcrumb (navigation.path) — muted trail above the H1, drpc-style
   ============================================================================ */

.md-content .md-path {
  font-size: 13px;
  margin: 0 0 0.75rem;
  padding: 0;
}
.md-content .md-path__list { gap: 0.2rem; }
.md-content .md-path__item,
.md-content .md-path__item a {
  color: var(--text-muted);
  font-weight: 500;
}
.md-content .md-path__item a {
  border-bottom: none;
  transition: color var(--t);
}
.md-content .md-path__item a:hover {
  color: var(--text-strong);
  border-bottom: none;
}
/* › separator between crumbs */
.md-content .md-path__item:not(:last-child)::after { color: var(--text-muted); opacity: 0.6; }

/* ============================================================================
   Footer — prev/next pager + last-updated stamp + scrollbar
   ============================================================================ */

.md-footer-meta { background-color: var(--surface); border-top: 1px solid var(--border-subtle); }
.md-footer-meta__inner,
.md-footer__inner { color: var(--text-muted); }
::-webkit-scrollbar-thumb:hover { background-color: var(--primary); }

/* Prev/next page pager (navigation.footer) — quiet cards that tint primary on
   hover; sit inside the centered .md-grid so they align with the content. */
[data-md-color-scheme="default"] .md-footer { background-color: #fff; }
[data-md-color-scheme="slate"]   .md-footer { background-color: var(--surface); }
.md-footer__inner { padding: 1.2rem 0; }
.md-footer__link {
  padding: 0.6rem 0.4rem;
  opacity: 1;
  transition: color var(--t);
}
.md-footer__link:hover { color: var(--primary); }
.md-footer__title { color: var(--text-strong); font-weight: 600; }
.md-footer__direction { color: var(--text-muted); font-size: 12px; }
.md-footer__button.md-icon { color: var(--text-muted); }
.md-footer__link:hover .md-footer__button.md-icon { color: var(--primary); }

/* "Last updated on …" stamp (git-revision-date-localized) — small, muted,
   right-aligned above the meta row, matching drpc. */
.md-source-file,
.md-source-file__fact {
  color: var(--text-muted);
  font-size: 12px;
}
.md-content .md-source-file { margin-top: 2rem; text-align: right; }

/* ============================================================================
   Supported-chains catalog — icons + network/interface badges
   ============================================================================ */

/* Three columns now (Chain · Networks · Interfaces). The spec link lives as a
   small ↗ on the chain name, so the table is narrower and never scrolls sideways. */
.md-typeset table:has(.chain-row) { width: 100%; table-layout: fixed; }
.md-typeset table:has(.chain-row) td,
.md-typeset table:has(.chain-row) th {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  white-space: nowrap;
  vertical-align: middle;
}
.md-typeset table:has(.chain-row) th:nth-child(1),
.md-typeset table:has(.chain-row) td:nth-child(1) { width: 38%; }
.md-typeset table:has(.chain-row) th:nth-child(2),
.md-typeset table:has(.chain-row) td:nth-child(2) { width: 24%; }

/* Chain icon: sits to the left of the chain name, vertically centred. */
.md-typeset .chain-row { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; }
/* Specificity must beat the diagram rule `.md-typeset img[src$=".svg"]`
   (1.75rem auto) above — chain icons are .svg too. Without this the
   centring margin inflates every row to ~105px. */
.md-typeset .chain-row img.chain-ico {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin: 0;
  display: block;
  border-radius: 50%;
  /* A faint backing disc + inset ring gives light/near-white icons
     (Axelar, Casper, Stellar, …) a visible edge against the white page,
     without changing how dark/coloured icons read. */
  background: rgb(var(--gray-100));
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}
[data-md-color-scheme="slate"] .md-typeset .chain-row img.chain-ico {
  background: rgb(var(--gray-800));
}
.md-typeset .chain-row--noicon { padding-left: calc(22px + 0.45rem); } /* align names that have no icon */

/* Spec link — small ↗ after the chain name; native title attr shows the filename
   on hover. No underline/border (overrides the prose td-link styling). */
.md-typeset .chain-row .spec-link {
  margin-left: 0.3rem;
  font-size: 0.78em;
  font-weight: 400;
  color: var(--text-muted);
  border-bottom: none;
  text-decoration: none;
  opacity: 0.65;
  transition: opacity var(--t), color var(--t);
}
.md-typeset .chain-row .spec-link + .spec-link { margin-left: 0.12rem; }
.md-typeset .chain-row .spec-link:hover { opacity: 1; color: var(--primary); border-bottom: none; }

/* Pill badges — single shared shape, never wrap. */
.md-typeset .badge {
  display: inline-block;
  padding: 0.02rem 0.4rem;
  margin: 0 0.15rem 0 0;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.02em;
  border-radius: 0.5rem;
  white-space: nowrap;
  border: 1px solid var(--border-subtle);
}

/* Network badges. */
.md-typeset .badge.net-main {
  color: var(--primary);
  background: rgba(255, 57, 0, 0.08);
  border-color: rgba(255, 57, 0, 0.25);
}
.md-typeset .badge.net-test { color: var(--text-muted); background: rgb(var(--gray-200) / 0.5); }
[data-md-color-scheme="slate"] .md-typeset .badge.net-test { background: rgb(var(--gray-700) / 0.4); }

/* Interface badges — magma-orange family, one soft shade per protocol
   (deep → pale: JSON-RPC, REST, Tendermint, gRPC). Tinted backgrounds with
   matching deep-orange text — gentle, not solid fills, and still distinct
   from the outlined Mainnet badge. */
.md-typeset .badge.iface { color: #9c2400; border-color: transparent; }
.md-typeset .badge.iface-rpc  { background: rgba(255, 57, 0, 0.22); }
.md-typeset .badge.iface-rest { background: rgba(255, 57, 0, 0.16); }
.md-typeset .badge.iface-tm   { background: rgba(255, 57, 0, 0.10); }
.md-typeset .badge.iface-grpc { background: rgba(255, 57, 0, 0.05); }

/* Dark scheme: lift the text to a warm light tint so it stays legible. */
[data-md-color-scheme="slate"] .md-typeset .badge.iface { color: #ffae93; }
[data-md-color-scheme="slate"] .md-typeset .badge.iface-rpc  { background: rgba(255, 90, 48, 0.30); }
[data-md-color-scheme="slate"] .md-typeset .badge.iface-rest { background: rgba(255, 90, 48, 0.22); }
[data-md-color-scheme="slate"] .md-typeset .badge.iface-tm   { background: rgba(255, 90, 48, 0.15); }
[data-md-color-scheme="slate"] .md-typeset .badge.iface-grpc { background: rgba(255, 90, 48, 0.09); }

/* Sortable chain tables — pointer + arrow affordance on the Chain header. */
.md-typeset th.th-sortable { cursor: pointer; user-select: none; }
.md-typeset th.th-sortable::after { content: " ⇅"; opacity: 0.4; font-size: 0.8em; }
.md-typeset th.th-sortable[aria-sort="ascending"]::after { content: " ↑"; opacity: 0.9; }
.md-typeset th.th-sortable[aria-sort="descending"]::after { content: " ↓"; opacity: 0.9; }

/* ============================================================================
   Supported-chains explorer — logo wall + filterable card grid
   ============================================================================ */
.md-typeset #chains-explorer { margin: 1.5rem 0 2rem; }

/* Controls: search + ecosystem chips */
/* Stack the search box over the chips so the chips get the full content width
   on their own row — keeps all ecosystem chips on a single line. */
.md-typeset .cx-controls { display: flex; flex-direction: column; gap: 0.7rem; align-items: stretch; margin-bottom: 1.1rem; }
.md-typeset .cx-search {
  width: 100%;
  border: 1px solid var(--border-subtle); border-radius: 0.6rem;
  padding: 0.55rem 0.8rem; font-size: 0.8rem; background: var(--surface); color: var(--text-strong);
}
.md-typeset .cx-search:focus { outline: none; border-color: var(--primary); }
/* No wrap — all chips stay on one row. */
.md-typeset .cx-chips { display: flex; gap: 0.4rem; flex-wrap: nowrap; }
.md-typeset .cx-chip {
  border: 1px solid var(--border-subtle); background: var(--surface);
  border-radius: 999px; padding: 0.35rem 0.75rem; font-size: 0.72rem; font-weight: 600;
  color: var(--text-muted); cursor: pointer; transition: all var(--t);
}
.md-typeset .cx-chip:hover { color: var(--text-strong); }
.md-typeset .cx-chip.on { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Logo wall hero */
.md-typeset .cx-wall {
  display: flex; flex-wrap: wrap; gap: 0.45rem;
  padding: 1rem; margin-bottom: 1.4rem;
  background: var(--surface-subtle); border-radius: 0.9rem;
}
.md-typeset .cx-tile {
  width: 38px; height: 38px; border-radius: 50%;
  display: block; border-bottom: none !important;
  transition: transform 0.12s var(--ease), opacity 0.12s var(--ease);
}
.md-typeset .cx-tile:hover { transform: scale(1.18); z-index: 2; }
.md-typeset .cx-tile.dim { opacity: 0.12; pointer-events: none; }
.md-typeset .cx-tile img { width: 100%; height: 100%; border-radius: 50%; margin: 0; display: block; }

/* Card grid */
/* Equal-height cards (stretch), badge blocks bottom-anchored so every card
   aligns regardless of how many lines the name or badges take. */
/* V3 — exact translation of the approved mockup (3-col grid, 14px gap). */
.md-typeset .cx-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
@media (max-width: 50rem) { .md-typeset .cx-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 30rem) { .md-typeset .cx-cards { grid-template-columns: 1fr; } }
.md-typeset .cx-card {
  position: relative;
  border: 1px solid var(--border-subtle); border-radius: 18px;
  padding: 20px 16px; background: var(--surface);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.md-typeset .cx-card:hover { border-color: var(--primary); box-shadow: 0 6px 20px rgba(255,57,0,0.1); transform: translateY(-2px); }
.md-typeset .cx-card.flash {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(255, 57, 0, 0.35), 0 8px 26px rgba(255, 57, 0, 0.22);
  background: var(--md-accent-fg-color--transparent);
  animation: cx-pulse 1.4s var(--ease);
}
@keyframes cx-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 57, 0, 0.55); }
  18% { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(255, 57, 0, 0.4), 0 10px 30px rgba(255, 57, 0, 0.28); }
  100% { transform: scale(1); box-shadow: 0 0 0 4px rgba(255, 57, 0, 0.18); }
}

/* Icon 48px (override Material's phantom .svg margin via specificity). */
.md-typeset .cx-card img.cx-ico { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; margin: 0; display: block; }
.md-typeset .cx-wall img { margin: 0; }
.md-typeset .cx-name {
  font-weight: 700; font-size: 15px; line-height: 1.25; text-align: center; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.md-typeset .cx-eco {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); font-weight: 600; margin-top: -4px;
}

/* Spec link tucked into the top-right corner */
.md-typeset .cx-spec-row { position: absolute; top: 14px; right: 14px; display: flex; gap: 0.15rem; }
.md-typeset .cx-spec {
  font-size: 0.9rem; color: var(--text-muted);
  border-bottom: none !important; text-decoration: none; opacity: 0.5; transition: opacity var(--t), color var(--t);
}
.md-typeset .cx-spec:hover { opacity: 1; color: var(--primary); border-bottom: none !important; }

/* Badge rows (mockup: 4px gap, centred). */
.md-typeset .cx-nets, .md-typeset .cx-ifs { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 0; }
.md-typeset .cx-empty { color: var(--text-muted); font-style: italic; padding: 1rem 0; }

/* Badges — exact mockup: 6px rounded-rect, not pills. */
.md-typeset .cx-card .badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  border-radius: 6px; padding: 1px 7px; line-height: 1.6; border: none; letter-spacing: 0;
}
.md-typeset .cx-card .badge.net-main { color: var(--primary); background: rgba(255, 57, 0, 0.10); }
.md-typeset .cx-card .badge.net-test { color: var(--text-muted); background: rgba(23, 26, 24, 0.07); }
.md-typeset .cx-card .badge.iface { color: #9c2400; background: rgba(255, 57, 0, 0.10); font-size: 10px; padding: 1px 5px; }
[data-md-color-scheme="slate"] .md-typeset .cx-card .badge.net-test { color: var(--text-muted); background: rgba(255,255,255,0.08); }
[data-md-color-scheme="slate"] .md-typeset .cx-card .badge.iface { color: #ffae93; }

/* Chains explorer — pagination footer */
.md-typeset .cx-pager { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.2rem; flex-wrap: wrap; }
.md-typeset .cx-page-btn, .md-typeset .cx-showall {
  border: 1px solid var(--border-subtle); background: var(--surface);
  border-radius: 0.5rem; padding: 0.4rem 0.8rem; font-size: 0.74rem; font-weight: 600;
  color: var(--text-strong); cursor: pointer; transition: all var(--t);
}
.md-typeset .cx-page-btn:hover:not(:disabled), .md-typeset .cx-showall:hover { border-color: var(--primary); color: var(--primary); }
.md-typeset .cx-page-btn:disabled { opacity: 0.4; cursor: default; }
.md-typeset .cx-page-info { font-size: 0.74rem; color: var(--text-muted); }
.md-typeset .cx-showall { margin-left: auto; color: var(--primary); border-color: rgba(255,57,0,0.25); }

/* TOC: the injected page-title (H1) entry reads slightly stronger. */
.md-nav__item--toc-title > .md-nav__link { font-weight: 600; color: var(--text-strong); }

/* ============================================================================
   Header — clean GitHub icon + ⌘K search hint (drpc-style)
   ============================================================================ */
/* GitHub source: show only the icon, drop the repo name + star/fork facts. */
.md-header__source .md-source__repository { display: none; }
.md-header__source { width: auto; min-width: 0; }
.md-header__source .md-source__icon { margin: 0; }
.md-source__icon svg { width: 1.4rem; height: 1.4rem; }

/* ⌘K / Ctrl+K hint badge inside the search box */
.md-search__form { position: relative; }
.md-search__keyhint {
  position: absolute; top: 50%; right: 0.6rem; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 0.15rem;
  font-size: 0.62rem; font-weight: 600; line-height: 1;
  color: var(--text-muted);
  border: 1px solid var(--border-subtle); border-radius: 0.3rem;
  padding: 0.18rem 0.38rem; pointer-events: none;
  background: var(--surface-subtle);
}
/* hide the hint once the user is typing/focused */
.md-search__input:focus ~ .md-search__keyhint,
.md-search__input:not(:placeholder-shown) ~ .md-search__keyhint { opacity: 0; }