/* =============================================================================
   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 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 as discrete tokens */
    --rb-hero-magma-c1: #6366f1;
    --rb-hero-magma-c2: #a855f7;
    --rb-hero-magma-c3: #ec4899;
    --rb-hero-magma-c4: #f472b6;
    --rb-hero-magma-c5: #fb923c;

    /* 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;

    /* 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.10;
    --rb-hero-pattern-color: rgba(255, 255, 255, 0.10);

    /* 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 */
    --rb-hero-magma-c1: #6366f1;
    --rb-hero-magma-c2: #a855f7;
    --rb-hero-magma-c3: #ec4899;
    --rb-hero-magma-c4: #f472b6;
    --rb-hero-magma-c5: #fb923c;

    /* 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 */
}

/* =============================================================================
   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: #c74ded; /* Special - magenta */
    --md-code-hl-function-color: #ffe66d; /* Functions - yellow */
    --md-code-hl-constant-color: #f78c6c; /* Constants - coral */
    --md-code-hl-keyword-color: #c74ded; /* Keywords - magenta */
    --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: #6e6e6e; /* Comments - muted gray */
    --md-code-hl-generic-color: #d5ced9; /* Generic - light gray */
    --md-code-hl-variable-color: #f29e74; /* Variables - orange */
}

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

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

[data-md-color-scheme="default"] .md-header,
[data-md-color-scheme="default"] .md-tabs,
[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs {
    background: 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;
}

/* 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;
}

/* -----------------------------------------------------------------------------
   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)
   ----------------------------------------------------------------------------- */

.ai-actions {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    /* Below header (z-index: 4) but above content */
    z-index: 2;
}

.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);
}

/* "Ask AI" label - hidden on smaller screens */
.ai-actions-label {
    font-weight: var(--rb-font-weight-medium);
}

@media (max-width: 1280px) {
    .ai-actions-label {
        display: none;
    }
    .ai-actions-trigger {
        gap: 2px;
    }
}

/* 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;
    right: 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);
}

/* =============================================================================
   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.
 */

.hero {
    background-color: var(--rb-hero-bg);
    color: var(--rb-hero-fg);
    padding: var(--rb-space-12) var(--rb-space-8);
    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%);
    /* MkDocs Material adds spacing above content:
       - .md-main__inner { margin-top: 1.5rem; }
       - .md-content__inner adds additional top padding (varies slightly by layout/breakpoint).
       Use rem so this stays aligned with Material's responsive typography. */
    margin-top: calc(-1 * (1.5rem + 1rem));
    margin-bottom: var(--rb-space-8);
}

/* 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
   ----------------------------------------------------------------------------- */

/* 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 doesn't need top border */
.md-nav--primary .md-nav__item--section:first-child > label,
.md-nav--primary .md-nav__item--section:first-child > .md-nav__link {
    border-top: none;
    padding-top: 0;
}

/* 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);
}

/* 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;
}

/* -----------------------------------------------------------------------------
   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-sm);
    color: var(--rb-text-muted);
    background: none !important; /* Override Material's code styling */
    padding: 0 !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);
}