/* ast-outline — custom theme tweaks */

:root {
  --md-primary-fg-color:        #0d1117;
  --md-primary-fg-color--light:  #161b22;
  --md-primary-fg-color--dark:   #010409;
  --md-accent-fg-color:          #2ea043;
  --md-accent-fg-color--transparent: rgba(46, 160, 67, 0.1);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:         #010409;
  --md-primary-fg-color--light:  #0d1117;
  --md-default-bg-color:         #0d1117;
  --md-accent-fg-color:          #7ee787;
  --md-typeset-a-color:          #7ee787;
}

/* ─── Hero (landing page) ─────────────────────────────────── */

.ast-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* ~40% tighter than the original 3rem / 2.25rem block — keeps the
     hero feeling distinct without eating the fold above "See it live". */
  padding: 1.75rem 1rem 1.35rem;
  background:
    radial-gradient(circle at 50% 0%, rgba(126, 231, 135, 0.07), transparent 60%),
    linear-gradient(180deg,
      var(--md-default-bg-color) 0%,
      var(--md-code-bg-color) 100%);
  border-radius: 12px;
  margin: 0.6rem 0 1.5rem;
  position: relative;
  overflow: hidden;
}

/* Subtle dot grid behind the hero */
.ast-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle, rgba(139, 148, 158, 0.18) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.5;
  pointer-events: none;
  mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
}

.ast-hero > * { position: relative; }

.ast-hero__title {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  /* Original `clamp(2rem, 5vw, 3.5rem)` — shrunk ~30% so the title
     still anchors the hero but doesn't dominate the fold. */
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--md-default-fg-color);
  display: inline-flex;
  align-items: baseline;
  gap: 0.05em;
}

/* Blinking caret right after the wordmark */
.ast-hero__title::after {
  content: "";
  display: inline-block;
  width: 0.55ch;
  height: 0.95em;
  margin-left: 0.25em;
  background: var(--md-accent-fg-color, #2ea043);
  animation: ast-blink 1.05s step-end infinite;
  vertical-align: text-bottom;
}

/* Hide the auto-generated `¶` anchor on the hero title */
.ast-hero__title .headerlink {
  display: none;
}

.ast-hero__title .ast-hero__bracket {
  color: var(--md-accent-fg-color);
  opacity: 0.85;
}

.ast-hero__tagline {
  font-size: 1rem;
  max-width: 42rem;
  margin: 0.45rem auto 0.85rem;
  color: var(--md-default-fg-color--light);
  line-height: 1.5;
}

.ast-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: center;
  margin-top: 0.25rem;
}

.ast-hero__cta a.md-button {
  padding: 0.4em 0.9em;
}

/* Badge row immediately below the hero — pull it up tight, badges are
   self-contained pills and don't need surrounding margin. */
.md-typeset .ast-hero + p {
  margin: 0.4rem 0 0;
  text-align: center;
  line-height: 1;
}

/* Horizontal rule that separates the hero block from the
   "See it live" section — original Material default leaves ~3rem of
   combined vertical whitespace, halve it. */
.md-typeset .ast-hero ~ hr {
  margin: 0.9rem 0;
}

/* "See it live" h2 heading right after the hero/separator — Material's
   default top margin on h2 stacks on top of the hr's margin, so we
   pull it in. */
.md-typeset .ast-hero ~ h2 {
  margin-top: 1rem;
}

.ast-hero__cta a.md-button {
  font-weight: 600;
}

/* Stats pills row under the hero */
.ast-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  justify-content: center;
  margin-top: 1.25rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  color: var(--md-default-fg-color--light);
}

.ast-hero__stats span {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.ast-hero__stats strong {
  color: var(--md-accent-fg-color);
  font-weight: 700;
}

/* ─── Console blocks (terminal-style code) ───────────────── */

/* Outer container — the "terminal window" */
.ast-console {
  background: #0d1117;
  color: #c9d1d9;
  border-radius: 8px;
  font-family: "JetBrains Mono", "Fira Code", "SF Mono", monospace;
  font-size: 0.74rem;
  font-feature-settings: "calt" 1, "liga" 1;
  line-height: 1.5;
  overflow: hidden;
  margin: 1rem 0;
  border: 1px solid #30363d;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

/* Window chrome (top bar with macOS dots + title) */
.ast-console__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 1rem;
  background: linear-gradient(180deg, #161b22 0%, #0d1117 100%);
  border-bottom: 1px solid #30363d;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.ast-console__dots {
  display: inline-flex;
  gap: 0.4em;
  flex-shrink: 0;
}
.ast-console__dots::before { content: "●"; color: #ff5f57; }
.ast-console__dots .y     { color: #febc2e; }
.ast-console__dots .g     { color: #28c840; }
.ast-console__dots .y::before,
.ast-console__dots .g::before { content: "●"; }

.ast-console__title {
  color: #8b949e;
  flex: 1;
  text-align: center;
  user-select: none;
}

/* Command line — distinct band, brighter, with green caret */
.ast-console__cmd {
  padding: 0.7rem 1rem 0.5rem;
  color: #58a6ff;
  font-weight: 500;
  border-bottom: 1px dashed rgba(126, 231, 135, 0.18);
  background: rgba(126, 231, 135, 0.03);
  white-space: pre;
  overflow-x: auto;
}

.ast-console__cmd .ast-prompt {
  color: #7ee787;
  font-weight: 700;
  margin-right: 0.5em;
  user-select: none;
}

.ast-console__cmd::after {
  content: "▋";
  color: #7ee787;
  margin-left: 0.25em;
  animation: ast-blink 1.05s step-end infinite;
}

@keyframes ast-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* Output — the actual ast-outline result */
pre.ast-console__out {
  margin: 0;
  padding: 0.85rem 1rem 1rem;
  background: transparent;
  color: #c9d1d9;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: pre;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

pre.ast-console__out code {
  background: transparent;
  padding: 0;
  border: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
}

.ast-console .ast-comment,
.ast-console .ast-doc {
  color: #8b949e;
  font-style: italic;
}

.ast-console .ast-doc {
  color: #6e7681;
}

.ast-console .ast-attr {
  color: #ffa657;
}

.ast-console .ast-string {
  color: #a5d6ff;
}

.ast-console .ast-keyword {
  color: #ff7b72;
}

.ast-console .ast-type {
  color: #d2a8ff;
}

.ast-console .ast-method {
  color: #79c0ff;
}

.ast-console .ast-marker {
  color: #ffa657;
}

.ast-console .ast-line {
  color: #8b949e;
  font-size: 0.78rem;
}

/* ─── Cards grid (next-steps section) ─────────────────────── */

.grid.cards > ul > li {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 10px;
  padding: 1.25rem;
  transition: border-color 200ms, transform 200ms;
}

.grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
  transform: translateY(-2px);
}

/* ─── Header: terminal title-bar style ───────────────────── */

.md-header {
  background: linear-gradient(180deg, #1c2128 0%, #0d1117 100%);
  border-bottom: 1px solid #30363d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 2px 6px rgba(0, 0, 0, 0.25);
}

/* macOS-style traffic-light dots on the far left of the header */
.md-header__inner::before {
  content: "";
  display: inline-block;
  width: 56px;
  height: 12px;
  flex-shrink: 0;
  margin: 0 0.65rem 0 1rem;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="56" height="12" viewBox="0 0 56 12"><circle cx="6" cy="6" r="5" fill="%23ff5f57"/><circle cx="26" cy="6" r="5" fill="%23febc2e"/><circle cx="46" cy="6" r="5" fill="%2328c840"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* Hide the default tiny tree logo — wordmark already says "ast-outline" */
.md-header .md-logo {
  display: none;
}

/* Breadcrumb-style site title */
.md-header__title {
  font-family: "JetBrains Mono", "Fira Code", "SF Mono", monospace;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #c9d1d9;
}

.md-header__topic:first-child .md-ellipsis {
  color: #c9d1d9;
}

.md-header__topic:first-child .md-ellipsis::before {
  content: "~/";
  color: #6e7681;
  margin-right: 0.05em;
}

.md-header__topic:first-child .md-ellipsis::after {
  content: " — main";
  color: #6e7681;
  font-weight: 400;
}

/* Source repo card on the right — keep it tidy, terminal-toned */
.md-header__source {
  font-family: "JetBrains Mono", monospace;
}

.md-source__repository {
  font-size: 0.72rem;
}

.md-source__fact {
  font-size: 0.65rem;
  opacity: 0.75;
}

/* ─── Tabs nav: render as a shell prompt with commands ──── */

.md-tabs {
  background: #0d1117;
  border-bottom: 1px solid #30363d;
  color: #c9d1d9;
}

.md-tabs__list {
  align-items: center;
}

/* `$` prompt prefix before the nav items */
.md-tabs__list::before {
  content: "$";
  display: inline-flex;
  align-self: center;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: #7ee787;
  margin: 0 0.6rem 0 1rem;
  user-select: none;
  flex-shrink: 0;
}

.md-tabs__item {
  height: auto;
}

.md-tabs__link {
  font-family: "JetBrains Mono", "Fira Code", "SF Mono", monospace;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-top: 0;
  opacity: 0.8;
  transition: opacity 150ms ease, color 150ms ease;
}

.md-tabs__link:hover {
  opacity: 1;
  color: #c9d1d9;
}

.md-tabs__link--active {
  opacity: 1;
  color: #7ee787;
  font-weight: 600;
}

/* ─── Inline code refinements ─────────────────────────────── */

.md-typeset code {
  font-feature-settings: "calt" 1, "liga" 1;
  font-size: 0.85em;
  border-radius: 4px;
  padding: 0.1em 0.4em;
}

/* Compact code blocks inside the "See it live" tab set + terminal-style title */
.tabbed-set .highlight pre,
.tabbed-set .highlight code {
  font-size: 0.74rem !important;
  line-height: 1.45 !important;
}

.tabbed-set .highlight .filename,
.tabbed-set .highlighttable .filename {
  font-family: "JetBrains Mono", "Fira Code", "SF Mono", monospace;
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, #161b22 0%, #0d1117 100%);
  color: #7ee787;
  border-bottom: 1px solid #30363d;
}

[data-md-color-scheme="default"] .tabbed-set .highlight .filename,
[data-md-color-scheme="default"] .tabbed-set .highlighttable .filename {
  background: linear-gradient(180deg, #f6f8fa 0%, #ebeef2 100%);
  color: #2ea043;
  border-bottom: 1px solid #d0d7de;
}

/* ─── Tables ──────────────────────────────────────────────── */

.md-typeset table:not([class]) th {
  background: var(--md-code-bg-color);
}

/* ─── Footer attribution ──────────────────────────────────── */

.md-copyright {
  font-size: 0.75rem;
  line-height: 1.6;
  max-width: 56rem;
}

.md-copyright__highlight {
  display: block;
  padding-block: 0.5rem;
}

/* ─── Marker tag pills (for [async]/[deprecated]/etc.) ───── */

.ast-tag {
  display: inline-block;
  padding: 0.05em 0.5em;
  margin: 0 0.15em;
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78em;
  font-weight: 500;
  background: var(--md-accent-fg-color--transparent);
  color: var(--md-accent-fg-color);
  border: 1px solid var(--md-accent-fg-color);
}

.ast-tag--warn {
  background: rgba(255, 166, 87, 0.1);
  color: #d2691e;
  border-color: #d2691e;
}

[data-md-color-scheme="slate"] .ast-tag--warn {
  color: #ffa657;
  border-color: #ffa657;
}

/* ─── Language picker (showcase tabs as a centered pill row) ─
 *
 * The "See it live" tabs render as a horizontal row by default, which
 * stops scaling around 10-12 languages. We wrap that one tab-set in
 * `<div class="ast-langs" markdown="1">` and re-style only its labels
 * row as a centered, wrapping pill row with each language tinted in its
 * own brand color. The picker grows down (more rows) instead of
 * overflowing right; rows centre-align so a partial last row sits
 * balanced. The underlying `tabbed-content` panes keep mkdocs-material's
 * default exactly-one-visible behavior. Zero JS.
 *
 * Flex (not grid) is used so the last row centers naturally — grid's
 * auto-fill keeps cells full-width, leaving the last row left-aligned
 * with empty space on the right.
 */

/* `.md-typeset .ast-langs ...` (specificity 0,3,0) beats mkdocs-material's
   own `.md-typeset .tabbed-labels` (0,2,0), so the divider line that
   normally sits under the labels row is reliably suppressed and our
   pill styling wins without `!important`. */
.md-typeset .ast-langs .tabbed-labels,
.md-typeset .ast-langs .tabbed-set {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem;
  border: 0;
  border-bottom: 0;
  box-shadow: none;
  margin: 0 0 0.85rem;
  padding: 0;
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
}

/* Kill the top-border / divider on the content pane — without this,
   the content area still draws a 1px line right under the pill row. */
.md-typeset .ast-langs .tabbed-content,
.md-typeset .ast-langs .tabbed-set > .tabbed-content {
  border-top: 0;
  padding-top: 0.25rem;
}

.md-typeset .ast-langs .tabbed-labels > label {
  /* Default accent — overridden per language by the nth-child rules
     below. Drives the icon color in the default state and the
     border / text / background in hover and active states. */
  --ast-lang-accent: var(--md-default-fg-color--light);

  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.18em 0.6em;
  margin: 0;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 999px;
  font-family: "JetBrains Mono", "Fira Code", "SF Mono", monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.45;
  color: var(--md-default-fg-color--light);
  background: var(--md-code-bg-color);
  cursor: pointer;
  transition: border-color 150ms, color 150ms, background 150ms,
              transform 150ms, box-shadow 150ms;
  white-space: nowrap;
}

/* Slightly smaller icon so the pill height stays compact even with
   the brand-color glyph. */
.md-typeset .ast-langs .tabbed-labels > label > .twemoji {
  font-size: 0.85em;
}

/* Per-language accent — drives icon color, hover, active. Order matches
   the markdown source: 1 Python, 2 TypeScript, 3 JavaScript, 4 Rust,
   5 C#, 6 C++, 7 Java, 8 Kotlin, 9 Scala, 10 Go, 11 PHP, 12 Ruby,
   13 CSS, 14 SCSS, 15 YAML, 16 Markdown. Inserting a language between
   existing tabs shifts subsequent indexes — keep this list and the
   markdown source in sync. */
.ast-langs .tabbed-labels > label:nth-child(1)  { --ast-lang-accent: #3776ab; }
.ast-langs .tabbed-labels > label:nth-child(2)  { --ast-lang-accent: #2b7489; }
.ast-langs .tabbed-labels > label:nth-child(3)  { --ast-lang-accent: #ca8a04; }
.ast-langs .tabbed-labels > label:nth-child(4)  { --ast-lang-accent: #ce422b; }
.ast-langs .tabbed-labels > label:nth-child(5)  { --ast-lang-accent: #9b4f96; }
.ast-langs .tabbed-labels > label:nth-child(6)  { --ast-lang-accent: #f34b7d; }
.ast-langs .tabbed-labels > label:nth-child(7)  { --ast-lang-accent: #d9701f; }
.ast-langs .tabbed-labels > label:nth-child(8)  { --ast-lang-accent: #7f52ff; }
.ast-langs .tabbed-labels > label:nth-child(9)  { --ast-lang-accent: #dc322f; }
.ast-langs .tabbed-labels > label:nth-child(10) { --ast-lang-accent: #00add8; }
.ast-langs .tabbed-labels > label:nth-child(11) { --ast-lang-accent: #777bb4; }
.ast-langs .tabbed-labels > label:nth-child(12) { --ast-lang-accent: #cc342d; }
.ast-langs .tabbed-labels > label:nth-child(13) { --ast-lang-accent: #1572b6; }
.ast-langs .tabbed-labels > label:nth-child(14) { --ast-lang-accent: #cf649a; }
.ast-langs .tabbed-labels > label:nth-child(15) { --ast-lang-accent: #6e7681; }
.ast-langs .tabbed-labels > label:nth-child(16) { --ast-lang-accent: #4a90e2; }
.ast-langs .tabbed-labels > label:nth-child(17) { --ast-lang-accent: #336791; }

/* Icon picks up the language accent in the default state. mkdocs-material
   inlines the SVG without an explicit `fill` attribute, so without the
   override the glyph inherits the label's text color (gray). Setting
   `fill` directly on every nested element — `svg`, `path`, `circle` —
   wins over `fill: currentcolor` rules from the theme regardless of
   their specificity. */
.md-typeset .ast-langs .tabbed-labels > label .twemoji,
.md-typeset .ast-langs .tabbed-labels > label .twemoji svg,
.md-typeset .ast-langs .tabbed-labels > label .twemoji svg path,
.md-typeset .ast-langs .tabbed-labels > label .twemoji svg circle {
  color: var(--ast-lang-accent);
  fill: var(--ast-lang-accent);
}

.md-typeset .ast-langs .tabbed-labels > label:hover {
  border-color: var(--ast-lang-accent);
  color: var(--md-default-fg-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Active pill — language accent fills the pill so the selection reads
   at a glance. The pill's text flips to white on the accent
   background, with a soft branded glow lifting it slightly off the
   row.

   Selector shape: mkdocs-material lays out a tabbed-set as
   `<input>×N` siblings followed by `<div.tabbed-labels><label>×N`,
   so the conventional `input:checked + label` doesn't match (the
   label isn't a direct sibling of any input). Instead we count the
   `:checked` input by `:nth-child` and reach across to the label at
   the same ordinal inside `.tabbed-labels` via `~`. One rule per
   ordinal — N=17 today, expand the list when adding more languages. */
.md-typeset .ast-langs .tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > label:nth-child(1),
.md-typeset .ast-langs .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > label:nth-child(2),
.md-typeset .ast-langs .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > label:nth-child(3),
.md-typeset .ast-langs .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > label:nth-child(4),
.md-typeset .ast-langs .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > label:nth-child(5),
.md-typeset .ast-langs .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > label:nth-child(6),
.md-typeset .ast-langs .tabbed-set > input:nth-child(7):checked ~ .tabbed-labels > label:nth-child(7),
.md-typeset .ast-langs .tabbed-set > input:nth-child(8):checked ~ .tabbed-labels > label:nth-child(8),
.md-typeset .ast-langs .tabbed-set > input:nth-child(9):checked ~ .tabbed-labels > label:nth-child(9),
.md-typeset .ast-langs .tabbed-set > input:nth-child(10):checked ~ .tabbed-labels > label:nth-child(10),
.md-typeset .ast-langs .tabbed-set > input:nth-child(11):checked ~ .tabbed-labels > label:nth-child(11),
.md-typeset .ast-langs .tabbed-set > input:nth-child(12):checked ~ .tabbed-labels > label:nth-child(12),
.md-typeset .ast-langs .tabbed-set > input:nth-child(13):checked ~ .tabbed-labels > label:nth-child(13),
.md-typeset .ast-langs .tabbed-set > input:nth-child(14):checked ~ .tabbed-labels > label:nth-child(14),
.md-typeset .ast-langs .tabbed-set > input:nth-child(15):checked ~ .tabbed-labels > label:nth-child(15),
.md-typeset .ast-langs .tabbed-set > input:nth-child(16):checked ~ .tabbed-labels > label:nth-child(16),
.md-typeset .ast-langs .tabbed-set > input:nth-child(17):checked ~ .tabbed-labels > label:nth-child(17) {
  border-color: var(--ast-lang-accent);
  color: #fff;
  background: var(--ast-lang-accent);
  font-weight: 700;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--ast-lang-accent) 35%, transparent);
}

/* Icon flips to white on the active pill — same selector shape as
   above, drilling into the .twemoji glyph. At small sizes a
   brand-colored glyph on a brand-colored fill loses all contrast,
   so we force white explicitly on every nested element. */
.md-typeset .ast-langs .tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > label:nth-child(1) .twemoji,
.md-typeset .ast-langs .tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > label:nth-child(1) .twemoji svg,
.md-typeset .ast-langs .tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > label:nth-child(1) .twemoji svg path,
.md-typeset .ast-langs .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > label:nth-child(2) .twemoji,
.md-typeset .ast-langs .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > label:nth-child(2) .twemoji svg,
.md-typeset .ast-langs .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > label:nth-child(2) .twemoji svg path,
.md-typeset .ast-langs .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > label:nth-child(3) .twemoji,
.md-typeset .ast-langs .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > label:nth-child(3) .twemoji svg,
.md-typeset .ast-langs .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > label:nth-child(3) .twemoji svg path,
.md-typeset .ast-langs .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > label:nth-child(4) .twemoji,
.md-typeset .ast-langs .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > label:nth-child(4) .twemoji svg,
.md-typeset .ast-langs .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > label:nth-child(4) .twemoji svg path,
.md-typeset .ast-langs .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > label:nth-child(5) .twemoji,
.md-typeset .ast-langs .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > label:nth-child(5) .twemoji svg,
.md-typeset .ast-langs .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > label:nth-child(5) .twemoji svg path,
.md-typeset .ast-langs .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > label:nth-child(6) .twemoji,
.md-typeset .ast-langs .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > label:nth-child(6) .twemoji svg,
.md-typeset .ast-langs .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > label:nth-child(6) .twemoji svg path,
.md-typeset .ast-langs .tabbed-set > input:nth-child(7):checked ~ .tabbed-labels > label:nth-child(7) .twemoji,
.md-typeset .ast-langs .tabbed-set > input:nth-child(7):checked ~ .tabbed-labels > label:nth-child(7) .twemoji svg,
.md-typeset .ast-langs .tabbed-set > input:nth-child(7):checked ~ .tabbed-labels > label:nth-child(7) .twemoji svg path,
.md-typeset .ast-langs .tabbed-set > input:nth-child(8):checked ~ .tabbed-labels > label:nth-child(8) .twemoji,
.md-typeset .ast-langs .tabbed-set > input:nth-child(8):checked ~ .tabbed-labels > label:nth-child(8) .twemoji svg,
.md-typeset .ast-langs .tabbed-set > input:nth-child(8):checked ~ .tabbed-labels > label:nth-child(8) .twemoji svg path,
.md-typeset .ast-langs .tabbed-set > input:nth-child(9):checked ~ .tabbed-labels > label:nth-child(9) .twemoji,
.md-typeset .ast-langs .tabbed-set > input:nth-child(9):checked ~ .tabbed-labels > label:nth-child(9) .twemoji svg,
.md-typeset .ast-langs .tabbed-set > input:nth-child(9):checked ~ .tabbed-labels > label:nth-child(9) .twemoji svg path,
.md-typeset .ast-langs .tabbed-set > input:nth-child(10):checked ~ .tabbed-labels > label:nth-child(10) .twemoji,
.md-typeset .ast-langs .tabbed-set > input:nth-child(10):checked ~ .tabbed-labels > label:nth-child(10) .twemoji svg,
.md-typeset .ast-langs .tabbed-set > input:nth-child(10):checked ~ .tabbed-labels > label:nth-child(10) .twemoji svg path,
.md-typeset .ast-langs .tabbed-set > input:nth-child(11):checked ~ .tabbed-labels > label:nth-child(11) .twemoji,
.md-typeset .ast-langs .tabbed-set > input:nth-child(11):checked ~ .tabbed-labels > label:nth-child(11) .twemoji svg,
.md-typeset .ast-langs .tabbed-set > input:nth-child(11):checked ~ .tabbed-labels > label:nth-child(11) .twemoji svg path,
.md-typeset .ast-langs .tabbed-set > input:nth-child(12):checked ~ .tabbed-labels > label:nth-child(12) .twemoji,
.md-typeset .ast-langs .tabbed-set > input:nth-child(12):checked ~ .tabbed-labels > label:nth-child(12) .twemoji svg,
.md-typeset .ast-langs .tabbed-set > input:nth-child(12):checked ~ .tabbed-labels > label:nth-child(12) .twemoji svg path,
.md-typeset .ast-langs .tabbed-set > input:nth-child(13):checked ~ .tabbed-labels > label:nth-child(13) .twemoji,
.md-typeset .ast-langs .tabbed-set > input:nth-child(13):checked ~ .tabbed-labels > label:nth-child(13) .twemoji svg,
.md-typeset .ast-langs .tabbed-set > input:nth-child(13):checked ~ .tabbed-labels > label:nth-child(13) .twemoji svg path,
.md-typeset .ast-langs .tabbed-set > input:nth-child(14):checked ~ .tabbed-labels > label:nth-child(14) .twemoji,
.md-typeset .ast-langs .tabbed-set > input:nth-child(14):checked ~ .tabbed-labels > label:nth-child(14) .twemoji svg,
.md-typeset .ast-langs .tabbed-set > input:nth-child(14):checked ~ .tabbed-labels > label:nth-child(14) .twemoji svg path,
.md-typeset .ast-langs .tabbed-set > input:nth-child(15):checked ~ .tabbed-labels > label:nth-child(15) .twemoji,
.md-typeset .ast-langs .tabbed-set > input:nth-child(15):checked ~ .tabbed-labels > label:nth-child(15) .twemoji svg,
.md-typeset .ast-langs .tabbed-set > input:nth-child(15):checked ~ .tabbed-labels > label:nth-child(15) .twemoji svg path,
.md-typeset .ast-langs .tabbed-set > input:nth-child(16):checked ~ .tabbed-labels > label:nth-child(16) .twemoji,
.md-typeset .ast-langs .tabbed-set > input:nth-child(16):checked ~ .tabbed-labels > label:nth-child(16) .twemoji svg,
.md-typeset .ast-langs .tabbed-set > input:nth-child(16):checked ~ .tabbed-labels > label:nth-child(16) .twemoji svg path,
.md-typeset .ast-langs .tabbed-set > input:nth-child(17):checked ~ .tabbed-labels > label:nth-child(17) .twemoji,
.md-typeset .ast-langs .tabbed-set > input:nth-child(17):checked ~ .tabbed-labels > label:nth-child(17) .twemoji svg,
.md-typeset .ast-langs .tabbed-set > input:nth-child(17):checked ~ .tabbed-labels > label:nth-child(17) .twemoji svg path {
  color: #fff;
  fill: #fff;
}

[data-md-color-scheme="slate"] .md-typeset .ast-langs .tabbed-labels > label {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Hide every form of mkdocs-material's underline marker — the
   sliding indicator (`::before`) AND the divider rule (`::after` in
   some themes). The filled pill already carries the active state. */
.md-typeset .ast-langs .tabbed-labels::before,
.md-typeset .ast-langs .tabbed-labels::after {
  display: none;
}

/* On narrow screens, tighten further so 3-4 pills still fit per row
   at typical mobile widths. */
@media (max-width: 30em) {
  .md-typeset .ast-langs .tabbed-labels {
    gap: 0.18rem;
  }
  .md-typeset .ast-langs .tabbed-labels > label {
    padding: 0.15em 0.5em;
    font-size: 0.66rem;
  }
}

/* ─── "Paste into your agent" CTA code block ──────────────── *
 *
 * The setup-prompt CTA admonition embeds a single-line code block
 * carrying the magic phrase the user pastes into Claude / Codex /
 * Gemini / Cursor. Bump the font size so the line reads as a primary
 * call-to-action instead of an incidental code snippet, and lift the
 * vertical padding to match. The `.highlight` ancestor selector
 * targets the wrapper mkdocs-material adds around fenced blocks. */
.md-typeset .highlight.ast-cta pre,
.md-typeset .highlight.ast-cta code,
.md-typeset .ast-cta pre code {
  font-size: 0.92rem;
  line-height: 1.55;
}

.md-typeset .highlight.ast-cta pre {
  padding: 0.7rem 0.95rem;
}

/* ─── Comparison table ────────────────────────────────────── */

.ast-compare {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
}

.ast-compare th,
.ast-compare td {
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  text-align: center;
  font-size: 0.9rem;
}

.ast-compare th {
  background: var(--md-code-bg-color);
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
}

.ast-compare td:first-child {
  text-align: left;
  font-weight: 500;
}

.ast-compare .yes { color: #2ea043; font-weight: 700; }
.ast-compare .no  { color: #cf222e; }
.ast-compare .meh { color: #8b949e; }