/* =============================================================================
   REBUY DOCS DESIGN SYSTEM
   =============================================================================

   Token-based design system for consistent styling across light/dark modes.
   Based on Readme.io theme export with MkDocs Material adaptations.

   Reference: meta/README_TOKENS.md, meta/DESIGN_SYSTEM_AUDIT.md

   Table of Contents:
   1. Design Tokens (Colors, Typography, Spacing)
   2. Material Theme Overrides
   3. Component Styles
   4. Page Patterns

   ============================================================================= */

/* =============================================================================
   1. DESIGN TOKENS - LIGHT MODE (Default)
   ============================================================================= */

:root {
    /* ---------------------------------------------------------------------------
     Brand Colors
     Contrast ratios calculated against respective backgrounds:
     - Light mode: #fff background
     - Dark mode: #1e1e2e background
     --------------------------------------------------------------------------- */
    --rb-brand-primary: #335de9; /* 4.7:1 on white - WCAG AA ✓ */
    --rb-brand-primary-light: #619efe; /* For highlights */
    --rb-brand-primary-dark: #1742d2; /* For hover states */
    --rb-brand-accent: #be2198; /* 4.5:1 on white - WCAG AA ✓ */
    --rb-brand-accent-dark: #a81d87; /* Readme.io --color-link-primary-darken-5 */
    --rb-brand-accent-bg: rgba(
        190,
        33,
        152,
        0.09
    ); /* Light accent tint for backgrounds */

    /* Header gradient (Rebuy brand) */
    --rb-gradient-header: linear-gradient(
        90deg,
        #6366f1 0%,
        #a855f7 25%,
        #ec4899 50%,
        #f472b6 70%,
        #fb923c 100%
    );

    /* ---------------------------------------------------------------------------
     Semantic Colors - Text
     --------------------------------------------------------------------------- */
    --rb-text-default: #384248;
    --rb-text-muted: #4f5a66;
    --rb-text-minimum: #637288;
    --rb-text-inverse: #fff;

    /* ---------------------------------------------------------------------------
     Semantic Colors - Backgrounds
     --------------------------------------------------------------------------- */
    --rb-bg-page: #fff;
    --rb-bg-muted: #f8f8f8;
    --rb-bg-subtle: #f0f0f0;
    --rb-bg-emphasis: #1e1b4b;
    --rb-bg-hover: rgba(0, 0, 0, 0.05);
    --rb-bg-active: rgba(0, 0, 0, 0.1);

    /* ---------------------------------------------------------------------------
     Semantic Colors - Borders
     --------------------------------------------------------------------------- */
    --rb-border-default: rgba(0, 0, 0, 0.1);
    --rb-border-muted: rgba(0, 0, 0, 0.05);
    --rb-border-heavy: rgba(0, 0, 0, 0.2);

    /* ---------------------------------------------------------------------------
     Status Colors - Success (GET)
     --------------------------------------------------------------------------- */
    --rb-success-fg: #00683a;
    --rb-success-bg: #e1f7ec;
    --rb-success-bg-emphasis: #008756;

    /* ---------------------------------------------------------------------------
     Status Colors - Info (POST)
     --------------------------------------------------------------------------- */
    --rb-info-fg: #005dc5;
    --rb-info-bg: #e7f3ff;
    --rb-info-bg-emphasis: #0074e1;

    /* ---------------------------------------------------------------------------
     Status Colors - Attention/Warning (PATCH, deprecation)
     --------------------------------------------------------------------------- */
    --rb-attention-fg: #9c5802;
    --rb-attention-bg: #fcf2e6;
    --rb-attention-bg-emphasis: #df7d03;
    --rb-attention-border: #f59e0b;

    /* ---------------------------------------------------------------------------
     Status Colors - Danger (DELETE)
     --------------------------------------------------------------------------- */
    --rb-danger-fg: #ad273c;
    --rb-danger-bg: #ffe5e5;
    --rb-danger-bg-emphasis: #cb4452;

    /* ---------------------------------------------------------------------------
     Status Colors - Neutral (PUT - purple in Readme.io)
     --------------------------------------------------------------------------- */
    --rb-neutral-fg: #56468f;
    --rb-neutral-bg: #ebe6f4;
    --rb-neutral-bg-emphasis: #6d5ba6;

    /* ---------------------------------------------------------------------------
     Component Colors - Toast
     --------------------------------------------------------------------------- */
    --rb-toast-success-bg: #059669;
    --rb-toast-success-fg: #fff;
    --rb-toast-error-bg: #dc2626;
    --rb-toast-error-fg: #fff;

    /* ---------------------------------------------------------------------------
     Component Colors - Method Badges (GET, POST, PUT, PATCH, DELETE)
     Separate from semantic bg-emphasis tokens because badges always need
     WCAG AA contrast with white text, which requires different values in
     dark mode (darker) vs light mode (brighter).
     --------------------------------------------------------------------------- */
    --rb-badge-get-bg: #008756; /* matches --rb-success-bg-emphasis */
    --rb-badge-post-bg: #0074e1; /* matches --rb-info-bg-emphasis */
    --rb-badge-put-bg: #6d5ba6; /* matches --rb-neutral-bg-emphasis */
    --rb-badge-patch-bg: #df7d03; /* matches --rb-attention-bg-emphasis */
    --rb-badge-delete-bg: #cb4452; /* matches --rb-danger-bg-emphasis */

    /* ---------------------------------------------------------------------------
     Component Colors - Buttons (Primary CTA)
     Like badges, button backgrounds go DARKER in dark mode for white text contrast.
     --------------------------------------------------------------------------- */
    --rb-btn-primary-bg: var(
        --rb-brand-primary
    ); /* #335de9 - 4.7:1 with white */
    --rb-btn-primary-bg-hover: var(--rb-brand-primary-dark); /* #1742d2 */
    --rb-btn-primary-fg: #fff;

    /* ---------------------------------------------------------------------------
     Component Colors - Form Inputs
     Consistent styling for text inputs, search boxes, etc.
     --------------------------------------------------------------------------- */
    --rb-input-bg: var(--rb-bg-muted);
    --rb-input-bg-focus: var(--rb-bg-page);
    --rb-input-border: var(--rb-border-default);
    --rb-input-border-focus: var(--rb-brand-primary);
    --rb-input-ring: rgba(51, 93, 233, 0.15); /* brand-primary at 15% opacity */

    /* ---------------------------------------------------------------------------
     Component Tokens - Overlay Button
     For buttons that overlay variable-color content (code blocks, images, video).
     Uses translucent dark background so it works on both light and dark surfaces.
     Different from .md-top (Back to Top) which uses solid page background.
     --------------------------------------------------------------------------- */
    --rb-overlay-bg: rgba(0, 0, 0, 0.7);
    --rb-overlay-bg-hover: rgba(0, 0, 0, 0.85);
    --rb-overlay-border: rgba(255, 255, 255, 0.1);
    --rb-overlay-fg: #fff;

    /* ---------------------------------------------------------------------------
     Component Tokens - Homepage Hero
     Hero is always a dark surface with white text in both schemes.
     --------------------------------------------------------------------------- */
    --rb-hero-bg: var(--rb-bg-emphasis);
    --rb-hero-fg: #fff;
    --rb-hero-fg-muted: rgba(255, 255, 255, 0.85);
    /* Deprecated (previous static grid/wash approach) */
    --rb-hero-overlay-opacity: 0.18;
    --rb-hero-pattern-opacity: 0.12;
    --rb-hero-pattern-color: rgba(255, 255, 255, 0.12);

    /* Animated magma background - two layers with different timings for organic motion */
    --rb-hero-magma-opacity: 0.85;
    --rb-hero-magma-blur: 40px;
    --rb-hero-magma-saturation: 1.3;
    --rb-hero-magma-bleed: 30%;
    /* Layer 1 (::before) - primary blobs */
    --rb-hero-magma-duration-1: 11s;
    --rb-hero-magma-drift-1: 12%;
    /* Layer 2 (::after) - secondary blobs, different timing */
    --rb-hero-magma-duration-2: 17s;
    --rb-hero-magma-drift-2: 15%;
    --rb-hero-magma-easing: cubic-bezier(0.45, 0, 0.55, 1);

    /* Brand gradient colors (purple → pink spectrum) */
    --rb-hero-magma-c1: #6366f1; /* Indigo */
    --rb-hero-magma-c2: #a855f7; /* Purple */
    --rb-hero-magma-c3: #ec4899; /* Pink */
    --rb-hero-magma-c4: #f472b6; /* Light pink */
    --rb-hero-magma-c5: #7c3aed; /* Violet */

    /* Text readability */
    --rb-hero-text-shadow-color: rgba(0, 0, 0, 0.4);
    --rb-hero-cta-bg: #fff;
    --rb-hero-cta-bg-hover: #f0f0f0;
    --rb-hero-cta-fg: var(--rb-bg-emphasis);

    /* ---------------------------------------------------------------------------
     Component Colors - AI Links (keeping distinct brand colors)
     --------------------------------------------------------------------------- */
    --rb-claude-fg: #d97757;
    --rb-claude-bg: rgba(217, 119, 87, 0.15);
    --rb-claude-bg-hover: rgba(217, 119, 87, 0.25);
    --rb-chatgpt-fg: #10a37f;
    --rb-chatgpt-bg: rgba(16, 163, 127, 0.15);
    --rb-chatgpt-bg-hover: rgba(16, 163, 127, 0.25);

    /* ---------------------------------------------------------------------------
     Typography
     --------------------------------------------------------------------------- */
    --rb-font-family:
        system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
        sans-serif;
    --rb-font-family-mono:
        "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo,
        Consolas, monospace;

    /* Font sizes adjusted for Material's 20px root (value × 20 = px) */
    --rb-font-size-xxs: 0.5rem; /* 10px */
    --rb-font-size-xs: 0.6rem; /* 12px */
    --rb-font-size-sm: 0.7rem; /* 14px */
    --rb-font-size-md: 0.8rem; /* 16px */
    --rb-font-size-lg: 0.9rem; /* 18px */
    --rb-font-size-xl: 1rem; /* 20px */
    --rb-font-size-2xl: 1.2rem; /* 24px */
    --rb-font-size-3xl: 1.4rem; /* 28px */
    --rb-font-size-4xl: 1.6rem; /* 32px */

    --rb-line-height-tight: 1.25;
    --rb-line-height-normal: 1.5;
    --rb-line-height-relaxed: 1.75;

    --rb-font-weight-normal: 400;
    --rb-font-weight-medium: 500;
    --rb-font-weight-semibold: 600;
    --rb-font-weight-bold: 700;

    /* ---------------------------------------------------------------------------
     Spacing (4px base)
     --------------------------------------------------------------------------- */
    --rb-space-0: 0;
    --rb-space-1: 0.25rem; /* 4px */
    --rb-space-2: 0.5rem; /* 8px */
    --rb-space-3: 0.75rem; /* 12px */
    --rb-space-4: 1rem; /* 16px */
    --rb-space-5: 1.25rem; /* 20px */
    --rb-space-6: 1.5rem; /* 24px */
    --rb-space-8: 2rem; /* 32px */
    --rb-space-10: 2.5rem; /* 40px */
    --rb-space-12: 3rem; /* 48px */

    /* ---------------------------------------------------------------------------
     Border Radius
     --------------------------------------------------------------------------- */
    --rb-radius-sm: 2px;
    --rb-radius-md: 4px;
    --rb-radius-lg: 8px;
    --rb-radius-full: 9999px;

    /* ---------------------------------------------------------------------------
     Shadows
     --------------------------------------------------------------------------- */
    --rb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.075);
    --rb-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
    --rb-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);

    /* ---------------------------------------------------------------------------
     Transitions
     --------------------------------------------------------------------------- */
    --rb-transition-fast: 0.15s ease;
    --rb-transition-normal: 0.2s ease;
    --rb-transition-slow: 0.3s ease;
}

/* =============================================================================
   1b. DESIGN TOKENS - DARK MODE
   ============================================================================= */

[data-md-color-scheme="slate"] {
    /* Brand Colors - LIGHTER for dark mode to meet WCAG AA contrast */
    --rb-brand-primary: #7c9ff7; /* 5.8:1 on #1e1e2e - WCAG AA ✓ */
    --rb-brand-primary-light: #a3bcfa; /* For highlights */
    --rb-brand-primary-dark: #5b82ef; /* For hover states */
    --rb-brand-accent: #e879c0; /* 5.2:1 on #1e1e2e - WCAG AA ✓ */
    --rb-brand-accent-dark: #e879c0; /* Same as accent in dark mode for text */
    --rb-brand-accent-bg: rgba(
        232,
        121,
        192,
        0.12
    ); /* Slightly more visible on dark */

    /* Text - increased contrast for dark mode */
    --rb-text-default: #e2e8f0; /* 12.6:1 on #1e1e2e - WCAG AAA ✓ */
    --rb-text-muted: #cbd5e1; /* 9.8:1 on #1e1e2e - WCAG AAA ✓ */
    --rb-text-minimum: #94a3b8; /* 5.4:1 on #1e1e2e - WCAG AA ✓ */
    --rb-text-inverse: #fff; /* Always light - used on --rb-bg-emphasis which is always dark */

    /* Backgrounds */
    --rb-bg-page: #1e1e2e;
    --rb-bg-muted: #2a2a3c;
    --rb-bg-subtle: #353548;
    --rb-bg-emphasis: #0f0f1a;
    --rb-bg-hover: rgba(255, 255, 255, 0.05);
    --rb-bg-active: rgba(255, 255, 255, 0.1);

    /* Borders */
    --rb-border-default: rgba(255, 255, 255, 0.1);
    --rb-border-muted: rgba(255, 255, 255, 0.05);
    --rb-border-heavy: rgba(255, 255, 255, 0.2);

    /* Status Colors - lighter for dark backgrounds */
    --rb-success-fg: #4ade80;
    --rb-success-bg: rgba(74, 222, 128, 0.15);
    --rb-success-bg-emphasis: #22c55e;

    --rb-info-fg: #60a5fa;
    --rb-info-bg: rgba(96, 165, 250, 0.15);
    --rb-info-bg-emphasis: #3b82f6;

    --rb-attention-fg: #fbbf24;
    --rb-attention-bg: rgba(251, 191, 36, 0.15);
    --rb-attention-bg-emphasis: #f59e0b;

    --rb-danger-fg: #f87171;
    --rb-danger-bg: rgba(248, 113, 113, 0.15);
    --rb-danger-bg-emphasis: #ef4444;

    --rb-neutral-fg: #a78bfa;
    --rb-neutral-bg: rgba(167, 139, 250, 0.15);
    --rb-neutral-bg-emphasis: #8b5cf6;

    /* AI Links - slightly more prominent in dark mode */
    --rb-claude-bg: rgba(217, 119, 87, 0.2);
    --rb-claude-bg-hover: rgba(217, 119, 87, 0.3);
    --rb-chatgpt-bg: rgba(16, 163, 127, 0.2);
    --rb-chatgpt-bg-hover: rgba(16, 163, 127, 0.3);

    /* Buttons - DARKER backgrounds for WCAG AA contrast with white text
     Same pattern as badges: go darker in dark mode, not lighter */
    --rb-btn-primary-bg: #1d4ed8; /* blue-700 - 5.2:1 with white on #1e1e2e */
    --rb-btn-primary-bg-hover: #1e40af; /* blue-800 */
    --rb-btn-primary-fg: #fff;

    /* Form Inputs - dark mode uses lighter brand primary for focus ring */
    --rb-input-bg: var(--rb-bg-muted);
    --rb-input-bg-focus: var(--rb-bg-subtle);
    --rb-input-border: var(--rb-border-default);
    --rb-input-border-focus: var(--rb-brand-primary);
    --rb-input-ring: rgba(
        124,
        159,
        247,
        0.2
    ); /* brand-primary-dark-mode at 20% */

    /* Overlay Button - same values (intentionally mode-agnostic for variable backgrounds) */
    --rb-overlay-bg: rgba(0, 0, 0, 0.7);
    --rb-overlay-bg-hover: rgba(0, 0, 0, 0.85);
    --rb-overlay-border: rgba(255, 255, 255, 0.1);
    --rb-overlay-fg: #fff;

    /* Homepage Hero - keep white text and tune overlay strength for dark mode */
    --rb-hero-bg: var(--rb-bg-emphasis);
    --rb-hero-fg: #fff;
    --rb-hero-fg-muted: rgba(255, 255, 255, 0.85);
    /* Deprecated (previous static grid/wash approach) */
    --rb-hero-overlay-opacity: 0.12;
    --rb-hero-pattern-opacity: 0.1;
    --rb-hero-pattern-color: rgba(255, 255, 255, 0.1);

    /* Animated magma background - same values as light mode */
    --rb-hero-magma-opacity: 0.85;
    --rb-hero-magma-blur: 40px;
    --rb-hero-magma-saturation: 1.3;
    --rb-hero-magma-bleed: 30%;
    --rb-hero-magma-duration-1: 11s;
    --rb-hero-magma-drift-1: 12%;
    --rb-hero-magma-duration-2: 17s;
    --rb-hero-magma-drift-2: 15%;
    --rb-hero-magma-easing: cubic-bezier(0.45, 0, 0.55, 1);

    /* Brand gradient colors (purple → pink spectrum) */
    --rb-hero-magma-c1: #6366f1; /* Indigo */
    --rb-hero-magma-c2: #a855f7; /* Purple */
    --rb-hero-magma-c3: #ec4899; /* Pink */
    --rb-hero-magma-c4: #f472b6; /* Light pink */
    --rb-hero-magma-c5: #7c3aed; /* Violet */

    /* Text readability */
    --rb-hero-text-shadow-color: rgba(0, 0, 0, 0.5);
    --rb-hero-cta-bg: #fff;
    --rb-hero-cta-bg-hover: #f0f0f0;
    --rb-hero-cta-fg: var(--rb-bg-emphasis);

    /* Method Badges - DARKER backgrounds for WCAG AA contrast with white text
     Tailwind -700 shades provide ~4.5:1 contrast ratio */
    --rb-badge-get-bg: #047857; /* emerald-700 */
    --rb-badge-post-bg: #1d4ed8; /* blue-700 */
    --rb-badge-put-bg: #6d28d9; /* violet-700 */
    --rb-badge-patch-bg: #b45309; /* amber-700 */
    --rb-badge-delete-bg: #b91c1c; /* red-700 */
}

/* =============================================================================
   1c. GLOBAL POLISH
   ============================================================================= */

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Text selection - brand accent tint
   Light mode: pink tint on white
   Dark mode: handled by token redefinition */
::selection {
    background: var(--rb-brand-accent-bg);
    color: var(--rb-text-default);
}

/* Hero section selection (always dark background, white text) */
.hero ::selection {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* Hero button selection (white background, dark text - needs accent tint) */
.hero-button::selection,
.hero-button *::selection {
    background: rgba(190, 33, 152, 0.25);
    color: var(--rb-hero-cta-fg);
}

/* =============================================================================
   2. MATERIAL THEME OVERRIDES
   ============================================================================= */

/* Override Material's default colors with our tokens */
:root {
    --md-default-fg-color: var(--rb-text-default);
    --md-default-fg-color--light: var(--rb-text-muted);
    --md-default-fg-color--lighter: var(--rb-text-minimum);
    --md-default-fg-color--lightest: var(--rb-border-default);

    --md-default-bg-color: var(--rb-bg-page);
    --md-default-bg-color--light: var(--rb-bg-muted);
    --md-default-bg-color--lighter: var(--rb-bg-subtle);
    --md-default-bg-color--lightest: var(--rb-bg-subtle);

    --md-code-bg-color: var(--rb-bg-muted);
    --md-code-fg-color: var(--rb-text-default);

    --md-primary-fg-color: var(--rb-brand-primary);
    --md-accent-fg-color: var(--rb-brand-accent);

    /* Typography scale - Material uses 20px root, so 0.8rem = 16px body text */
    --md-typeset-font-size: 0.8rem;

    /* ---------------------------------------------------------------------------
     Syntax Highlighting - Light Mode (MDN-inspired)
     Clean, readable colors against light backgrounds
     --------------------------------------------------------------------------- */
    --md-code-hl-color: rgba(255, 255, 0, 0.3); /* Selection highlight */
    --md-code-hl-number-color: #005cc5; /* Numbers - blue */
    --md-code-hl-special-color: #d63384; /* Special chars */
    --md-code-hl-function-color: #6f42c1; /* Functions - purple */
    --md-code-hl-constant-color: #005cc5; /* Constants - blue */
    --md-code-hl-keyword-color: #d63384; /* Keywords - magenta */
    --md-code-hl-string-color: #22863a; /* Strings - green */
    --md-code-hl-name-color: var(--rb-text-default); /* Names/variables */
    --md-code-hl-operator-color: #d63384; /* Operators */
    --md-code-hl-punctuation-color: var(--rb-text-muted); /* Punctuation */
    --md-code-hl-comment-color: #6a737d; /* Comments - gray */
    --md-code-hl-generic-color: var(--rb-text-default); /* Generic */
    --md-code-hl-variable-color: #e36209; /* Variables - orange */
}

[data-md-color-scheme="slate"] {
    --md-default-fg-color: var(--rb-text-default);
    --md-default-fg-color--light: var(--rb-text-muted);
    --md-default-fg-color--lighter: var(--rb-text-minimum);
    --md-default-fg-color--lightest: var(--rb-border-default);

    --md-default-bg-color: var(--rb-bg-page);
    --md-default-bg-color--light: var(--rb-bg-muted);
    --md-default-bg-color--lighter: var(--rb-bg-subtle);
    --md-default-bg-color--lightest: var(--rb-bg-subtle);

    --md-code-bg-color: var(--rb-bg-muted);
    --md-code-fg-color: var(--rb-text-default);

    /* Override primary/accent for dark mode WCAG compliance */
    --md-primary-fg-color: var(--rb-brand-primary);
    --md-accent-fg-color: var(--rb-brand-accent);

    /* Typeset link color */
    --md-typeset-a-color: var(--rb-brand-primary);

    /* ---------------------------------------------------------------------------
     Syntax Highlighting - Dark Mode (Andromeda-inspired)
     Vibrant colors against dark backgrounds for better readability
     --------------------------------------------------------------------------- */
    --md-code-hl-color: rgba(199, 77, 237, 0.2); /* Selection - purple tint */
    --md-code-hl-number-color: #f78c6c; /* Numbers - coral */
    --md-code-hl-special-color: #d591f5; /* Special - magenta (WCAG AA: 4.6:1) */
    --md-code-hl-function-color: #ffe66d; /* Functions - yellow */
    --md-code-hl-constant-color: #f78c6c; /* Constants - coral */
    --md-code-hl-keyword-color: #d591f5; /* Keywords - magenta (WCAG AA: 4.6:1) */
    --md-code-hl-string-color: #96e072; /* Strings - green */
    --md-code-hl-name-color: #d5ced9; /* Names - light gray */
    --md-code-hl-operator-color: #89ddff; /* Operators - cyan */
    --md-code-hl-punctuation-color: #d5ced9; /* Punctuation - light gray */
    --md-code-hl-comment-color: #9a9a9a; /* Comments - muted gray (WCAG AA: 4.6:1) */
    --md-code-hl-generic-color: #d5ced9; /* Generic - light gray */
    --md-code-hl-variable-color: #f29e74; /* Variables - orange */
}

/* =============================================================================
   3. COMPONENT STYLES
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Images - Subtle polish for screenshots and diagrams
   ----------------------------------------------------------------------------- */

.md-typeset img {
    border-radius: var(--rb-radius-md);
}

/* -----------------------------------------------------------------------------
   Inline Code - Enhanced visibility
   ----------------------------------------------------------------------------- */

.md-typeset code:not(pre code) {
    background: var(--rb-bg-muted);
    padding: 0.1em 0.4em;
    border-radius: var(--rb-radius-sm);
    font-size: 0.85em;
    border: 1px solid var(--rb-border-muted);
}

/* -----------------------------------------------------------------------------
   Header & Navigation - Gradient
   ----------------------------------------------------------------------------- */

/* Light mode - vibrant gradient */
[data-md-color-scheme="default"] .md-header,
[data-md-color-scheme="default"] .md-tabs {
    background: var(--rb-gradient-header) !important;
}

/* Dark mode - darkened gradient with overlay effect */
[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs {
    background:
        linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
        var(--rb-gradient-header) !important;
}

/* Hide empty repo source element (repo is private, override is empty) */
.md-header__source {
    display: none;
}

.md-tabs {
    border: none !important;
}

/* Show tabs at 768px instead of Material's default 1220px (76.234375em).
   This matches the original Readme.io site's breakpoint for header nav. */
@media screen and (min-width: 48em) {
    .md-tabs {
        display: block !important;
    }
}

/* Tab links - always white text with background-based states */
.md-tabs__link {
    font-weight: var(--rb-font-weight-semibold);
    color: #fff !important;
    opacity: 1 !important;
    padding: var(--rb-space-1) var(--rb-space-4) !important;
    border-radius: var(--rb-radius-md);
    transition: background var(--rb-transition-fast);
    /* margin-top: 0 !important; */
}

/* Remove Material's default underline indicator */
.md-tabs__link::after {
    display: none !important;
}

/* Fix tab link vertical position - Material applies translateY(50%) when
   tabs have [hidden] attribute, but our opacity override keeps them visible.
   This prevents the "jump" when scrolling from top of page. */
.md-tabs[hidden] .md-tabs__link {
    transform: none !important;
}

/* Hover - subtle white background with padding */
.md-tabs__link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Active - same as hover for consistency */
.md-tabs__item.md-tabs__item--active .md-tabs__link,
.md-tabs__item.md-tabs__item--active .md-tabs__link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Focus visible - ring outline */
.md-tabs__link:focus-visible {
    color: #fff !important;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Tab Icons - inline SVG masks (no external font load) */
.md-tabs__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.md-tabs__link::before {
    content: "";
    display: block;
    width: 1.2em;
    height: 1.2em;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Home icon (Material Design) */
.md-tabs__item:nth-child(1) .md-tabs__link::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
}

/* Book icon (Material Design) */
.md-tabs__item:nth-child(2) .md-tabs__link::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z'/%3E%3C/svg%3E");
}

/* Code icon (Material Design) */
.md-tabs__item:nth-child(3) .md-tabs__link::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z'/%3E%3C/svg%3E");
}

/* Mobile drawer top-level nav icons */
@media screen and (max-width: 76.1875em) {
    /* Target top-level nav items in mobile drawer */
    .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link,
    .md-nav--primary > .md-nav__list > .md-nav__item > label.md-nav__link {
        display: flex;
        align-items: center;
        gap: 0.5em;
    }

    .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link::before,
    .md-nav--primary
        > .md-nav__list
        > .md-nav__item
        > label.md-nav__link::before {
        content: "";
        display: block;
        width: 1.2em;
        height: 1.2em;
        flex-shrink: 0;
        background-color: currentColor;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
    }

    /* Home icon */
    .md-nav--primary
        > .md-nav__list
        > .md-nav__item:nth-child(1)
        > .md-nav__link::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
    }

    /* Guides icon */
    .md-nav--primary
        > .md-nav__list
        > .md-nav__item:nth-child(2)
        > .md-nav__link::before,
    .md-nav--primary
        > .md-nav__list
        > .md-nav__item:nth-child(2)
        > label.md-nav__link::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z'/%3E%3C/svg%3E");
    }

    /* API Reference icon */
    .md-nav--primary
        > .md-nav__list
        > .md-nav__item:nth-child(3)
        > .md-nav__link::before,
    .md-nav--primary
        > .md-nav__list
        > .md-nav__item:nth-child(3)
        > label.md-nav__link::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z'/%3E%3C/svg%3E");
    }
}

/* -----------------------------------------------------------------------------
   Anchor Links (Headerlinks)
   ----------------------------------------------------------------------------- */

/* Change pilcrow (¶) to hash (#) for a more developer-friendly feel */
.md-typeset .headerlink {
    color: var(--rb-text-minimum);
    opacity: 0;
    transition:
        opacity var(--rb-transition-fast),
        color var(--rb-transition-fast);
    /* Hide the default ¶ character */
    font-size: 0 !important;
    line-height: 0;
}

/* Show the replacement character */
.md-typeset .headerlink::after {
    content: "#";
    font-size: var(--rb-font-size-md);
    line-height: 1;
}

.md-typeset h1:hover .headerlink,
.md-typeset h2:hover .headerlink,
.md-typeset h3:hover .headerlink,
.md-typeset h4:hover .headerlink,
.md-typeset h5:hover .headerlink,
.md-typeset h6:hover .headerlink {
    opacity: 1;
}

.md-typeset .headerlink:hover {
    color: var(--rb-brand-primary);
}

/* -----------------------------------------------------------------------------
   Admonitions (Notes, Warnings, Tips)
   ----------------------------------------------------------------------------- */

.md-typeset .admonition {
    font-size: var(--rb-font-size-sm); /* 14px - matches secondary content */
}

.md-typeset .admonition-title {
    font-size: var(--rb-font-size-sm);
}

/* -----------------------------------------------------------------------------
   Deprecation Warning
   ----------------------------------------------------------------------------- */

.admonition.warning {
    border-left-width: 4px;
}

.admonition.warning:has(.admonition-title:first-child) {
    border-color: var(--rb-attention-border);
    background: linear-gradient(
        135deg,
        rgba(245, 158, 11, 0.1) 0%,
        rgba(239, 68, 68, 0.05) 100%
    );
}

[data-md-color-scheme="slate"]
    .admonition.warning:has(.admonition-title:first-child) {
    background: linear-gradient(
        135deg,
        rgba(245, 158, 11, 0.15) 0%,
        rgba(239, 68, 68, 0.08) 100%
    );
}

/* Status indicator styling */
.md-status {
    margin-left: var(--rb-space-2);
}

.md-status--deprecated {
    color: var(--rb-attention-border);
}

/* -----------------------------------------------------------------------------
   AI Actions Dropdown (WCAG 2.1 AA Accessible)
   ----------------------------------------------------------------------------- */

/* Material's edit button - styled for the page actions row */
.ai-actions .md-content__button.md-icon {
    position: static !important;
    margin: 0 !important;
    transform: none !important;
    color: var(--rb-text-muted);
}

.ai-actions .md-content__button.md-icon:hover {
    color: var(--rb-text-default);
}

/* AI Actions - positioned as row below H1 */
.ai-actions {
    display: flex;
    align-items: center;
    gap: var(--rb-space-2);
    margin-top: calc(-1 * var(--rb-space-2)); /* Tighten gap with H1 */
    margin-bottom: var(--rb-space-4);
}

.ai-actions-wrapper {
    position: relative; /* For dropdown menu positioning */
}

.ai-actions-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--rb-space-1);
    padding: var(--rb-space-1) var(--rb-space-2);
    border: 1px solid var(--rb-border-default);
    border-radius: var(--rb-radius-md);
    background: var(--rb-bg-page);
    color: var(--rb-text-muted);
    cursor: pointer;
    font-size: var(--rb-font-size-sm);
    transition:
        border-color var(--rb-transition-fast),
        color var(--rb-transition-fast),
        box-shadow var(--rb-transition-fast);
}

.ai-actions-label {
    font-weight: var(--rb-font-weight-medium);
}

/* SVG icons in trigger */
.ai-actions-trigger .ai-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.ai-actions-trigger .ai-icon--chevron {
    width: 14px;
    height: 14px;
}

.ai-actions-trigger:hover {
    border-color: var(--rb-text-minimum);
    color: var(--rb-text-default);
}

/* Focus visible - keyboard navigation indicator */
.ai-actions-trigger:focus-visible {
    outline: 2px solid var(--rb-brand-primary);
    outline-offset: 2px;
    border-color: var(--rb-brand-primary);
}

.ai-actions-trigger[aria-expanded="true"] {
    border-color: var(--rb-brand-primary);
    color: var(--rb-brand-primary);
}

.ai-actions-trigger[aria-expanded="true"] .ai-icon--chevron {
    transform: rotate(180deg);
}

.ai-actions-trigger .ai-icon--chevron {
    transition: transform var(--rb-transition-fast);
}

.ai-actions-menu {
    position: absolute;
    left: 0;
    top: calc(100% + var(--rb-space-1));
    min-width: 140px;
    padding: var(--rb-space-1) 0;
    background: var(--rb-bg-page);
    border: 1px solid var(--rb-border-default);
    border-radius: var(--rb-radius-md);
    box-shadow: var(--rb-shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition:
        opacity var(--rb-transition-fast),
        transform var(--rb-transition-fast),
        visibility var(--rb-transition-fast);
    z-index: 2;
}

.ai-actions-menu--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Menu items - unified styling for both links and buttons
   Uses high specificity to override Material's link styles */
.ai-actions-item,
.ai-actions-menu a.ai-actions-item,
.ai-actions-menu a.ai-actions-item:hover,
.ai-actions-menu a.ai-actions-item:focus {
    display: flex;
    align-items: center;
    gap: var(--rb-space-2);
    width: 100%;
    padding: var(--rb-space-2) var(--rb-space-3);
    border: none;
    background: transparent;
    color: var(--rb-text-default);
    font-size: var(--rb-font-size-xs);
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--rb-transition-fast);
    white-space: nowrap;
}

.ai-actions-item:hover,
.ai-actions-menu a.ai-actions-item:hover {
    background: var(--rb-bg-muted);
    color: var(--rb-text-default);
}

/* Focus visible for menu items - keyboard navigation */
.ai-actions-item:focus {
    outline: none;
    background: var(--rb-bg-muted);
}

.ai-actions-item:focus-visible {
    outline: 2px solid var(--rb-brand-primary);
    outline-offset: -2px;
    background: var(--rb-bg-muted);
}

/* SVG icons in menu items */
.ai-actions-item .ai-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--rb-text-minimum);
}

/* -----------------------------------------------------------------------------
   Toast Notification
   ----------------------------------------------------------------------------- */

.copy-toast {
    position: fixed;
    bottom: var(--rb-space-8);
    left: 50%;
    transform: translateX(-50%) translateY(var(--rb-space-4));
    padding: var(--rb-space-3) var(--rb-space-5);
    border-radius: var(--rb-radius-lg);
    font-size: var(--rb-font-size-sm);
    font-weight: var(--rb-font-weight-medium);
    opacity: 0;
    transition:
        opacity var(--rb-transition-normal),
        transform var(--rb-transition-normal);
    z-index: 9999;
    pointer-events: none;
}

.copy-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.copy-toast--success {
    background: var(--rb-toast-success-bg);
    color: var(--rb-toast-success-fg);
}

.copy-toast--error {
    background: var(--rb-toast-error-bg);
    color: var(--rb-toast-error-fg);
}

/* Override Material's clipboard toast (md-dialog) to match our custom toast */
.md-dialog {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(1rem);
    background: var(--rb-toast-success-bg);
    color: var(--rb-toast-success-fg);
    padding: 0.75rem 1.25rem;
    border-radius: var(--rb-radius-lg);
    font-size: var(--rb-font-size-sm);
    font-weight: var(--rb-font-weight-medium);
    box-shadow: var(--rb-shadow-lg);
    opacity: 0;
    transition:
        opacity var(--rb-transition-fast) ease,
        transform var(--rb-transition-fast) ease;
    z-index: 10000;
}

.md-dialog--active {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* -----------------------------------------------------------------------------
   Method Badges (GET, POST, PUT, PATCH, DELETE)
   Solid backgrounds with white text, pill-shaped (matches Readme.io)
   ----------------------------------------------------------------------------- */

.method-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: var(--rb-radius-full); /* pill shape */
    font-size: 0.65rem;
    font-weight: var(--rb-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-left: var(--rb-space-2);
    vertical-align: middle;
    color: #fff; /* always white text on solid bg */
}

/* GET - Green */
.method-get {
    background: var(--rb-badge-get-bg);
}

/* POST - Blue */
.method-post {
    background: var(--rb-badge-post-bg);
}

/* PUT - Purple */
.method-put {
    background: var(--rb-badge-put-bg);
}

/* PATCH - Orange */
.method-patch {
    background: var(--rb-badge-patch-bg);
}

/* DELETE - Red */
.method-delete {
    background: var(--rb-badge-delete-bg);
}

/* -----------------------------------------------------------------------------
   Definition Lists (Query Parameters)
   Styled to match Readme.io vertical parameter layout
   ----------------------------------------------------------------------------- */

.md-typeset dl {
    margin: var(--rb-space-4) 0;
}

/* Term (parameter name + type) */
.md-typeset dt {
    display: block;
    padding: var(--rb-space-3) var(--rb-space-4);
    margin: 0;
    background: var(--rb-bg-muted);
    border: 1px solid var(--rb-border-default);
    border-bottom: none;
    border-radius: var(--rb-radius-md) var(--rb-radius-md) 0 0;
    font-family: var(--rb-font-family-mono);
    font-size: var(--rb-font-size-sm); /* 14px */
    font-weight: var(--rb-font-weight-medium);
    color: var(--rb-text-default);
}

/* Description - override Material's left-border indent style */
.md-typeset dd {
    margin: 0 !important;
    margin-left: 0 !important;
    padding: var(--rb-space-3) var(--rb-space-4) !important;
    padding-left: var(--rb-space-4) !important;
    background: var(--rb-bg-page);
    border: 1px solid var(--rb-border-default) !important;
    border-top: none !important;
    border-left: 1px solid var(--rb-border-default) !important;
    border-radius: 0 0 var(--rb-radius-md) var(--rb-radius-md);
    font-size: var(--rb-font-size-sm); /* 14px */
    color: var(--rb-text-muted);
    line-height: var(--rb-line-height-normal);
}

/* Gap ONLY between pairs (dd followed by dt) */
.md-typeset dd + dt {
    margin-top: var(--rb-space-3);
}

/* Inline code in dt (parameter names) */
.md-typeset dt code {
    background: transparent;
    border: none;
    padding: 0;
    font-size: inherit;
    color: var(--rb-text-default);
    font-weight: var(--rb-font-weight-semibold);
}

/* Paragraphs inside dd */
.md-typeset dd > p {
    margin: 0;
}

.md-typeset dd > p + p {
    margin-top: var(--rb-space-2);
}

/* Dark mode adjustments */
[data-md-color-scheme="slate"] .md-typeset dt {
    background: var(--rb-bg-subtle);
}

[data-md-color-scheme="slate"] .md-typeset dd {
    background: var(--rb-bg-page);
}

/* -----------------------------------------------------------------------------
   Table Styling - Alternating Row Colors
   ----------------------------------------------------------------------------- */

.md-typeset table:not([class]) tbody tr:nth-child(even) {
    background: var(--rb-bg-subtle);
}

[data-md-color-scheme="slate"]
    .md-typeset
    table:not([class])
    tbody
    tr:nth-child(even) {
    background: var(--rb-bg-muted);
}

/* -----------------------------------------------------------------------------
   Header Spacing - Breathing Room Above Sections
   ----------------------------------------------------------------------------- */

/* Add modest spacing above h2 and h3 for visual separation between sections.
   Conservative values - less than Readme.io but enough to improve readability. */
.md-typeset h2 {
    margin-top: 2em;
}

.md-typeset h3 {
    margin-top: 1.5em;
}

/* First heading after page title shouldn't have extra top margin */
.md-typeset h1 + h2,
.md-typeset > h2:first-child {
    margin-top: 0;
}

/* Slightly reduce space below page titles (from 1.5em default) */
.md-content .md-typeset h1 {
    margin: 0 0 1em !important;
}

/* =============================================================================
   4. PAGE PATTERNS
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Homepage Hero Section
   ----------------------------------------------------------------------------- */

/*
 * HERO BACKGROUND: Polyrhythmic Gradient Animation
 * ================================================
 *
 * The hero uses two overlapping gradient layers (::before and ::after), each
 * animating at different speeds. This creates organic, hard-to-predict motion
 * while keeping the brand colors intact.
 *
 * WHY TWO LAYERS WITH PRIME DURATIONS?
 * ------------------------------------
 * Layer 1 cycles every 11s, Layer 2 every 17s. Since 11 and 17 are coprime
 * (share no common factors), the exact combined pattern only repeats after
 * 11 × 17 = 187 seconds (~3 minutes). This makes the animation feel organic
 * rather than mechanical, without using rotation (causes clipping) or hue
 * shifting (takes colors off-brand).
 *
 * TUNING PARAMETERS (see :root tokens):
 * -------------------------------------
 * --rb-hero-magma-blur        Blob softness (40px default)
 * --rb-hero-magma-opacity     Overall visibility (0.85 default)
 * --rb-hero-magma-saturation  Color intensity (1.3 default)
 * --rb-hero-magma-duration-1  Layer 1 speed (11s - keep prime)
 * --rb-hero-magma-duration-2  Layer 2 speed (17s - keep prime)
 * --rb-hero-magma-drift-1/2   How far each layer moves
 *
 * MOTION PATHS:
 * -------------
 * Layer 1 drifts diagonally (top-left ↔ bottom-right)
 * Layer 2 drifts opposite (top-right ↔ bottom-left)
 * The opposing directions enhance the organic, flowing feel.
 */

/* -----------------------------------------------------------------------------
   Homepage Header Height
   Material's header + tabs height varies by breakpoint. Define as custom
   property so hero can pull up behind it without magic numbers.
   ----------------------------------------------------------------------------- */

:root {
    --rb-header-height: 146px;
}

/* Tablet: tabs appear at 48em (768px), content container adds 6px padding.
   Hero needs extra pull-up to reach viewport top. */
@media screen and (min-width: 48em) and (max-width: 76.1875em) {
    :root {
        --rb-header-height: 152px;
    }
}

@media screen and (min-width: 1600px) {
    :root {
        --rb-header-height: 161px;
    }
}

@media screen and (min-width: 2000px) {
    :root {
        --rb-header-height: 175px;
    }
}

/* -----------------------------------------------------------------------------
   Homepage Header Effect
   Transparent header that fades to dark (matching hero) on scroll
   ----------------------------------------------------------------------------- */

/* When hero is present, header starts transparent */
body:has(.hero) .md-header {
    background: transparent !important;
    box-shadow: none;
    transition:
        background 0.3s ease,
        box-shadow 0.3s ease;
}

body:has(.hero) .md-tabs {
    background: transparent !important;
    transition:
        background 0.3s ease,
        opacity 0.2s ease;
}

/* On scroll, header fades to dark (matches hero background) */
body:has(.hero).header-scrolled .md-header {
    background: var(--rb-hero-bg) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Fade out tabs as they approach header */
body:has(.hero).header-scrolled .md-tabs {
    opacity: 0;
    pointer-events: none;
}

/* Hide edit button on homepage (it appears over the hero) */
/* JS adds .has-hero class to body - see homepage-header.js */
/* !important needed to override Material's .md-content__button.md-icon !important */
body.has-hero .md-content__button[href*="bitbucket"] {
    display: none !important;
}

.hero {
    background-color: var(--rb-hero-bg);
    color: var(--rb-hero-fg);
    text-align: center;
    position: relative;
    overflow: hidden;
    /* Full-bleed: break out of .md-grid container to span viewport */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    /* Pull hero up behind the transparent header */
    margin-top: calc(-1 * var(--rb-header-height));
    /* Padding: header height + breathing room (top), breathing room (bottom) */
    padding: calc(var(--rb-header-height) + 80px) var(--rb-space-8) 80px;
    margin-bottom: var(--rb-space-8);
}

/* On mobile, less breathing room */
@media screen and (max-width: 76.1875em) {
    .hero {
        padding: calc(var(--rb-header-height) + 2rem) var(--rb-space-4) 2rem;
    }
}

/* Layer 1: Purple, pink, orange blobs - 11s cycle */
.hero::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--rb-hero-magma-bleed));
    background-image:
        radial-gradient(
            900px 600px at 20% 20%,
            color-mix(in srgb, var(--rb-hero-magma-c1) 70%, transparent),
            transparent 60%
        ),
        radial-gradient(
            800px 500px at 80% 30%,
            color-mix(in srgb, var(--rb-hero-magma-c3) 65%, transparent),
            transparent 55%
        ),
        radial-gradient(
            1000px 700px at 50% 80%,
            color-mix(in srgb, var(--rb-hero-magma-c5) 55%, transparent),
            transparent 65%
        );
    opacity: var(--rb-hero-magma-opacity);
    filter: blur(var(--rb-hero-magma-blur))
        saturate(var(--rb-hero-magma-saturation));
    animation: rb-hero-magma-1 var(--rb-hero-magma-duration-1)
        var(--rb-hero-magma-easing) infinite;
    will-change: transform;
    pointer-events: none;
}

/* Layer 2: Purple, pink blobs - 17s cycle (different timing = organic motion) */
.hero::after {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--rb-hero-magma-bleed));
    background-image:
        radial-gradient(
            700px 500px at 75% 70%,
            color-mix(in srgb, var(--rb-hero-magma-c2) 60%, transparent),
            transparent 55%
        ),
        radial-gradient(
            850px 550px at 15% 75%,
            color-mix(in srgb, var(--rb-hero-magma-c4) 55%, transparent),
            transparent 60%
        );
    opacity: var(--rb-hero-magma-opacity);
    filter: blur(var(--rb-hero-magma-blur))
        saturate(var(--rb-hero-magma-saturation));
    animation: rb-hero-magma-2 var(--rb-hero-magma-duration-2)
        var(--rb-hero-magma-easing) infinite;
    will-change: transform;
    pointer-events: none;
}

.hero > * {
    position: relative;
    z-index: 1;
}

.hero h1 {
    color: var(--rb-hero-fg) !important;
    font-size: var(--rb-font-size-4xl);
    margin-bottom: var(--rb-space-4);
    text-shadow: 0 10px 40px var(--rb-hero-text-shadow-color);
}

.hero p {
    color: var(--rb-hero-fg-muted);
    font-size: var(--rb-font-size-lg);
    max-width: 600px;
    margin: 0 auto var(--rb-space-6);
    line-height: var(--rb-line-height-relaxed);
    text-shadow: 0 8px 32px var(--rb-hero-text-shadow-color);
}

.hero-button,
.md-typeset .hero-button {
    display: inline-flex;
    align-items: center;
    gap: var(--rb-space-2);
    padding: var(--rb-space-3) var(--rb-space-6);
    background: var(--rb-hero-cta-bg);
    color: var(--rb-hero-cta-fg) !important;
    text-decoration: none;
    border-radius: var(--rb-radius-lg);
    font-weight: var(--rb-font-weight-semibold);
    transition:
        transform var(--rb-transition-fast),
        box-shadow var(--rb-transition-fast),
        background var(--rb-transition-fast),
        color var(--rb-transition-fast) !important;
}

.hero-button:hover,
.md-typeset .hero-button:hover {
    background: var(--rb-hero-cta-bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--rb-shadow-lg);
    color: var(--rb-hero-cta-fg) !important;
}

.hero-button:focus-visible,
.md-typeset .hero-button:focus-visible {
    outline: 2px solid var(--rb-hero-cta-bg);
    outline-offset: 2px;
    transform: translateY(-2px);
    box-shadow: var(--rb-shadow-lg);
}

.hero-button svg {
    width: 18px;
    height: 18px;
}

/* Dark mode hero: handled via --rb-hero-* tokens */

/* Layer 1 animation: drift diagonally */
@keyframes rb-hero-magma-1 {
    0%,
    100% {
        transform: translate3d(
                calc(-1 * var(--rb-hero-magma-drift-1)),
                calc(-1 * var(--rb-hero-magma-drift-1)),
                0
            )
            scale(1);
    }
    50% {
        transform: translate3d(
                var(--rb-hero-magma-drift-1),
                var(--rb-hero-magma-drift-1),
                0
            )
            scale(1.05);
    }
}

/* Layer 2 animation: drift opposite direction */
@keyframes rb-hero-magma-2 {
    0%,
    100% {
        transform: translate3d(
                var(--rb-hero-magma-drift-2),
                calc(-1 * var(--rb-hero-magma-drift-2)),
                0
            )
            scale(1.02);
    }
    50% {
        transform: translate3d(
                calc(-1 * var(--rb-hero-magma-drift-2)),
                var(--rb-hero-magma-drift-2),
                0
            )
            scale(0.98);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero::before,
    .hero::after {
        animation: none;
        transform: none;
        will-change: auto;
    }
}

/* -----------------------------------------------------------------------------
   Homepage Link Grid
   ----------------------------------------------------------------------------- */

.link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--rb-space-6);
    margin-bottom: var(--rb-space-8);
}

.link-section {
    background: var(--rb-bg-muted);
    border-radius: var(--rb-radius-lg);
    padding: var(--rb-space-5);
    border: 1px solid var(--rb-border-default);
}

.link-section h3 {
    margin: 0 0 var(--rb-space-3);
    font-size: var(--rb-font-size-md);
}

.link-section h3 a {
    color: var(--rb-brand-primary);
    text-decoration: none;
}

.link-section h3 a:hover {
    color: var(--rb-brand-primary-dark);
}

.link-section h3 a:focus-visible {
    outline: 2px solid var(--rb-brand-primary);
    outline-offset: 2px;
    border-radius: var(--rb-radius-sm);
}

.link-section ul {
    list-style: none;
    margin: 0 !important;
    padding: 0;
}

.link-section li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: var(--rb-space-1) 0 !important;
    font-size: var(--rb-font-size-sm);
}

.link-section li a {
    color: var(--rb-text-muted);
    text-decoration: none;
}

.link-section li a:hover {
    color: var(--rb-brand-primary);
}

.link-section li a:focus-visible {
    color: var(--rb-brand-primary);
    outline: 2px solid var(--rb-brand-primary);
    outline-offset: 2px;
    border-radius: var(--rb-radius-sm);
}

.link-section .view-more {
    color: var(--rb-brand-primary);
    font-weight: var(--rb-font-weight-medium);
}

/* -----------------------------------------------------------------------------
   Sidebar Navigation
   ----------------------------------------------------------------------------- */

/* Hide Material theme's nav title on desktop - we use Jump To trigger instead */
@media screen and (min-width: 76.25em) {
    .md-nav--primary > .md-nav__title {
        display: none;
    }
}

/* Section headers (group titles like "Platform Data Sources") */
.md-nav--primary .md-nav__item--section > label,
.md-nav--primary .md-nav__item--section > .md-nav__link {
    font-size: var(--rb-font-size-xs);
    font-weight: var(--rb-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rb-text-minimum);
    padding-top: var(--rb-space-2) !important;
    padding-bottom: var(--rb-space-1);
    border-top: 1px solid var(--rb-border-muted);
}

/* First section header - remove top border since Jump To trigger is above it */
.md-nav--primary .md-nav__item--section:first-child > label,
.md-nav--primary .md-nav__item--section:first-child > .md-nav__link {
    padding-top: var(--rb-space-2);
    border-top: none;
}

/* Nav links within sections - background-based hover/active (Readme.io style) */
.md-nav--primary .md-nav__link {
    font-size: var(--rb-font-size-sm); /* 14px - slightly smaller for density */
    color: var(--rb-text-muted);
    padding: var(--rb-space-1) var(--rb-space-2);
    margin-left: calc(
        -1 * var(--rb-space-2)
    ); /* Offset horizontal padding to preserve text alignment */
    margin-right: calc(-1 * var(--rb-space-2));
    border-radius: var(--rb-radius-md);
    transition:
        background var(--rb-transition-fast),
        color var(--rb-transition-fast);
}

/* Mobile sidebar - proper touch targets and spacing */
@media screen and (max-width: 76.1875em) {
    .md-nav--primary .md-nav__link {
        /* Remove negative margins that cause overflow */
        margin-left: 0;
        margin-right: 0;
        /* Larger touch targets: 12px + 21px line + 12px = 45px (WCAG compliant) */
        padding: var(--rb-space-3) var(--rb-space-3);
    }

    /* Section headers - slightly more padding for mobile touch, no extra margin */
    .md-nav--primary .md-nav__item--section > label,
    .md-nav--primary .md-nav__item--section > .md-nav__link {
        padding-top: var(--rb-space-3) !important;
        padding-bottom: var(--rb-space-2);
    }
}

/* Hover - subtle background instead of color change */
.md-nav--primary .md-nav__link:hover {
    background: var(--rb-bg-hover);
    color: var(--rb-text-default);
}

.md-nav--primary .md-nav__link:focus-visible {
    background: var(--rb-bg-hover);
    color: var(--rb-text-default);
    outline: 2px solid var(--rb-brand-primary);
    outline-offset: -2px;
}

/* Active link - pink accent like Readme.io */
.md-nav--primary .md-nav__link--active {
    background: var(--rb-brand-accent-bg);
    color: var(--rb-brand-accent-dark);
    font-weight: var(--rb-font-weight-medium);
}

.md-nav--primary .md-nav__link--active:hover {
    background: var(--rb-brand-accent-bg);
    color: var(--rb-brand-accent-dark);
}

/* Nav links with badges - flex layout for right-aligned badges */
.md-nav--primary .md-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rb-space-2);
}

/* Keep text from shrinking */
.md-nav--primary .md-nav__link > span:first-child,
.md-nav--primary .md-nav__link > .md-ellipsis {
    flex: 1;
    min-width: 0;
}

/* Sidebar method badges (GET, POST, etc.) - solid bg, white text, pill shape */
.nav-method-badge {
    flex-shrink: 0;
    display: inline-block;
    padding: 0.125rem 0.375rem;
    border-radius: var(--rb-radius-full); /* pill shape */
    font-size: var(--rb-font-size-xxs);
    font-weight: var(--rb-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    line-height: 1;
    white-space: nowrap;
    color: #fff; /* always white text on solid bg */
}

/* GET - Green */
.nav-method-badge--get {
    background: var(--rb-badge-get-bg);
}

/* POST - Blue */
.nav-method-badge--post {
    background: var(--rb-badge-post-bg);
}

/* PUT - Purple */
.nav-method-badge--put {
    background: var(--rb-badge-put-bg);
}

/* PATCH - Orange */
.nav-method-badge--patch {
    background: var(--rb-badge-patch-bg);
}

/* DELETE - Red */
.nav-method-badge--delete {
    background: var(--rb-badge-delete-bg);
}

/* -----------------------------------------------------------------------------
   Footer
   ----------------------------------------------------------------------------- */

/* Hide empty footer meta bar (generator attribution and social links removed) */
.md-footer-meta {
    display: none;
}

/* -----------------------------------------------------------------------------
   Intercom Widget Positioning
   ----------------------------------------------------------------------------- */

/* Default: standard position when footer is not in view.
   Using multiple selectors for stability (Intercom uses dynamic class suffixes). */
.intercom-lightweight-app-launcher,
.intercom-launcher-frame,
iframe[name="intercom-launcher-frame"] {
    bottom: 20px !important;
    transition: bottom 0.2s ease-out;
}

/* When footer is near/in viewport, raise launcher to avoid overlap.
   Class toggled by Intersection Observer in intercom.js */
body.footer-in-view .intercom-lightweight-app-launcher,
body.footer-in-view .intercom-launcher-frame,
body.footer-in-view iframe[name="intercom-launcher-frame"] {
    bottom: 100px !important;
}

/* At 1600px+, footer height increases from ~92px to ~101px.
   Raise launcher an additional 10px to maintain consistent gap. */
@media screen and (min-width: 1600px) {
    body.footer-in-view .intercom-lightweight-app-launcher,
    body.footer-in-view .intercom-launcher-frame,
    body.footer-in-view iframe[name="intercom-launcher-frame"] {
        bottom: 110px !important;
    }
}

/* At 2000px+, footer height increases further to ~110px. */
@media screen and (min-width: 2000px) {
    body.footer-in-view .intercom-lightweight-app-launcher,
    body.footer-in-view .intercom-launcher-frame,
    body.footer-in-view iframe[name="intercom-launcher-frame"] {
        bottom: 120px !important;
    }
}

/* -----------------------------------------------------------------------------
   404 Page
   ----------------------------------------------------------------------------- */

.four-oh-four-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: var(--rb-space-8);
}

.four-oh-four {
    font-size: 8rem;
    font-weight: var(--rb-font-weight-bold);
    background: var(--rb-gradient-header);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1;
}

.four-oh-four-msg {
    font-size: var(--rb-font-size-2xl);
    margin: var(--rb-space-4) 0 var(--rb-space-8);
    color: var(--rb-text-muted);
}

/* =============================================================================
   ENDPOINT DISPLAY
   Styled API endpoint blocks with method badge, URL, and copy button
   ============================================================================= */

.endpoint-display {
    display: flex;
    align-items: flex-start;
    gap: var(--rb-space-2);
    margin: var(--rb-space-3) 0 var(--rb-space-5) 0;
    line-height: 1.6;
}

/* Method badge - pill shape with method-specific colors */
.endpoint-method {
    flex-shrink: 0;
    display: inline-block;
    padding: var(--rb-space-1) var(--rb-space-2);
    border-radius: var(--rb-radius-full);
    font-size: var(--rb-font-size-xs);
    font-weight: var(--rb-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    line-height: 1;
    color: #fff;
}

.endpoint-method--get {
    background: var(--rb-badge-get-bg);
}

.endpoint-method--post {
    background: var(--rb-badge-post-bg);
}

.endpoint-method--put {
    background: var(--rb-badge-put-bg);
}

.endpoint-method--patch {
    background: var(--rb-badge-patch-bg);
}

.endpoint-method--delete {
    background: var(--rb-badge-delete-bg);
}

/* URL display - monospace, muted color, NO background */
.endpoint-url {
    flex: 1;
    min-width: 0; /* Allow shrinking below content size */
    font-family: var(--rb-font-family-mono);
    font-size: var(--rb-font-size-md);
    color: var(--rb-text-muted);
    background: none !important; /* Override Material's code styling */
    padding: 0 var(--rb-space-2) !important;
    border: none;
    word-break: break-all;
}

/* Variable params like {widget_id} get subtle background */
.endpoint-url .endpoint-var {
    background: var(--rb-bg-muted);
    border-radius: var(--rb-radius-sm);
    padding: 0.1em 0.3em;
}

/* Copy button - visible on hover */
.endpoint-copy {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: var(--rb-radius-md);
    background: transparent;
    color: var(--rb-text-minimum);
    cursor: pointer;
    opacity: 0;
    transition:
        opacity var(--rb-transition-fast),
        background var(--rb-transition-fast),
        color var(--rb-transition-fast);
}

.endpoint-display:hover .endpoint-copy {
    opacity: 1;
}

.endpoint-copy:hover {
    background: var(--rb-bg-hover);
    color: var(--rb-text-default);
}

.endpoint-copy:focus-visible {
    opacity: 1;
    outline: 2px solid var(--rb-brand-primary);
    outline-offset: 2px;
}

/* Copy icon - clipboard SVG via CSS */
.endpoint-copy-icon {
    width: 16px;
    height: 16px;
    display: block;
    background: currentColor;
    mask-image: url("data:image/svg+xml,%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 x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%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 x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

/* Success state after copying */
.endpoint-copy.copied .endpoint-copy-icon {
    mask-image: url("data:image/svg+xml,%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='20 6 9 17 4 12'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%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='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.endpoint-copy.copied {
    color: var(--rb-success-fg);
}

/* Mobile: Always show copy button */
@media (max-width: 768px) {
    .endpoint-copy {
        opacity: 1;
    }
}

.four-oh-four-links {
    display: flex;
    gap: var(--rb-space-4);
    flex-wrap: wrap;
    justify-content: center;
}

/* Primary button pattern - uses button tokens for WCAG compliance */
/* Include .md-typeset prefix to override Material's link transition */
.four-oh-four-links a,
.md-typeset .four-oh-four-links a {
    display: inline-flex;
    align-items: center;
    padding: var(--rb-space-3) var(--rb-space-6);
    border-radius: var(--rb-radius-lg);
    background: var(--rb-btn-primary-bg);
    color: var(--rb-btn-primary-fg) !important;
    font-weight: var(--rb-font-weight-semibold);
    text-decoration: none;
    transition:
        transform var(--rb-transition-fast),
        box-shadow var(--rb-transition-fast),
        background var(--rb-transition-fast),
        color var(--rb-transition-fast) !important;
}

.four-oh-four-links a:hover,
.md-typeset .four-oh-four-links a:hover {
    background: var(--rb-btn-primary-bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--rb-shadow-lg);
}

.four-oh-four-links a:focus-visible,
.md-typeset .four-oh-four-links a:focus-visible {
    outline: 2px solid var(--rb-brand-primary);
    outline-offset: 2px;
    transform: translateY(-2px);
    box-shadow: var(--rb-shadow-lg);
}

.four-oh-four-hint {
    margin-top: var(--rb-space-8);
    color: var(--rb-text-minimum);
    font-size: var(--rb-font-size-sm);
}

.four-oh-four-hint kbd {
    background: var(--rb-bg-muted);
    padding: var(--rb-space-1) var(--rb-space-2);
    border-radius: var(--rb-radius-md);
    font-family: var(--rb-font-family-mono);
    border: 1px solid var(--rb-border-default);
}

/* =============================================================================
   SEARCH INPUT SHORTCUT HINT
   Displays ⌘K / Ctrl+K inside the search input
   ============================================================================= */

/* Position the search form for absolute positioning of kbd */
.md-search__form {
    position: relative;
}

/* Keyboard shortcut badge inside search input */
.md-search__shortcut {
    position: absolute;
    right: var(--rb-space-3);
    top: 50%;
    transform: translateY(-50%);
    padding: var(--rb-space-1) var(--rb-space-2);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--rb-radius-md);
    font-family: var(--rb-font-family-mono);
    font-size: var(--rb-font-size-xs);
    color: rgba(255, 255, 255, 0.7);
    pointer-events: none;
    transition: opacity var(--rb-transition-fast);
}

/* Hide when search is open/focused */
[data-md-toggle="search"]:checked ~ .md-header .md-search__shortcut {
    opacity: 0;
}

/* Hide when input has text (class added via JS) */
.md-search__shortcut--hidden {
    opacity: 0;
}

/* Hide on mobile - no keyboard shortcuts there */
@media screen and (max-width: 59.9375em) {
    .md-search__shortcut {
        display: none;
    }
}

/* =============================================================================
   JUMP TO NAVIGATION
   Command palette-style quick navigation modal
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Backdrop
   ----------------------------------------------------------------------------- */

.jump-to-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--rb-transition-fast),
        visibility var(--rb-transition-fast);
    z-index: 100;
}

.jump-to-backdrop--open {
    opacity: 1;
    visibility: visible;
}

/* -----------------------------------------------------------------------------
   Modal Container
   ----------------------------------------------------------------------------- */

.jump-to-modal {
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    width: 90%;
    max-width: 560px;
    max-height: 70vh;
    background: var(--rb-bg-page);
    border: 1px solid var(--rb-border-default);
    border-radius: var(--rb-radius-lg);
    box-shadow: var(--rb-shadow-lg);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--rb-transition-fast),
        transform var(--rb-transition-fast),
        visibility var(--rb-transition-fast);
    z-index: 101;
}

.jump-to-modal--open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Mobile: floating card modal with visible backdrop on all sides for tap-to-close */
@media screen and (max-width: 76.1875em) {
    .jump-to-modal {
        top: 3.5rem;
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        transform: none;
        width: auto;
        max-width: none;
        max-height: calc(
            100dvh - 5.5rem
        ); /* Viewport minus top + bottom margins */
        border-radius: var(--rb-radius-lg);
        border: 1px solid var(--rb-border-muted);
    }

    .jump-to-modal--open {
        transform: none;
    }
}

/* -----------------------------------------------------------------------------
   Header (Input)
   ----------------------------------------------------------------------------- */

.jump-to-header {
    display: flex;
    align-items: center;
    gap: var(--rb-space-2);
    padding: var(--rb-space-4);
    border-bottom: 1px solid var(--rb-border-default);
}

.jump-to-input {
    flex: 1;
    padding: var(--rb-space-3);
    border: 1px solid var(--rb-input-border);
    border-radius: var(--rb-radius-md);
    background: var(--rb-input-bg);
    color: var(--rb-text-default);
    font-size: var(--rb-font-size-md);
    font-family: inherit;
    outline: none;
    transition:
        border-color var(--rb-transition-fast),
        box-shadow var(--rb-transition-fast),
        background var(--rb-transition-fast);
}

.jump-to-input:focus {
    border-color: var(--rb-input-border-focus);
    background: var(--rb-input-bg-focus);
    box-shadow: 0 0 0 3px var(--rb-input-ring);
}

.jump-to-input::placeholder {
    color: var(--rb-text-minimum);
}

.jump-to-shortcut {
    display: none;
    padding: var(--rb-space-1) var(--rb-space-2);
    background: var(--rb-bg-muted);
    border: 1px solid var(--rb-border-default);
    border-radius: var(--rb-radius-md);
    font-family: var(--rb-font-family-mono);
    font-size: var(--rb-font-size-xs);
    color: var(--rb-text-minimum);
}

@media screen and (min-width: 76.25em) {
    .jump-to-shortcut {
        display: block;
    }
}

/* -----------------------------------------------------------------------------
   Results List
   ----------------------------------------------------------------------------- */

.jump-to-results {
    flex: 1;
    overflow-y: auto;
    padding: var(--rb-space-2) 0;
}

.jump-to-loading,
.jump-to-empty,
.jump-to-error {
    padding: var(--rb-space-6) var(--rb-space-4);
    text-align: center;
    color: var(--rb-text-minimum);
    font-size: var(--rb-font-size-sm);
}

.jump-to-error {
    color: var(--rb-danger-fg);
}

/* Section headers */
.jump-to-section {
    padding: var(--rb-space-3) var(--rb-space-4) var(--rb-space-1);
    font-size: var(--rb-font-size-xs);
    font-weight: var(--rb-font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rb-text-minimum);
}

/* Page items */
.jump-to-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rb-space-2);
    padding: var(--rb-space-2) var(--rb-space-4);
    color: var(--rb-text-default);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--rb-transition-fast);
}

.jump-to-item:hover {
    background: var(--rb-bg-hover);
}

.jump-to-item--focused {
    background: var(--rb-bg-muted);
}

.jump-to-item--current {
    color: var(--rb-brand-accent-dark);
    font-weight: var(--rb-font-weight-medium);
}

.jump-to-item--current::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--rb-brand-accent);
}

.jump-to-item {
    position: relative;
}

.jump-to-item-title {
    flex: 1;
    min-width: 0;
    font-size: var(--rb-font-size-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Method badges */
.jump-to-method {
    flex-shrink: 0;
    padding: 0.125rem 0.375rem;
    border-radius: var(--rb-radius-full);
    font-size: var(--rb-font-size-xxs);
    font-weight: var(--rb-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: #fff;
}

.jump-to-method--get {
    background: var(--rb-badge-get-bg);
}

.jump-to-method--post {
    background: var(--rb-badge-post-bg);
}

.jump-to-method--put {
    background: var(--rb-badge-put-bg);
}

.jump-to-method--patch {
    background: var(--rb-badge-patch-bg);
}

.jump-to-method--delete {
    background: var(--rb-badge-delete-bg);
}

/* -----------------------------------------------------------------------------
   Footer (Hints)
   ----------------------------------------------------------------------------- */

.jump-to-footer {
    display: flex;
    gap: var(--rb-space-4);
    padding: var(--rb-space-3) var(--rb-space-4);
    border-top: 1px solid var(--rb-border-default);
    background: var(--rb-bg-muted);
    border-radius: 0 0 var(--rb-radius-lg) var(--rb-radius-lg);
}

@media screen and (max-width: 76.1875em) {
    .jump-to-footer {
        /* Hide keyboard hints on mobile - not applicable to touch */
        display: none;
    }
}

.jump-to-hint {
    display: flex;
    align-items: center;
    gap: var(--rb-space-1);
    font-size: var(--rb-font-size-xs);
    color: var(--rb-text-minimum);
}

.jump-to-hint kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 0 var(--rb-space-1);
    background: var(--rb-bg-page);
    border: 1px solid var(--rb-border-default);
    border-radius: var(--rb-radius-sm);
    font-family: var(--rb-font-family-mono);
    font-size: var(--rb-font-size-xxs);
}

/* -----------------------------------------------------------------------------
   Desktop Trigger (Sidebar)
   -----------------------------------------------------------------------------
   Layout Shift Prevention:
   - Sidebar reserves space for the trigger via padding-top
   - Trigger is positioned absolutely into that space
   - Fade-in animation prevents visual pop-in
   ----------------------------------------------------------------------------- */

/* Height of the jump-to trigger container (measured) */
:root {
    --rb-jump-to-height: 75px;
}

@media screen and (min-width: 2000px) {
    :root {
        --rb-jump-to-height: 90px;
    }

    .md-content__button.md-icon {
        top: 1.6rem !important;
    }
}

/* Reserve space in sidebar for jump-to trigger (desktop only) */
@media screen and (min-width: 76.25em) {
    .md-sidebar--primary .md-sidebar__inner {
        position: relative;
        padding-top: var(--rb-jump-to-height);
    }

    /* Remove reserved space if JS fails or trigger unavailable */
    .md-sidebar--primary .md-sidebar__inner.jump-to-unavailable {
        padding-top: 0;
    }
}

.jump-to-trigger-desktop {
    padding: var(--rb-space-2);
    /* Position into reserved space */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Solid background prevents shadow bleed from nav below */
    background: var(--rb-bg-page);
    /* Stay above nav elements */
    z-index: 10;
    /* Fade-in animation */
    opacity: 0;
    transition: opacity var(--rb-transition-fast);
}

.jump-to-trigger-desktop.is-ready {
    opacity: 1;
}

/* Hide on mobile */
@media screen and (max-width: 76.1875em) {
    .jump-to-trigger-desktop {
        display: none;
    }
}

.jump-to-trigger-btn {
    display: flex;
    align-items: center;
    gap: var(--rb-space-2);
    width: 100%;
    padding: var(--rb-space-2) var(--rb-space-3);
    border: 1px solid var(--rb-border-default);
    border-radius: var(--rb-radius-md);
    background: var(--rb-bg-muted);
    color: var(--rb-text-muted);
    font-size: var(--rb-font-size-sm);
    font-family: inherit;
    cursor: pointer;
    transition:
        border-color var(--rb-transition-fast),
        background var(--rb-transition-fast);
}

.jump-to-trigger-btn:hover {
    border-color: var(--rb-text-minimum);
    background: var(--rb-bg-page);
}

.jump-to-trigger-btn:focus-visible {
    outline: 2px solid var(--rb-brand-primary);
    outline-offset: 2px;
}

.jump-to-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.6;
}

.jump-to-trigger-text {
    flex: 1;
    text-align: left;
}

.jump-to-trigger-kbd {
    padding: var(--rb-space-1) var(--rb-space-2);
    background: var(--rb-bg-page);
    border: 1px solid var(--rb-border-default);
    border-radius: var(--rb-radius-sm);
    font-family: var(--rb-font-family-mono);
    font-size: var(--rb-font-size-xxs);
    color: var(--rb-text-minimum);
}

/* -----------------------------------------------------------------------------
   Mobile Trigger (Page Title Bar)
   ----------------------------------------------------------------------------- */

.jump-to-trigger-mobile {
    display: none;
    margin-bottom: var(--rb-space-4);
}

/* Only show on mobile */
@media screen and (max-width: 76.1875em) {
    .jump-to-trigger-mobile {
        display: block;
    }
}

.jump-to-mobile-btn {
    display: flex;
    align-items: center;
    gap: var(--rb-space-2);
    width: 100%;
    padding: var(--rb-space-3);
    border: 1px solid var(--rb-border-default);
    border-radius: var(--rb-radius-md);
    background: var(--rb-bg-muted);
    color: var(--rb-text-default);
    font-size: var(--rb-font-size-sm);
    font-family: inherit;
    cursor: pointer;
    transition:
        border-color var(--rb-transition-fast),
        background var(--rb-transition-fast);
}

.jump-to-mobile-btn:hover {
    border-color: var(--rb-text-minimum);
}

.jump-to-mobile-btn:focus-visible {
    outline: 2px solid var(--rb-brand-primary);
    outline-offset: 2px;
}

.jump-to-mobile-btn .jump-to-icon {
    color: var(--rb-text-minimum);
}

.jump-to-mobile-title {
    flex: 1;
    text-align: left;
    font-weight: var(--rb-font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jump-to-chevron {
    width: 20px;
    height: 20px;
    color: var(--rb-text-minimum);
}

/* -----------------------------------------------------------------------------
   Mobile Navigation Strategy: Hamburger opens Jump To modal
   The hamburger is visible, but clicking it opens Jump To instead of the drawer.
   See: docs/javascripts/hamburger-jump-to.js
   ----------------------------------------------------------------------------- */

@media screen and (max-width: 76.1875em) {
    /* Show hamburger - it now opens Jump To modal via JS */
    .md-header__button[for="__drawer"] {
        display: flex;
        cursor: pointer;
    }

    /* Hide the mobile drawer - Jump To replaces it */
    .md-nav--primary {
        display: none;
    }

    /* Prevent drawer checkbox from affecting layout (JS intercepts click) */
    #__drawer:checked ~ .md-container .md-nav--primary {
        display: none;
    }

    /* Keep header search visible */
    .md-header__button[for="__search"] {
        display: flex;
    }

    /* Hide truncated site title on mobile - show logo only */
    .md-header__title {
        display: none;
    }

    /* Ensure logo stays visible and properly sized */
    .md-header__button.md-logo {
        display: flex;
        margin-right: auto; /* Push search to the right */
    }

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

/* =============================================================================
   SUGGEST EDIT CALLOUT
   UAT Implementation - Google Form link at bottom of pages
   See: meta/SUGGEST_EDIT_PLAN.md
   ============================================================================= */

.suggest-edit-callout {
    margin-top: var(--rb-space-8);
    padding-top: var(--rb-space-4);
    padding-bottom: var(--rb-space-4);
    border-top: 1px solid var(--rb-border-muted);
}

.suggest-edit-callout__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rb-space-4);
    flex-wrap: wrap;
}

.suggest-edit-callout__text {
    font-size: var(--rb-font-size-sm);
    color: var(--rb-text-muted);
}

.suggest-edit-callout__link {
    display: inline-flex;
    align-items: center;
    gap: var(--rb-space-1);
    font-size: var(--rb-font-size-sm);
    font-weight: var(--rb-font-weight-medium);
    color: var(--rb-brand-primary);
    text-decoration: none;
    transition: color var(--rb-transition-fast);
}

.suggest-edit-callout__link:hover {
    color: var(--rb-brand-primary-dark);
    text-decoration: underline;
}

.suggest-edit-callout__link svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Responsive: stack on mobile */
@media screen and (max-width: 480px) {
    .suggest-edit-callout__content {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--rb-space-2);
    }
}

/* =============================================================================
   TRUNCATED CODE BLOCKS
   Auto-collapse long code blocks (JSON responses) with expand/collapse toggle.
   Button overlays the bottom of the code block for a cleaner UI.
   See: meta/TRUNCATED_CODE_BLOCKS_PLAN.md
   ============================================================================= */

/* Wrapper - provides positioning context */
.code-block-wrapper {
    position: relative;
}

/* Truncated state - collapsed with fade gradient */
pre.code-block-truncated {
    position: relative;
    max-height: 400px;
    overflow: hidden;
}

/* Fade gradient overlay - fades code into background */
pre.code-block-truncated::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--md-code-bg-color, #1e1e1e) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Expanded state - full height, no fade */
pre.code-block-truncated.code-block-expanded {
    max-height: none;
}

pre.code-block-truncated.code-block-expanded::after {
    display: none;
}

/* When expanded, add bottom padding to wrapper for the button */
.code-block-wrapper--expanded {
    padding-bottom: 48px;
}

/* Toggle button - positioned absolutely at bottom of code block
   Uses overlay button tokens (translucent dark) for variable backgrounds */
.code-block-toggle {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rb-space-2);
    padding: var(--rb-space-2) var(--rb-space-4);
    background: var(--rb-overlay-bg);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--rb-overlay-border);
    border-radius: var(--rb-radius-full);
    color: var(--rb-overlay-fg);
    font-size: var(--rb-font-size-sm);
    font-family: var(--rb-font-family);
    cursor: pointer;
    transition:
        background var(--rb-transition-fast),
        transform var(--rb-transition-fast);
}

.code-block-toggle:hover {
    background: var(--rb-overlay-bg-hover);
}

.code-block-toggle:focus-visible {
    outline: 2px solid var(--rb-brand-primary);
    outline-offset: 2px;
}

/* Arrow icon - rotates when expanded */
.code-block-toggle__icon {
    flex-shrink: 0;
    transition: transform var(--rb-transition-fast);
}

.code-block-toggle--expanded .code-block-toggle__icon {
    transform: rotate(180deg);
}

/* Label text */
.code-block-toggle__label {
    white-space: nowrap;
}

/* Reduced motion - disable animation */
@media (prefers-reduced-motion: reduce) {
    .code-block-toggle__icon {
        transition: none;
    }
    .code-block-toggle {
        transition: none;
    }
}

/* Print - always show full content */
@media print {
    pre.code-block-truncated {
        max-height: none;
        overflow: visible;
    }

    pre.code-block-truncated::after {
        display: none;
    }

    .code-block-toggle {
        display: none;
    }

    .code-block-wrapper--expanded {
        padding-bottom: 0;
    }
}