/* ==========================================================================
   Cantex Docs — brand theme
   Palette + type scraped from cantex-web (Next.js / Tailwind v4 tokens).
   Fonts: Onest (headings/brand) + Reddit Sans (body).
   Direction: clean, bright, generous whitespace.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=Reddit+Sans:ital,wght@0,300..800;1,300..800&family=Reddit+Mono:wght@400;500&display=swap");

/* --------------------------------------------------------------------------
   Brand tokens (mirrors cantex-web theme.css)
   -------------------------------------------------------------------------- */
:root {
  --ctx-blue:          #0055ff; /* primary-40  */
  --ctx-blue-bright:   #387bff; /* primary-50  */
  --ctx-blue-light:    #55b8ff; /* brand-blue-2 */
  --ctx-blue-10:       #00236a; /* primary-10  */
  --ctx-blue-90:       #e0eaff; /* primary-90  */

  --ctx-teal:          #00a1a1; /* valid-40    */
  --ctx-teal-bright:   #00c1c1; /* valid-50    */
  --ctx-teal-dull:     #018e8e; /* valid-30    */
  --ctx-teal-90:       #d7ffff; /* valid-90    */

  --ctx-pink:          #ff5182; /* error-50    */
  --ctx-pink-strong:   #e01e55; /* error-40    */

  --ctx-navy:          #001236; /* grey-10     */
  --ctx-grey-30:       #273f6e;
  --ctx-grey-40:       #40557e;
  --ctx-grey-50:       #546c91;
  --ctx-grey-60:       #8494ac;
  --ctx-grey-70:       #b5c1d2;
  --ctx-grey-80:       #d4d7e4;
  --ctx-grey-90:       #eeeff3; /* light app bg */

  --ctx-font-body:  "Reddit Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ctx-font-brand: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ctx-font-mono:  "Reddit Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* Wire the fonts into Material's type system */
:root {
  --md-text-font:  "Reddit Sans";
  --md-code-font:  "Reddit Mono";
  --md-text-font-family: var(--ctx-font-body);
  --md-code-font-family: var(--ctx-font-mono);
}

/* Stop the root font from ballooning on large monitors. Material scales
   html up to 137.5% at ≥100em and 150% at ≥125em; pin it to the 125% base
   so text stays a comfortable size on wide screens. */
@media screen and (min-width: 100em) {
  html {
    font-size: 125%;
  }
}
@media screen and (min-width: 125em) {
  html {
    font-size: 125%;
  }
}

/* Widen the content grid so the page uses more of the screen and the empty
   side margins shrink — closer to docs.cantex.io. Material centres everything
   inside a 61rem grid by default, which leaves large gutters on wide screens. */
.md-grid {
  max-width: 72rem;
}

/* Fill the viewport on short pages so the footer sits below the fold and only
   comes into view once you scroll. 2.4rem is the sticky header's height. */
.md-main {
  min-height: calc(100vh - 2.4rem);
}

/* ==========================================================================
   LIGHT SCHEME  (default) — the primary, bright look
   ========================================================================== */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        #ffffff;   /* header background            */
  --md-primary-fg-color--light: #ffffff;
  --md-primary-fg-color--dark:  var(--ctx-grey-90);
  --md-primary-bg-color:        var(--ctx-navy);   /* text/icons on header */
  --md-primary-bg-color--light: var(--ctx-grey-50);

  --md-accent-fg-color:            var(--ctx-blue-bright);
  --md-accent-fg-color--transparent: rgba(56, 123, 255, 0.1);

  --md-default-bg-color:        #ffffff;
  --md-default-fg-color:        rgba(0, 18, 54, 0.87);
  --md-default-fg-color--light: rgba(0, 18, 54, 0.62);
  --md-default-fg-color--lighter: rgba(0, 18, 54, 0.34);
  --md-default-fg-color--lightest: rgba(0, 18, 54, 0.08);

  --md-typeset-color:           var(--ctx-navy);
  --md-typeset-a-color:         var(--ctx-blue);
  --md-typeset-mark-color:      rgba(85, 184, 255, 0.35);

  --md-code-fg-color:           #2a3a5c;
  --md-code-bg-color:           #f2f4f8;
  --md-code-hl-color:           rgba(56, 123, 255, 0.12);

  --md-footer-bg-color:         var(--ctx-navy);
  --md-footer-bg-color--dark:   #000c22;
  --md-footer-fg-color:         #ffffff;
  --md-footer-fg-color--light:  rgba(255, 255, 255, 0.7);
  --md-footer-fg-color--lighter: rgba(255, 255, 255, 0.45);

  --ctx-surface:      #ffffff;
  --ctx-surface-soft: #f5f7fb;
  --ctx-border:       #e4e8f0;
  --ctx-border-soft:  #eef1f6;
}

/* ==========================================================================
   DARK SCHEME  (slate) — deep navy, same brand accents
   ========================================================================== */
[data-md-color-scheme="slate"] {
  --md-hue: 222;

  --md-primary-fg-color:        #050e24;
  --md-primary-fg-color--light: #0b1730;
  --md-primary-fg-color--dark:  #02060f;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  --md-accent-fg-color:            var(--ctx-blue-light);
  --md-accent-fg-color--transparent: rgba(85, 184, 255, 0.12);

  --md-default-bg-color:        #030814;
  --md-default-fg-color:        rgba(233, 238, 248, 0.9);
  --md-default-fg-color--light: rgba(233, 238, 248, 0.66);
  --md-default-fg-color--lighter: rgba(233, 238, 248, 0.36);
  --md-default-fg-color--lightest: rgba(233, 238, 248, 0.1);

  --md-typeset-color:           rgba(233, 238, 248, 0.9);
  --md-typeset-a-color:         var(--ctx-blue-light);
  --md-typeset-mark-color:      rgba(56, 123, 255, 0.3);

  --md-code-fg-color:           #c9d6ee;
  --md-code-bg-color:           #0b1327;
  --md-code-hl-color:           rgba(85, 184, 255, 0.14);

  --md-footer-bg-color:         #050e24;
  --md-footer-bg-color--dark:   #02060f;

  --ctx-surface:      #0a1226;
  --ctx-surface-soft: #0b1327;
  --ctx-border:       #1a2540;
  --ctx-border-soft:  #141d33;
}

/* ==========================================================================
   Typography
   ========================================================================== */
body,
.md-typeset {
  font-family: var(--ctx-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.md-typeset {
  font-size: 0.8rem;
  line-height: 1.7;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6,
.md-header__title,
.md-nav__title,
.md-ellipsis {
  font-family: var(--ctx-font-brand);
  font-feature-settings: "ss01", "cv01";
}

.md-typeset h1 {
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--md-typeset-color);
  margin-bottom: 0.6em;
}

.md-typeset h2 {
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-top: 2.2em;
}

.md-typeset h3 {
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  margin-top: 1.8em;
}

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

/* Section labels in the sidebar — mirrors cantex-web SectionLabel */
.md-nav__item--section > .md-nav__link,
.md-nav--primary .md-nav__title[for="__drawer"] {
  font-family: var(--ctx-font-brand);
}

/* ==========================================================================
   Header — bright, flat, with a hairline instead of a shadow
   ========================================================================== */
.md-header {
  color: var(--md-primary-bg-color);
  box-shadow: none;
  border-bottom: 1px solid var(--ctx-border);
  backdrop-filter: saturate(1.4) blur(6px);
}

.md-header--shadow {
  box-shadow: 0 2px 12px rgba(0, 18, 54, 0.06);
  transition: box-shadow 0.25s;
}

.md-header__title {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.5rem;
  width: auto;
}

/* Light/dark toggle lives in the top-right corner */
.md-header__option[data-md-component="palette"] {
  order: 10;
  margin-left: 0.3rem;
}

/* Search box — pill, brand-tinted */
.md-search__form {
  border-radius: 999px;
  background-color: var(--ctx-surface-soft);
  box-shadow: none;
  border: 1px solid var(--ctx-border);
}
.md-search__form:hover {
  background-color: var(--ctx-surface-soft);
  border-color: var(--ctx-grey-70);
}
[data-md-color-scheme="default"] .md-search__input {
  color: var(--ctx-navy);
}
[data-md-color-scheme="default"] .md-search__input::placeholder {
  color: var(--ctx-grey-60);
}

/* Tabs (if enabled) */
.md-tabs {
  background: transparent;
  color: var(--md-primary-bg-color);
}

/* ==========================================================================
   Links
   ========================================================================== */
.md-typeset a {
  color: var(--md-typeset-a-color);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}
.md-typeset a:hover {
  color: var(--ctx-blue-bright);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ==========================================================================
   Sidebar navigation — matched to docs.cantex.io (GitBook)
   Menu items: roomy, dark-grey, no active pill (blue text only).
   Dropdowns: chevron affordance + a vertical guide line on nested children.
   ========================================================================== */
.md-nav {
  font-size: 0.78rem;
  line-height: 1.4;
}

/* Both sidebars kept as narrow as possible while still fitting every nav label
   on one line. The longest label ("How Cantex Works (Overview)") renders at
   ~211px; with link padding, the 8px right margin, one level of nesting indent
   and the trimmed inner padding the fixed overhead is ~60px, so 14rem (280px)
   leaves the text ~220px — a safe buffer. Material otherwise pins the nav
   content to 11.5rem via .md-sidebar__inner padding, so that padding is trimmed
   too. Primary and secondary share the width so the content stays centred. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary,
  .md-sidebar--secondary {
    width: 15rem;
  }
  [dir="ltr"] .md-sidebar--primary .md-sidebar__inner {
    padding-right: 0.5rem;
  }
  [dir="rtl"] .md-sidebar--primary .md-sidebar__inner {
    padding-left: 0.5rem;
  }
}

/* Wider slide-out navigation drawer on mobile / tablet. Material's drawer is
   12.1rem; widen it (capped to the viewport) and keep the off-screen offset
   and open-state transform in sync via one variable. */
@media screen and (max-width: 76.234375em) {
  :root {
    --ctx-drawer-w: min(19rem, 84vw);
  }
  .md-sidebar--primary {
    width: var(--ctx-drawer-w);
  }
  [dir="ltr"] .md-sidebar--primary {
    left: calc(-1 * var(--ctx-drawer-w));
  }
  [dir="rtl"] .md-sidebar--primary {
    right: calc(-1 * var(--ctx-drawer-w));
  }
  [dir="ltr"] [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary {
    transform: translateX(var(--ctx-drawer-w));
  }
  [dir="rtl"] [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary {
    transform: translateX(calc(-1 * var(--ctx-drawer-w)));
  }

  /* Material pins the nav to a fixed 11.5rem with .md-sidebar__inner padding,
     which would leave the widened drawer two-thirds empty — trim it here too. */
  [dir="ltr"] .md-sidebar--primary .md-sidebar__inner {
    padding-right: 0.4rem;
  }
  [dir="rtl"] .md-sidebar--primary .md-sidebar__inner {
    padding-left: 0.4rem;
  }

  /* Material hides the logo in the header on mobile — bring it back, with the
     hamburger to its left (the logo comes first in the DOM, so reorder it). */
  .md-header__button.md-logo {
    display: inline-block;
    padding: 0.4rem;
  }
  .md-header > .md-header__inner > .md-header__button[for="__drawer"] {
    order: -1;
  }
  /* Tighten the gap between the logo and the wordmark (Material leaves a 1rem
     margin on the title, which is a lot next to the small mobile logo). */
  [dir="ltr"] .md-header__title {
    margin-left: 0.3rem;
  }
  [dir="rtl"] .md-header__title {
    margin-right: 0.3rem;
  }
  .md-header__button.md-logo img,
  .md-header__button.md-logo svg {
    height: 1.4rem;
    width: auto;
  }

  /* --------------------------------------------------------------------
     Flatten the drawer into one scrolling list, like docs.cantex.io.
     Material builds the mobile nav as absolutely-positioned sliding panes
     (a drill-down); making them static turns the whole tree into a single
     column that scrolls, with every section shown in place.
     -------------------------------------------------------------------- */
  .md-sidebar--primary .md-nav--primary,
  .md-sidebar--primary .md-nav--primary .md-nav {
    position: static;
    display: block;
    height: auto;
    background-color: transparent;
    transform: none;
  }
  /* The per-section drill headers (and their back arrows) are meaningless in a
     flat list — only the main "Cantex Docs" header stays. */
  .md-sidebar--primary .md-nav--primary .md-nav .md-nav__title {
    display: none;
  }
  /* Keep the groups collapsible, expanded by default. navigation.expand marks
     untouched toggles .md-toggle--indeterminate (Material's JS leaves them
     unchecked until the user clicks), so match that class as well as :checked —
     the same pairing the desktop stylesheet uses. */
  .md-sidebar--primary .md-nav--primary .md-nav__toggle ~ .md-nav {
    display: none;
  }
  .md-sidebar--primary
    .md-nav--primary
    .md-nav__toggle.md-toggle--indeterminate
    ~ .md-nav,
  .md-sidebar--primary .md-nav--primary .md-nav__toggle:checked ~ .md-nav {
    display: block;
    /* the drill-down keeps panes hidden with opacity/translate, not just
       display — reset those too or the items take up space but never paint */
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* Top-level sections are always-open labels here, exactly like the live site:
     never depend on the toggle (Material's JS leaves those unchecked), and drop
     their chevron since there is nothing to expand. Deeper dropdowns such as
     Public API keep their toggle and chevron. */
  .md-sidebar--primary
    .md-nav--primary
    > .md-nav__list
    > .md-nav__item
    > .md-nav {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .md-sidebar--primary
    .md-nav--primary
    > .md-nav__list
    > .md-nav__item
    > .md-nav__link
    .md-nav__icon {
    display: none;
  }

  /* Uniform spacing for every section label — the desktop rule gives the first
     one a smaller top margin than the rest, which reads as a misalignment. */
  .md-sidebar--primary
    .md-nav--primary
    > .md-nav__list
    > .md-nav__item
    > .md-nav__link,
  .md-sidebar--primary
    .md-nav--primary
    > .md-nav__list
    > .md-nav__item:first-child
    > .md-nav__link {
    margin: 1rem 0 0.2rem;
    padding: 0.2rem 0.8rem;
  }

  /* Scrolling: the drill-down scrolled the flex pane's own list, which the flat
     layout no longer has — move the scrolling to the sidebar wrapper. */
  .md-sidebar--primary .md-sidebar__scrollwrap {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .md-sidebar--primary .md-nav--primary .md-nav__list {
    overflow: visible;
    scroll-snap-type: none;
    box-shadow: none;
  }
  /* Chevron points down while the group is open. */
  .md-sidebar--primary
    .md-nav__item--nested
    .md-nav__toggle.md-toggle--indeterminate
    ~ .md-nav__link
    .md-nav__icon::after,
  .md-sidebar--primary
    .md-nav__item--nested
    .md-nav__toggle:checked
    ~ .md-nav__link
    .md-nav__icon::after {
    transform: rotate(90deg);
  }

  /* The drill-down look put a divider above every row; the flat list reads
     cleaner without them, like the live site. */
  .md-sidebar--primary .md-nav--primary .md-nav__item {
    border-top: none;
  }

  /* Drawer header: logo beside the wordmark, on one tidy row. */
  .md-sidebar--primary .md-nav--primary > .md-nav__title {
    height: auto;
    line-height: 1.5;
    padding: 1rem 0.8rem 1rem 3.7rem;
  }
  .md-sidebar--primary .md-nav--primary > .md-nav__title .md-logo {
    top: 50%;
    margin: 0;
    padding: 0 0.4rem;
    transform: translateY(-50%);
  }
  .md-sidebar--primary .md-nav--primary > .md-nav__title .md-logo img {
    height: 1.6rem;
  }
}

/* Drop the redundant sidebar title on desktop — the logo lives in the header,
   just like the live site. Keep it on mobile so the drawer has its header. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav--primary > .md-nav__title {
    display: none;
  }
}

.md-nav__list {
  padding: 0;
}

.md-nav__item {
  padding: 0;
}

.md-nav__link {
  color: var(--md-default-fg-color--light);
  font-weight: 400;
  border-radius: 8px;
  padding: 0.42em 0.7em;
  margin: 0.06em 0;
  gap: 0.4rem;
  transition: background-color 0.12s, color 0.12s;
}

.md-nav__link:hover {
  color: var(--md-typeset-color);
  background-color: var(--ctx-border-soft);
}

/* Active leaf item — blue text, no background pill (GitBook style) */
.md-nav__item .md-nav__link--active,
.md-nav__link--active,
.md-nav__link--active:hover {
  color: var(--ctx-blue);
  font-weight: 600;
  background-color: transparent;
}
[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__link--active:hover {
  color: var(--ctx-blue-light);
}

/* Top-level groups (INTRODUCTION, DEVELOPERS, …) — collapsible section
   headings: uppercase & bold, each carries an expand/collapse chevron so the
   whole section can be folded away. They stay on one line and share one
   uniform colour — including the active one (Welcome to Cantex included). */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--md-default-fg-color);
  margin: 1.4em 0 0.2em;
  padding: 0.3em 0.7em;
  white-space: nowrap;
}
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link:hover {
  background-color: var(--ctx-border-soft);
}
/* Keep the active section heading the same dark colour as every other one */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link--active,
.md-nav--primary > .md-nav__list > .md-nav__item--active > .md-nav__link {
  color: var(--md-default-fg-color);
}
/* First group shouldn't push the list down */
.md-nav--primary > .md-nav__list > .md-nav__item:first-child > .md-nav__link {
  margin-top: 0.25em;
}

/* Top-level group children sit flush under the label (GitBook style) */
.md-nav--primary > .md-nav__list > .md-nav__item--nested > .md-nav > .md-nav__list {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

/* Deeper collapsible dropdowns (e.g. Public API) — title-case item with a
   chevron and a left guide line on its child list, mirroring the live site. */
.md-nav--primary
  .md-nav__item--nested
  .md-nav__item--nested
  > .md-nav__link {
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--md-typeset-color);
  margin: 0.06em 0;
}
.md-nav--primary
  .md-nav__item--nested
  .md-nav__item--nested
  > .md-nav
  > .md-nav__list {
  margin-left: 0.55rem;
  padding-left: 0.55rem;
  border-left: 1px solid var(--ctx-border);
}

/* Expand/collapse chevron — quiet grey, tints on hover */
.md-nav__icon {
  color: var(--md-default-fg-color--lighter);
  transition: transform 0.2s, color 0.12s;
}
.md-nav__link:hover .md-nav__icon,
.md-nav__item--active > .md-nav__link .md-nav__icon {
  color: var(--md-default-fg-color--light);
}

/* Secondary nav (right-hand table of contents) active marker */
.md-nav--secondary .md-nav__link--active {
  color: var(--ctx-blue);
}
[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link--active {
  color: var(--ctx-blue-light);
}

/* ==========================================================================
   Content surfaces — code, tables, admonitions, cards
   ========================================================================== */

/* Inline & block code */
.md-typeset code {
  font-family: var(--ctx-font-mono);
  border-radius: 5px;
  font-size: 0.82em;
  padding: 0.12em 0.4em;
  background-color: var(--md-code-bg-color);
}

.md-typeset pre > code {
  padding: 0.9rem 1rem;
}

.md-typeset .highlight,
.md-typeset pre {
  border-radius: 12px;
}
.md-typeset pre > code {
  border-radius: 12px;
  border: 1px solid var(--ctx-border);
}

/* Copy button */
.md-clipboard {
  color: var(--md-default-fg-color--lighter);
}
.md-clipboard:hover {
  color: var(--ctx-blue);
}

/* Tables — clean, bright, subtle borders */
.md-typeset table:not([class]) {
  border: 1px solid var(--ctx-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none;
  font-size: 0.76rem;
}
.md-typeset table:not([class]) th {
  background-color: var(--ctx-surface-soft);
  color: var(--md-typeset-color);
  font-family: var(--ctx-font-brand);
  font-weight: 600;
  border-bottom: 1px solid var(--ctx-border);
}
.md-typeset table:not([class]) td {
  border-top: 1px solid var(--ctx-border-soft);
}
.md-typeset table:not([class]) tr:hover {
  background-color: var(--ctx-border-soft);
}

/* Images — clean and centred like the live site: no frame, softly rounded,
   and standalone images sit centred in the column (full-width shots stay
   full-width; smaller ones like the Connect logo centre themselves). */
.md-typeset img {
  border-radius: 8px;
  max-width: 100%;
}
.md-typeset p > img:only-child,
.md-typeset figure > img {
  display: block;
  margin-inline: auto;
}

/* Horizontal rule */
.md-typeset hr {
  border-bottom: 1px solid var(--ctx-border);
}

/* Blockquote */
.md-typeset blockquote {
  border-left: 3px solid var(--ctx-blue-light);
  color: var(--md-default-fg-color--light);
}

/* ==========================================================================
   Admonitions — GitBook-style callouts (docs.cantex.io)
   Soft tinted box, small inline icon, NO "Info / Warning / Danger" title
   label. The colour alone carries the meaning: info → neutral grey,
   warning → amber, danger → red.
   ========================================================================== */
.md-typeset .admonition {
  position: relative;
  border: none;
  border-radius: 10px;
  box-shadow: none;
  padding: 0.85rem 1rem 0.85rem 2.65rem;
  font-size: 0.74rem;
  background-color: rgba(132, 148, 172, 0.13); /* neutral default */
}

/* Drop the auto-generated title bar ("Info", "Warning", …) entirely */
.md-typeset .admonition > .admonition-title {
  display: none;
}
.md-typeset .admonition > .admonition-title + * {
  margin-top: 0;
}
.md-typeset .admonition > :last-child {
  margin-bottom: 0;
}

/* Inline icon, top-left, coloured per type (reuses Material's icon masks) */
.md-typeset .admonition::before {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 0.92rem;
  width: 1.05rem;
  height: 1.05rem;
  background-color: var(--ctx-grey-60);
  -webkit-mask: var(--md-admonition-icon--info) center / contain no-repeat;
  mask: var(--md-admonition-icon--info) center / contain no-repeat;
}

/* info / note → neutral grey */
.md-typeset .admonition.info,
.md-typeset .admonition.note {
  background-color: rgba(132, 148, 172, 0.13);
}
.md-typeset .admonition.info::before,
.md-typeset .admonition.note::before {
  background-color: var(--ctx-grey-60);
  -webkit-mask-image: var(--md-admonition-icon--info);
  mask-image: var(--md-admonition-icon--info);
}

/* tip / success → teal */
.md-typeset .admonition.tip,
.md-typeset .admonition.success {
  background-color: rgba(0, 161, 161, 0.12);
}
.md-typeset .admonition.tip::before,
.md-typeset .admonition.success::before {
  background-color: var(--ctx-teal);
  -webkit-mask-image: var(--md-admonition-icon--tip);
  mask-image: var(--md-admonition-icon--tip);
}

/* warning → amber */
.md-typeset .admonition.warning {
  background-color: rgba(255, 131, 15, 0.12);
}
.md-typeset .admonition.warning::before {
  background-color: #ef8c0a;
  -webkit-mask-image: var(--md-admonition-icon--warning);
  mask-image: var(--md-admonition-icon--warning);
}

/* danger / failure → red */
.md-typeset .admonition.danger,
.md-typeset .admonition.failure {
  background-color: rgba(229, 72, 77, 0.12);
}
.md-typeset .admonition.danger::before,
.md-typeset .admonition.failure::before {
  background-color: #e5484d;
  -webkit-mask-image: var(--md-admonition-icon--danger);
  mask-image: var(--md-admonition-icon--danger);
}

/* ==========================================================================
   Buttons  (.md-button — used for CTAs in markdown)
   ========================================================================== */
.md-typeset .md-button {
  border-radius: 999px;
  font-family: var(--ctx-font-brand);
  font-weight: 600;
  border: 1px solid var(--ctx-blue);
  color: var(--ctx-blue);
  padding: 0.5em 1.4em;
  transition: all 0.15s;
}
.md-typeset .md-button:hover {
  background-color: var(--ctx-blue);
  border-color: var(--ctx-blue);
  color: #fff;
}
.md-typeset .md-button--primary {
  background-color: var(--ctx-blue);
  border-color: var(--ctx-blue);
  color: #fff;
}
.md-typeset .md-button--primary:hover {
  background-color: var(--ctx-blue-bright);
  border-color: var(--ctx-blue-bright);
}

/* ==========================================================================
   Tabbed content
   ========================================================================== */
.md-typeset .tabbed-labels > label {
  font-family: var(--ctx-font-brand);
  font-weight: 600;
}
.md-typeset .tabbed-labels > label > [href]:hover,
.md-typeset .tabbed-set > input:checked + label {
  color: var(--ctx-blue);
}
.md-typeset .tabbed-labels--linked > label > a {
  color: inherit;
}
[data-md-color-scheme="default"] .js .md-typeset .tabbed-labels::before {
  background: var(--ctx-blue);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.md-footer-meta {
  background-color: var(--md-footer-bg-color--dark);
}
.md-footer__title {
  font-family: var(--ctx-font-brand);
}

/* ==========================================================================
   Selection & scrollbar polish
   ========================================================================== */
::selection {
  background-color: rgba(85, 184, 255, 0.3);
}

.md-typeset :target {
  scroll-margin-top: 4rem;
}