/* Theme overrides - Inter font and clean aesthetics */

/* Default theme variables
 * Themes only need to override the variables they want to change.
 * Colors use RGB space-separated format for use with rgb() and opacity.
 */
:root {
    /* Primary accent colors */
    --primary-3: 30 32 36;
    --primary-4: 35 38 43;
    --primary-7: 55 60 70;
    --primary-9: 99 102 241;
    --primary-10: 129 140 248;
    --primary-11: 165 180 252;

    /* Tint scale - backgrounds and text */
    --tint-1: 13 13 15;
    --tint-2: 18 18 21;
    --tint-3: 23 23 27;
    --tint-4: 28 28 33;
    --tint-5: 35 35 41;
    --tint-6: 45 45 52;
    --tint-9: 113 113 122;
    --tint-11: 161 161 170;
    --tint-12: 250 250 250;

    /* Code blocks - dynamically set from Chroma theme */
    --code-bg: 13 17 23;
    --code-border: 41 46 59;

    /* Contrast color for text on primary-9 background */
    --contrast-primary-9: 255 255 255;
}

/* mdBook CSS variable compatibility layer
 * These variables map mdBook's theme system to romero's variables,
 * allowing existing mdBook custom CSS to work without modification.
 * See: https://rust-lang.github.io/mdBook/format/theme/index.html
 */
:root {
    /* Layout */
    --sidebar-width: 300px;
    --page-padding: 15px;
    --content-max-width: 750px;
    --menu-bar-height: 50px;
    --mono-font: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace;
    --code-font-size: 0.875em;

    /* Background & Text */
    --bg: rgb(var(--tint-1));
    --fg: rgb(var(--tint-12));

    /* Sidebar */
    --sidebar-bg: rgb(var(--tint-2));
    --sidebar-fg: rgb(var(--tint-12));
    --sidebar-non-existant: rgb(var(--tint-9));
    --sidebar-active: rgb(var(--primary-9));
    --sidebar-spacer: rgb(var(--tint-4));

    /* UI Elements */
    --scrollbar: rgb(var(--tint-6));
    --icons: rgb(var(--tint-9));
    --icons-hover: rgb(var(--tint-12));
    --links: rgb(var(--primary-9));

    /* Content Styling */
    --inline-code-color: rgb(var(--primary-11));
    --quote-bg: rgb(var(--tint-3));
    --quote-border: rgb(var(--primary-7));
    --warning-border: rgb(var(--primary-9));
    --table-border-color: rgb(var(--tint-5));
    --table-header-bg: rgb(var(--tint-5));
    --table-alternate-bg: rgb(var(--tint-2));

    /* Theme Popup */
    --theme-popup-bg: rgb(var(--tint-2));
    --theme-popup-border: rgb(var(--tint-6));
    --theme-hover: rgb(var(--tint-4));

    /* Search */
    --searchbar-border-color: rgb(var(--tint-6));
    --searchbar-bg: rgb(var(--tint-3));
    --searchbar-fg: rgb(var(--tint-12));
    --searchbar-shadow-color: rgba(0, 0, 0, 0.2);
    --searchresults-header-fg: rgb(var(--tint-9));
    --searchresults-border-color: rgb(var(--tint-6));
    --searchresults-li-bg: rgb(var(--tint-3));
    --search-mark-bg: rgb(var(--primary-7));
}

/* Base reset and font */
* {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Prevent horizontal overflow on mobile */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Go up button */
.go-up-btn {
    display: none;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    background: rgb(var(--tint-3));
    border: 1px solid rgb(var(--tint-5));
    color: rgb(var(--tint-11));
    border-radius: 8px;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.go-up-btn:hover {
    background: rgb(var(--tint-4));
    color: rgb(var(--tint-12));
}

/* Modal */
.modal-card {
    max-height: 75%;
    top: min(8vh, 6rem);
    position: fixed;
    margin: 1rem;
    width: calc(100% - 2rem);
    max-width: 640px;
    max-height: calc(100vh - 2rem);
}

@media screen and (max-width: 768px) {
    .modal-card {
        position: fixed;
        top: 3.5rem;
        left: 0;
        right: 0;
        max-height: calc(100% - 3.5rem);
        max-width: 100%;
        width: 100%;
        border-radius: 0;
        border: 0;
        box-shadow: none;
    }

    .modal-card-head {
        border: 0 !important;
    }

    .modal-card .modal-card-body {
        max-height: calc(100vh - 3.5rem - 60px);
    }
}

/* Code blocks - let Chroma's inline background-color take effect */
pre {
    border: 1px solid rgb(var(--code-border));
    border-radius: 8px;
    padding: 1rem !important;
    overflow-x: auto;
    color: rgb(230, 237, 243);
}

pre code,
pre code *,
code,
code * {
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace !important;
}

pre code {
    background: transparent !important;
    font-size: 0.875rem;
    line-height: 1.6;
}

code {
    background: rgb(var(--tint-4));
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
    color: rgb(var(--tint-12));
}

/* Header layout */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3.5rem;
    background: rgb(var(--tint-1) / 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgb(var(--tint-5));
    z-index: 100;
}

.header-nav {
    display: flex;
    align-items: center;
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 240px;
    flex-shrink: 0;
    padding: 0 1.5rem;
    height: 100%;
}

.header-center {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 0 3rem;
    height: 100%;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: auto;
    flex-shrink: 0;
    padding: 0 1.5rem 0 0.5rem;
    height: 100%;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.header-logo {
    width: 24px;
    height: 24px;
    border-radius: 4px;
}

.header-title {
    color: rgb(var(--tint-12));
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: -0.01em;
}

.header-brand:hover .header-title {
    color: rgb(var(--tint-11));
}

/* Header tabs */
.header-tabs {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.header-tab {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    color: rgb(var(--tint-11));
    text-decoration: none;
    font-size: 0.8125rem;
    border-radius: 6px;
    transition: color 0.15s, background-color 0.15s;
}

.header-tab:hover {
    color: rgb(var(--tint-12));
    background: rgb(var(--tint-3));
}

.header-tab.is-active {
    color: rgb(var(--tint-12));
    background: rgb(var(--tint-4));
}

.header-tab i {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Header icon link (GitHub) */
.header-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(var(--tint-3));
    border: 1px solid rgb(var(--tint-5));
    border-radius: 6px;
    color: rgb(var(--tint-9));
    width: 2rem;
    height: 2rem;
    font-size: 0.9375rem;
    flex-shrink: 0;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.header-icon-link:hover {
    background: rgb(var(--tint-4));
    border-color: rgb(var(--tint-6));
    color: rgb(var(--tint-11));
}

/* Theme toggle button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(var(--tint-3));
    border: 1px solid rgb(var(--tint-5));
    border-radius: 6px;
    color: rgb(var(--tint-9));
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}

.theme-toggle:hover {
    background: rgb(var(--tint-4));
    border-color: rgb(var(--tint-6));
    color: rgb(var(--tint-11));
}

/* Show sun in dark mode, moon in light mode */
.theme-icon-light {
    display: block;
}

.theme-icon-dark {
    display: none;
}

:root[data-theme="light"] .theme-icon-light {
    display: none;
}

:root[data-theme="light"] .theme-icon-dark {
    display: block;
}

/* Search button */
.header-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: rgb(var(--tint-3));
    border: 1px solid rgb(var(--tint-5));
    border-radius: 6px;
    color: rgb(var(--tint-9));
    font-size: 0.8125rem;
    height: 2rem;
    padding: 0 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    flex: 1;
    max-width: 100%;
}

.header-search:hover {
    background: rgb(var(--tint-4));
    border-color: rgb(var(--tint-6));
    color: rgb(var(--tint-11));
}

.header-search i {
    font-size: 0.75rem;
}

.header-search kbd {
    background: rgb(var(--tint-4));
    border: 1px solid rgb(var(--tint-5));
    border-radius: 4px;
    padding: 0.125rem 0.375rem;
    font-size: 0.6875rem;
    font-family: inherit;
    margin-left: 0.25rem;
}

/* Mobile nav toggle */
.nav-toggle-mobile {
    color: rgb(var(--tint-11));
    cursor: pointer;
    padding: 0.5rem;
    font-size: 1rem;
}

.nav-toggle-mobile:hover {
    color: rgb(var(--tint-12));
}

/* Menu item styling - fix line breaks */
.menu-item-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.menu-item-text {
    flex: 1;
    min-width: 0;
}

.menu-icon {
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: rgb(var(--tint-9));
}

.menu-dropdown-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--tint-9));
    border-radius: 4px;
    transition: transform 0.2s, background-color 0.15s;
    cursor: pointer;
    margin-left: auto;
    vertical-align: middle;
}

.menu-dropdown-icon:hover {
    background: rgb(var(--tint-4));
}

.menu-dropdown-icon i {
    font-size: 0.5rem;
    line-height: 1;
}

.menu-dropdown-icon-is-toggled {
    transform: rotate(90deg);
}

/* Selection styling */
::selection {
    background: rgb(var(--primary-9) / 0.3);
    color: rgb(var(--tint-12));
}

/* Focus visible styling */
:focus-visible {
    outline: 2px solid rgb(var(--primary-9));
    outline-offset: 2px;
}

/* Smooth transitions */
a, button {
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/* Scrollbar styling for body */
body {
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--tint-5)) transparent;
}

body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-track {
    background: transparent;
}

body::-webkit-scrollbar-thumb {
    background: rgb(var(--tint-5));
    border-radius: 4px;
}

body::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--tint-6));
}

/* Main container styling */
.main-container {
    background: transparent;
}

/* Aside menu background */
.menu.column {
    background: transparent;
}

/* Additional link styling for navigation */
.menu a, .toc a {
    text-decoration: none;
}

/* Strong text */
strong, b {
    color: rgb(var(--tint-12));
    font-weight: 600;
}

/* Emphasis */
em, i:not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fa-light) {
    font-style: italic;
}

/* Horizontal rule in menu */
.menu hr {
    background: rgb(var(--tint-5));
    height: 1px;
    margin: 1rem 0.75rem;
}

/* Admonition boxes (NOTE, TIP, IMPORTANT, WARNING, CAUTION) */
.admonition {
    padding: 1rem;
    padding-top: 0.75rem;
    border-radius: 8px;
    margin: 1.25rem 0;
    border-left: 4px solid;
}

.admonition-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admonition-title i {
    font-size: 1rem;
}

.admonition p:last-child {
    margin-bottom: 0;
}

/* Note - blue/primary */
.admonition.note {
    border-color: rgb(99 102 241);
    background: rgb(99 102 241 / 0.1);
}

.admonition.note .admonition-title {
    color: rgb(129 140 248);
}

/* Tip - green */
.admonition.tip {
    border-color: rgb(34 197 94);
    background: rgb(34 197 94 / 0.1);
}

.admonition.tip .admonition-title {
    color: rgb(74 222 128);
}

/* Important - purple */
.admonition.important {
    border-color: rgb(168 85 247);
    background: rgb(168 85 247 / 0.1);
}

.admonition.important .admonition-title {
    color: rgb(192 132 252);
}

/* Warning - yellow/amber */
.admonition.warning {
    border-color: rgb(234 179 8);
    background: rgb(234 179 8 / 0.1);
}

.admonition.warning .admonition-title {
    color: rgb(250 204 21);
}

/* Caution - red */
.admonition.caution {
    border-color: rgb(239 68 68);
    background: rgb(239 68 68 / 0.1);
}

.admonition.caution .admonition-title {
    color: rgb(248 113 113);
}

/* Light theme adjustments */
:root[data-theme="light"] .admonition.note .admonition-title {
    color: rgb(79 70 229);
}

:root[data-theme="light"] .admonition.tip .admonition-title {
    color: rgb(22 163 74);
}

:root[data-theme="light"] .admonition.important .admonition-title {
    color: rgb(147 51 234);
}

:root[data-theme="light"] .admonition.warning .admonition-title {
    color: rgb(202 138 4);
}

:root[data-theme="light"] .admonition.caution .admonition-title {
    color: rgb(220 38 38);
}

/* Text fragment link tooltip */
.text-link-tooltip {
    position: absolute;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: rgb(var(--tint-3));
    border: 1px solid rgb(var(--tint-5));
    border-radius: 999px;
    color: rgb(var(--tint-11));
    font-size: 0.75rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
    user-select: none;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}

.text-link-tooltip:hover {
    background: rgb(var(--tint-4));
    color: rgb(var(--tint-12));
}

.text-link-tooltip i {
    font-size: 0.6875rem;
}

/* Text fragment highlight */
.content mark[data-markjs] {
    background: rgb(var(--primary-9) / 0.3);
    color: inherit;
    padding: 0.05em 0;
    border-radius: 2px;
}

/* --- Structural layout (shared across all themes) --- */

:root {
    --tw-gradient-from: rgb(var(--tint-1)) 0;
    --tw-gradient-to: rgb(var(--tint-1)/0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
    --tw-gradient-to-position: 60%;
}

body {
    background-attachment: fixed;
    background-color: rgb(var(--tint-1));
    background-image: none;
    min-height: 100%;
}

/* --- Global --- */

/* Desktop layout using Bulma columns */
@media (min-width:1024px) {
    html {
        scroll-padding-top: 5rem;
        scroll-behavior: smooth;
    }

    body {
        padding-top: 3.5rem;
    }

    /* Ensure headings have proper scroll margin for anchor links */
    .content h1[id],
    .content h2[id],
    .content h3[id],
    .content h4[id],
    .content h5[id],
    .content h6[id] {
        scroll-margin-top: 5rem;
    }

    /* Main layout container */
    .main-container.columns {
        margin: 0 auto;
        padding: 0 !important;
        min-height: calc(100vh - 3.5rem);
        display: flex;
        align-items: flex-start;
        max-width: 1400px;
        position: relative;
    }

    /* Left sidebar - fixed position */
    .menu.column {
        position: fixed;
        top: 3.5rem;
        bottom: 0;
        width: 240px;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 1.5rem 0.75rem 2rem 1.5rem;
        border-right: 1px solid rgb(var(--tint-5));
        background: rgb(var(--tint-1));
        scrollbar-width: thin;
        scrollbar-color: rgb(var(--tint-5)) transparent;
    }

    /* Position sidebar based on container */
    @media (min-width: 1400px) {
        .menu.column {
            left: calc((100vw - 1400px) / 2);
        }
    }

    @media (max-width: 1399px) {
        .menu.column {
            left: 0;
        }
    }

    .menu.column::-webkit-scrollbar {
        width: 4px;
    }

    .menu.column::-webkit-scrollbar-track {
        background: transparent;
    }

    .menu.column::-webkit-scrollbar-thumb {
        background: rgb(var(--tint-5));
        border-radius: 2px;
    }

    /* Main content area */
    .content.column {
        flex: 1 1 0;
        margin-left: 240px;
        margin-right: 180px;
        padding: 2rem 1.5rem 4rem 3rem;
        min-width: 0;
    }

    /* Right TOC sidebar - fixed positioning */
    .toc.column {
        position: fixed;
        top: 3.5rem;
        right: calc((100vw - 1400px) / 2);
        bottom: 0;
        width: 180px;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 1.5rem 1rem 2rem 0.5rem;
        scrollbar-width: thin;
        scrollbar-color: rgb(var(--tint-5)) transparent;
    }

    @media (max-width: 1399px) {
        .toc.column {
            right: 0;
        }
    }

    .toc.column::-webkit-scrollbar {
        width: 4px;
    }

    .toc.column::-webkit-scrollbar-track {
        background: transparent;
    }

    .toc.column::-webkit-scrollbar-thumb {
        background: rgb(var(--tint-5));
        border-radius: 2px;
    }
}

/* Large screens - centered container */
@media (min-width:1400px) {
    .main-container.columns {
        max-width: 1400px;
    }

    .menu.column {
        width: 260px;
        left: calc((100vw - 1400px) / 2);
    }

    .content.column {
        margin-left: 260px;
        margin-right: 200px;
        padding: 2rem 2rem 4rem 3rem;
    }

    .toc.column {
        width: 200px;
        right: calc((100vw - 1400px) / 2);
    }

    header .header-nav {
        max-width: 1400px;
    }

    .header-left {
        width: 260px;
    }

    .header-right {
        width: auto;
        min-width: 200px;
    }
}

/* Extra large screens */
@media (min-width:1600px) {
    .main-container.columns {
        max-width: 1500px;
    }

    .menu.column {
        width: 280px;
        left: calc((100vw - 1500px) / 2);
        padding-left: 1.5rem;
    }

    .content.column {
        margin-left: 280px;
        margin-right: 220px;
        padding: 2.5rem 2rem 4rem 3rem;
    }

    .toc.column {
        width: 220px;
        right: calc((100vw - 1500px) / 2);
    }

    header .header-nav {
        max-width: 1500px;
    }

    .header-left {
        width: 280px;
    }

    .header-right {
        width: auto;
        min-width: 220px;
    }
}


/* Tablet styles */
@media (min-width: 769px) and (max-width: 1023px) {
    html {
        scroll-padding-top: 5rem;
    }

    body {
        padding-top: 3.5rem;
    }

    .content h1[id],
    .content h2[id],
    .content h3[id],
    .content h4[id],
    .content h5[id],
    .content h6[id] {
        scroll-margin-top: 5rem;
    }

    .main-container.columns {
        margin: 0;
        padding: 0 !important;
    }

    .menu.column {
        position: fixed;
        left: 0;
        top: 3.5rem;
        bottom: 0;
        width: 260px;
        flex: 0 0 260px;
        overflow-y: auto;
        padding: 1.5rem 1rem 2rem 1.5rem;
        border-right: 1px solid rgb(var(--tint-5));
        background: rgb(var(--tint-1));
    }

    .content.column {
        margin-left: 260px;
        padding: 2rem 1.5rem;
        flex: 1;
    }

    .toc.column {
        display: none !important;
    }
}

/* Mobile styles */
@media (max-width: 768px) {
    html {
        scroll-padding-top: 5rem;
    }

    body {
        padding-top: 3.5rem;
    }

    .content h1[id],
    .content h2[id],
    .content h3[id],
    .content h4[id],
    .content h5[id],
    .content h6[id] {
        scroll-margin-top: 5rem;
    }

    /* Taller header on mobile for better touch targets */
    header {
        height: 4rem;
    }

    .header-nav {
        padding: 0;
    }

    .header-left {
        width: auto;
        flex: 1;
        border-right: none;
        padding: 0 1rem;
    }

    /* Larger icons in header on mobile */
    .header-left .nav-toggle-mobile {
        font-size: 1.25rem;
        padding: 0.75rem;
    }

    .header-left .header-logo {
        height: 1.75rem;
    }

    .header-left .header-title {
        font-size: 1.125rem;
    }

    .header-center {
        display: none;
    }

    .header-right {
        width: auto;
        padding: 0 1rem;
    }

    .header-right .header-icon-link,
    .header-right .theme-toggle,
    .header-right .header-search {
        font-size: 1.125rem;
    }

    .header-right .header-search i {
        font-size: 1.125rem;
    }

    .header-tabs {
        display: none;
    }

    /* Mobile tabs bar - height is ~2.75rem (padding + text + border) */
    .mobile-tabs {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        background: transparent;
        border-bottom: 1px solid rgb(var(--tint-5));
        padding: 0 1rem;
        gap: 0.25rem;
        height: 2.75rem;
        align-items: center;
    }

    /* Remove border between header-nav and tabs when tabs present */
    header:has(.mobile-tabs) {
        border-bottom: none;
    }

    header:has(.mobile-tabs) .header-nav {
        border-bottom: 1px solid rgb(var(--tint-5) / 0.5);
    }

    .mobile-tabs::-webkit-scrollbar {
        display: none;
    }

    .mobile-tab {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0 1rem;
        height: 100%;
        color: rgb(var(--tint-11));
        text-decoration: none;
        font-size: 0.875rem;
        font-weight: 500;
        white-space: nowrap;
        border-bottom: 2px solid transparent;
        flex-shrink: 0;
    }

    .mobile-tab:hover {
        color: rgb(var(--tint-12));
    }

    .mobile-tab.is-active {
        color: rgb(var(--primary-9));
        border-bottom-color: rgb(var(--primary-9));
    }

    .mobile-tab i {
        font-size: 0.875rem;
    }

    /* When mobile tabs are present, header is taller */
    header:has(.mobile-tabs) {
        height: auto;
    }

    .main-container.columns {
        display: block;
        margin: 0;
        padding: 0 !important;
    }

    .content.column {
        padding: 2rem 1.25rem 3rem 1.25rem;
        width: 100%;
        margin: 0;
    }

    /* More top padding when mobile tabs are present */
    header:has(.mobile-tabs) ~ main .content.column {
        padding-top: 4rem;
    }

    .modal-card {
        top: var(--mobile-header-height, 3.5rem);
        left: 0;
        right: 0;
        width: calc(100% - 2rem);
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        max-height: calc(100% - var(--mobile-header-height, 3.5rem));
        border-radius: 0;
        border: 0;
        box-shadow: none;
    }

    .hidden-on-mobile {
        display: none;
    }

    .toc.column {
        display: none !important;
    }

    .menu.column {
        display: none;
    }

    .menu.column.is-active {
        display: block;
        position: fixed;
        left: 0;
        top: var(--mobile-header-height, 3.5rem);
        bottom: 0;
        width: 280px;
        background: rgb(var(--tint-1));
        border-right: 1px solid rgb(var(--tint-5));
        z-index: 50;
        padding: 1rem;
        overflow-y: auto;
    }
}

/* --- Menu --- */

.menu-list a {
    --bulma-menu-item-background-l: transparent;
    color: rgb(var(--tint-11));
    font-size: 0.8125rem;
    line-height: 1.5;
    padding: 0.375rem 0.75rem;
    transition: color 0.15s ease, background-color 0.15s ease;
    border-radius: 6px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.menu-list a.is-active {
    background: rgb(var(--tint-4));
    color: rgb(var(--tint-12));
    font-weight: 500;
}

.menu-list a.is-active:hover {
    color: rgb(var(--tint-12));
    background: rgb(var(--tint-5));
}

.menu-list li {
    padding-bottom: 2px;
}

.menu-list a:hover {
    color: rgb(var(--tint-12));
    background: rgb(var(--tint-3));
}

.menu-list li ul {
    padding-left: 0;
    margin-left: 1.25rem;
    margin-top: 0.25rem;
    border-left: 1px solid rgb(var(--tint-5));
}

.menu-list li ul a {
    padding-left: 1rem;
    font-size: 0.8125rem;
}

.menu .menu-label {
    color: rgb(var(--tint-9));
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    line-height: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    margin: 0;
}

.menu .menu-label:first-child {
    padding-top: 0;
}

/* --- TOC --- */

.toc {
    font-size: 0.8125rem;
}

.toc .toc-title {
    color: rgb(var(--tint-9));
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    padding-left: 0;
}

.toc > ul {
    border-left: 1px solid rgb(var(--tint-5));
    padding-left: 0;
    margin-left: 0;
}

.toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.toc ul li {
    font-size: 0.8125rem;
    line-height: 1.4;
    margin-top: 0;
}

.toc ul li a {
    display: block;
    color: rgb(var(--tint-9));
    padding: 0.2rem 0 0.2rem 0.75rem;
    margin-left: -1px;
    border-left: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
}

.toc ul li a:hover {
    color: rgb(var(--tint-12));
    border-left-color: rgb(var(--tint-6));
}

.toc ul ul {
    border-left: none;
}

.toc ul ul li a {
    padding-left: 1rem;
    font-size: 0.75rem;
}

.toc .edit {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgb(var(--tint-5));
}

.toc .edit a {
    color: rgb(var(--tint-9));
    font-size: 0.8125rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.toc .edit a:hover {
    color: rgb(var(--tint-12));
}

.toc .edit .update {
    color: rgb(var(--tint-9));
    font-size: 0.6875rem;
    display: block;
    margin-top: 0.5rem;
}

.toc hr {
    display: none;
}

.toc .is-active {
    color: rgb(var(--tint-12)) !important;
    border-left-color: rgb(var(--tint-12)) !important;
    font-weight: 500;
}

/* --- Content --- */

.content a {
    color: rgb(var(--primary-10));
    text-decoration: none;
    border-bottom: 1px solid rgb(var(--primary-10) / 0.3);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.content a:hover {
    color: rgb(var(--primary-11));
    border-bottom-color: rgb(var(--primary-11));
}

/* Headings need relative positioning for anchor placement */
.content h1[id],
.content h2[id],
.content h3[id],
.content h4[id],
.content h5[id],
.content h6[id] {
    position: relative;
}

.content .anchor {
    position: absolute;
    left: -1.5rem;
    color: rgb(var(--tint-9));
    text-decoration: none;
    border-bottom: none;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    font-weight: 400;
    width: 1.25rem;
    text-align: center;
}

.content .anchor:hover {
    color: rgb(var(--primary-9));
}

.content h1:hover .anchor,
.content h2:hover .anchor,
.content h3:hover .anchor,
.content h4:hover .anchor,
.content h5:hover .anchor,
.content h6:hover .anchor {
    opacity: 1;
}

/* On touch devices, always show anchors on the left */
@media (hover: none) {
    .content .anchor {
        opacity: 0.5;
        position: relative;
        left: 0;
        order: -1;
        margin-right: 0.5rem;
        margin-left: 0;
    }

    .content h1[id],
    .content h2[id],
    .content h3[id],
    .content h4[id],
    .content h5[id],
    .content h6[id] {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
    }

    .content .currently-selected-anchor {
        opacity: 1;
    }
}

.content {
    color: rgb(var(--tint-12));
    line-height: 1.75;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.content p {
    margin-bottom: 1.25rem;
    color: rgb(var(--tint-11));
}

.content h1 {
    font-size: 1.875rem;
    line-height: 1.2;
    font-weight: 600;
    margin-bottom: 1rem;
    color: rgb(var(--tint-12));
    letter-spacing: -0.02em;
}

.content h2 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: rgb(var(--tint-12));
    letter-spacing: -0.01em;
}

.content h3 {
    font-size: 1.0625rem;
    line-height: 1.4;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: rgb(var(--tint-12));
}

.content h4 {
    font-size: 0.9375rem;
    line-height: 1.5;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    color: rgb(var(--tint-12));
}

.content .currently-selected-anchor {
    color: rgb(var(--primary-9));
    opacity: 1;
}

.content ul,
.content ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
    color: rgb(var(--tint-11));
}

.content li {
    margin-bottom: 0.5rem;
}

.content li::marker {
    color: rgb(var(--tint-9));
}

.content blockquote {
    border-left: 3px solid rgb(var(--primary-9));
    padding-left: 1rem;
    margin-left: 0;
    margin-bottom: 1.25rem;
    color: rgb(var(--tint-11));
    font-style: normal;
}

.content blockquote > *:last-child {
    margin-bottom: 0;
}

.content table {
    width: 100%;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.content th {
    text-align: left;
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgb(var(--tint-5));
    color: rgb(var(--tint-12));
    font-size: 0.875rem;
}

.content td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgb(var(--tint-4));
    color: rgb(var(--tint-11));
}

.content tr:hover td {
    background: rgb(var(--tint-3));
}

.content hr {
    border: none;
    height: 1px;
    background: rgb(var(--tint-5));
    margin: 2rem 0;
}

.content img {
    border-radius: 8px;
    margin: 1rem 0;
}

.content dt {
    font-weight: bold;
}


/* --- Pagination --- */

.pagination {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgb(var(--tint-5));
    gap: 1rem;
}

.pagination .pagination-previous,
.pagination .pagination-next {
    width: calc(50% - 0.5rem);
    height: auto;
    min-height: 4.5rem;
    padding: 1rem;
    background: rgb(var(--tint-3));
    border: 1px solid rgb(var(--tint-5));
    border-radius: 8px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pagination .pagination-previous:hover,
.pagination .pagination-next:hover {
    background: rgb(var(--tint-4));
    border-color: rgb(var(--tint-6));
}

.pagination a {
    text-decoration: none;
    overflow: hidden;
}

.pagination .pagination-title {
    width: 90%;
    color: rgb(var(--tint-11));
}

.pagination .pagination-title .pagination-section {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(var(--tint-9));
    margin-bottom: 0.25rem;
}

.pagination .pagination-title .name {
    color: rgb(var(--tint-12));
    font-weight: 500;
}

.pagination .pagination-next .pagination-title {
    text-align: left;
}

.pagination .pagination-previous .pagination-title {
    text-align: right;
}

.pagination .pagination-title i {
    color: rgb(var(--tint-9));
    padding-right: 0.25rem;
}

.pagination .pagination-icon i {
    color: rgb(var(--tint-9));
    transition: color 0.15s ease;
}

.pagination .pagination-previous:hover .pagination-icon i,
.pagination .pagination-next:hover .pagination-icon i {
    color: rgb(var(--tint-12));
}

/* --- Search --- */

.modal-card {
    border: 1px solid rgb(var(--tint-5));
    border-radius: 12px;
    --bulma-modal-card-body-background-color: rgb(var(--tint-2));
    background: rgb(var(--tint-2));
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);
    overflow: hidden;
}

.modal-card-head {
    box-shadow: none;
    padding: 0;
    background: rgb(var(--tint-2));
    border: 0;
    border-bottom: 0;
}

.modal-card-head .modal-card-title {
    padding: 0;
    margin: 0;
    flex-grow: 1;
}

.modal-card-head .modal-card-title .control {
    width: 100%;
}

.modal-card-head i {
    color: rgb(var(--tint-9));
}

.modal-card-head .modal-card-title .control input {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid rgb(var(--tint-5));
    padding: 1rem 1rem 1rem 3rem;
    background-color: rgb(var(--tint-2));
    color: rgb(var(--tint-12));
    font-size: 1rem;
}

.modal-card-head .modal-card-title .control input::placeholder {
    color: rgb(var(--tint-9));
}

.modal-card-head .modal-card-title .control input:focus {
    box-shadow: none;
    outline: none;
}

.modal-background {
    background-color: rgb(var(--tint-1) / 0.8);
    --tw-backdrop-blur: blur(8px);
    backdrop-filter: var(--tw-backdrop-blur);
    -webkit-backdrop-filter: var(--tw-backdrop-blur);
}

.modal-card .modal-card-body {
    padding: 0;
    grid-template-columns: repeat(1, 1fr);
    max-height: 60vh;
    overflow-y: auto;
    min-height: 0;
}

.modal-card .modal-card-body:has(#search-results:empty) {
    display: none;
    padding: 0;
    min-height: 0;
    height: 0;
}

.modal-card #search-results {
    --bulma-grid-gap: 0;
}

.modal-card #search-results:empty {
    display: none;
    padding: 0;
    margin: 0;
    min-height: 0;
    height: 0;
}

.modal-card .search-results-metrics {
    padding: 0.75rem 1rem;
    color: rgb(var(--tint-9));
    border-bottom: 1px solid rgb(var(--tint-5));
    font-size: 0.8125rem;
}

.modal-card .search-results-result {
    border-bottom: 1px solid rgb(var(--tint-4));
    color: rgb(var(--tint-12));
    display: block;
    width: 100%;
    transition: background-color 0.1s ease;
}

.modal-card .search-results-result:hover {
    background-color: rgb(var(--tint-3));
}

.modal-card .search-results-result-active {
    background-color: rgb(var(--tint-4));
}

.modal-card .search-results-result-active:hover {
    background-color: rgb(var(--tint-5));
}

.modal-card .search-results-result-active .icon-right i {
    background-color: rgb(var(--tint-6));
    color: rgb(var(--tint-12));
    border-radius: 4px;
    padding: .375rem;
}

.modal-card .search-results-result .search-result-header {
    margin: 0;
    margin-inline-end: 0;
    margin-inline-start: 0;
}

.modal-card .search-results-result .search-result-header span {
    width: 100%;
    display: block;
}

.modal-card .search-results-result .search-result-icon {
    text-align: center;
    align-content: center;
    color: rgb(var(--tint-9));
}

.modal-card .search-results-result .search-result-title .search-section {
    color: rgb(var(--tint-9));
    letter-spacing: .05em;
    text-transform: uppercase;
    font-weight: 500;
    font-size: .6875rem;
    line-height: 1rem;
    margin-bottom: .25rem;
}

.modal-card .search-results-result .search-result-title .search-page {
    font-weight: 500;
    line-height: 1.5rem;
    color: rgb(var(--tint-12));
}


.modal-card .search-results-result .search-result-teaser {
    padding-left: 4rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
    color: rgb(var(--tint-11));
    word-wrap: break-word;
    font-size: 0.875rem;
    line-height: 1.5;
}

.modal-card .search-results-result .search-result-teaser em {
    background-color: rgb(var(--primary-9) / 0.2);
    color: rgb(var(--primary-11));
    padding: 0.125rem 0.25rem;
    border-radius: 2px;
    font-style: normal;
}

/* Lightbox - Image zoom viewer */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.lightbox.is-active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(var(--tint-1) / 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.lightbox-container {
    position: relative;
    overflow: visible;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-container.is-dragging {
    cursor: grabbing;
}

.lightbox-image {
    max-width: 90vw;
    max-height: 85vh;
    transform-origin: center center;
    transition: transform 0.1s ease-out;
    user-select: none;
    -webkit-user-drag: none;
    object-fit: contain;
}

.lightbox-image.svg-image {
    background: white;
    border-radius: 4px;
}


.lightbox-controls {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgb(var(--tint-2));
    border: 1px solid rgb(var(--tint-5));
    border-radius: 8px;
    padding: 0.5rem;
    z-index: 1001;
}

.lightbox-btn {
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: transparent;
    color: rgb(var(--tint-11));
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s, color 0.15s;
}

.lightbox-btn:hover {
    background: rgb(var(--tint-4));
    color: rgb(var(--tint-12));
}

.lightbox-zoom-level {
    min-width: 3.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: rgb(var(--tint-11));
    font-variant-numeric: tabular-nums;
}

/* Make images in content clickable */
.content img:not(.no-lightbox) {
    cursor: zoom-in;
}

/* D2 diagrams - clickable to open in lightbox */
.content .d2 {
    cursor: zoom-in;
    transition: opacity 0.2s;
}

.content .d2:hover {
    opacity: 0.85;
}

@media screen and (max-width: 768px) {
    .lightbox-controls {
        bottom: 1.5rem;
        padding: 0.5rem;
        gap: 0.375rem;
    }

    .lightbox-btn {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1rem;
    }

    .lightbox-zoom-level {
        min-width: 3.5rem;
        font-size: 0.875rem;
    }

    /* Hide +/- buttons on mobile since pinch-to-zoom is available */
    #lightbox-zoom-in,
    #lightbox-zoom-out {
        display: none;
    }
}

/* Enhanced code includes */
.romero-include {
    position: relative;
    margin: 1rem 0;
}

.romero-include .romero-include-toolbar {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.25rem;
    z-index: 10;
}

.romero-include .context-toggle,
.romero-include .source-link,
.romero-include .copy-code,
.romero-include .run-playground {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(var(--tint-4));
    border: 1px solid rgb(var(--tint-5));
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s, background-color 0.15s;
    color: rgb(var(--tint-11));
    font-size: 0.75rem;
    width: 1.75rem;
    height: 1.75rem;
    text-decoration: none;
}

.romero-include .context-toggle:hover,
.romero-include .source-link:hover,
.romero-include .copy-code:hover,
.romero-include .run-playground:hover {
    opacity: 1;
    background: rgb(var(--tint-5));
    color: rgb(var(--tint-12));
}

/* Include code blocks - need explicit background since they don't have Chroma inline styles */
.romero-include pre {
    margin: 0 !important;
    background: rgb(13, 17, 23) !important;
}

.romero-include pre code {
    margin: 0 !important;
    padding: 0 !important;
}

.romero-include .hidden-context {
    display: none;
    background: rgb(13, 17, 23) !important;
    border: 1px solid rgb(var(--code-border));
    opacity: 0.6;
}

.romero-include.show-context .hidden-context {
    display: block;
}

/* When context is shown, seamlessly connect the blocks */
.romero-include.show-context .hidden-context.before {
    border-radius: 8px 8px 0 0;
    border-bottom: 1px dashed rgb(var(--tint-6));
    padding-bottom: 0 !important;
}

.romero-include.show-context .include-content {
    border-radius: 0;
    border-top: none;
    border-bottom: none;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.romero-include.show-context .hidden-context.after {
    border-radius: 0 0 8px 8px;
    border-top: 1px dashed rgb(var(--tint-6));
    padding-top: 0 !important;
}

/* Line numbers using CSS counters */
.romero-include pre code {
    counter-reset: line calc(var(--line-start, 1) - 1);
    display: block;
    line-height: 1.5;
}

.romero-include pre code .line {
    display: block;
    min-height: 1.5em;
}

.romero-include pre code .line::before {
    counter-increment: line;
    content: counter(line);
    display: inline-block;
    width: 3em;
    margin-right: 1em;
    padding-right: 0.5em;
    text-align: right;
    color: rgb(140, 140, 140);
    border-right: 1px solid rgb(140, 140, 140);
    user-select: none;
    -webkit-user-select: none;
}

/* Context lines have slightly dimmer line numbers */
.romero-include .hidden-context code .line::before {
    color: rgb(140, 140, 140);
    opacity: 0.7;
}

/* Mobile: reduce line number padding */
@media screen and (max-width: 768px) {
    .romero-include pre code .line::before {
        width: 1.5em;
        margin-right: 0.4em;
        padding-right: 0.2em;
    }
}

/* Rust Playground output - terminal style */
.romero-rustdoc .playground-output {
    margin-top: 0.5rem;
    border: 1px solid rgb(var(--code-border));
    border-radius: 8px;
    overflow: hidden;
    background: rgb(13, 17, 23);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.romero-rustdoc .playground-output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.75rem;
    background: rgb(var(--code-bg));
    border-bottom: 1px solid rgb(var(--code-border));
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 8px 8px 0 0;
}

.romero-rustdoc .playground-output-header span {
    color: rgb(230, 237, 243);
    opacity: 0.7;
}

.romero-rustdoc .close-output {
    background: transparent;
    border: none;
    cursor: pointer;
    color: rgb(230, 237, 243);
    opacity: 0.5;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.2s, opacity 0.2s;
}

.romero-rustdoc .close-output:hover {
    background: rgb(var(--code-border));
    opacity: 1;
}

.romero-rustdoc .playground-output-content {
    margin: 0;
    padding: 1rem !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    background: rgb(13, 17, 23) !important;
    color: rgb(230, 237, 243);
    max-height: 300px;
    overflow-y: auto;
    border-radius: 0 0 8px 8px;
}

/* Copy button success state */
.romero-rustdoc .copy-code i.fa-check {
    color: rgb(34, 197, 94);
}

/* Run button disabled state */
.romero-rustdoc .run-playground:disabled {
    cursor: wait;
    opacity: 0.7;
}

/* OpenAPI Documentation Styles */
.openapi-info {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgb(var(--tint-5));
}

.openapi-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    display: inline;
}

.openapi-version {
    display: inline-block;
    margin-left: 0.75rem;
    padding: 0.125rem 0.5rem;
    background: rgb(var(--tint-4));
    border-radius: 4px;
    font-size: 0.875rem;
    color: rgb(var(--tint-11));
    vertical-align: middle;
}

.openapi-description {
    margin-top: 0.75rem;
    color: rgb(var(--tint-11));
}

.openapi-paths {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Highlight animation for targeted/searched endpoints */
@keyframes openapi-highlight-pulse {
    0% {
        border-color: rgb(var(--primary-9));
        box-shadow: 0 0 0 0 rgba(var(--primary-9), 0.4);
    }
    50% {
        border-color: rgb(var(--primary-9));
        box-shadow: 0 0 0 8px rgba(var(--primary-9), 0);
    }
    100% {
        border-color: rgb(var(--primary-9));
        box-shadow: 0 0 0 0 rgba(var(--primary-9), 0);
    }
}

.openapi-operation:target,
.openapi-operation.highlight {
    border-color: rgb(var(--primary-9));
    animation: openapi-highlight-pulse 1.5s ease-out;
}

.openapi-operation.highlight {
    border-color: rgb(var(--primary-9));
}

.openapi-endpoint {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.openapi-method {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    min-width: 4rem;
    text-align: center;
}

.openapi-path {
    font-size: 0.9375rem;
    color: rgb(var(--tint-12));
    background: transparent;
    padding: 0;
}

.openapi-summary {
    font-weight: 500;
    margin: 0 0 0.5rem 0;
    color: rgb(var(--tint-12));
}

.openapi-op-description {
    margin: 0 0 0.75rem 0;
    color: rgb(var(--tint-11));
    font-size: 0.9375rem;
}

.openapi-tags {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.openapi-tag {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: rgb(var(--tint-4));
    border-radius: 4px;
    font-size: 0.75rem;
    color: rgb(var(--tint-10));
}

.openapi-parameters,
.openapi-request-body,
.openapi-responses {
    margin-top: 1.25rem;
}

.openapi-request-body-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.openapi-request-body-header h4 {
    font-size: 0.6875rem;
    font-weight: 600;
    margin: 0;
    color: rgb(var(--tint-9));
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.openapi-content-type-badge {
    font-size: 0.6875rem;
    color: rgb(var(--tint-8));
    background: rgb(var(--tint-3));
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
}

.openapi-parameters h4,
.openapi-responses h4 {
    font-size: 0.6875rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    color: rgb(var(--tint-9));
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Parameters list - Stripe-style vertical layout */
.openapi-params-list,
.openapi-schema-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgb(var(--tint-4));
}

.openapi-param,
.openapi-schema-prop {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgb(var(--tint-4));
}

.openapi-param-header,
.openapi-schema-prop-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.openapi-param-name,
.openapi-schema-prop-name {
    font-family: var(--mono-font);
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(var(--tint-12));
    background: transparent;
    padding: 0;
}

.openapi-param-type,
.openapi-schema-prop-type {
    font-size: 0.75rem;
    color: rgb(var(--tint-9));
    font-family: var(--mono-font);
}

.openapi-param-required,
.openapi-schema-prop-required {
    font-size: 0.6875rem;
    font-weight: 500;
    color: rgb(239, 68, 68);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.openapi-param-in {
    font-size: 0.6875rem;
    color: rgb(var(--tint-8));
    background: rgb(var(--tint-3));
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
}

.openapi-constraint {
    font-size: 0.6875rem;
    font-family: var(--mono-font);
    color: rgb(var(--tint-8));
    background: rgb(var(--tint-2));
    border: 1px solid rgb(var(--tint-4));
    padding: 0.0625rem 0.375rem;
    border-radius: 3px;
}

.openapi-param-desc,
.openapi-schema-prop-desc {
    font-size: 0.8125rem;
    color: rgb(var(--tint-10));
    line-height: 1.5;
}

/* Nested schema styling */
.openapi-schema-nested {
    margin-left: 1rem;
    padding-left: 1rem;
    border-left: 2px solid rgb(var(--tint-4));
    border-top: none;
    margin-top: 0.5rem;
}

.openapi-schema-nested .openapi-schema-prop:first-child {
    padding-top: 0;
}

.openapi-schema-array-note,
.openapi-schema-type-note {
    font-size: 0.75rem;
    font-style: italic;
    color: rgb(var(--tint-9));
    margin-bottom: 0.5rem;
}

.openapi-content-type {
    margin: 0.5rem 0;
}

.openapi-content-type > code {
    display: inline-block;
    margin-bottom: 0.5rem;
    background: rgb(var(--tint-4));
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

/* Responses list - collapsible items */
.openapi-responses-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid rgb(var(--tint-5));
    border-radius: 6px;
    overflow: hidden;
}

.openapi-response-item {
    border-bottom: 1px solid rgb(var(--tint-5));
}

.openapi-response-item:last-child {
    border-bottom: none;
}

.openapi-response-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s;
    font-family: inherit;
    font-size: inherit;
}

.openapi-response-header:hover {
    background: rgb(var(--tint-3));
}

.openapi-response-header.no-content {
    cursor: default;
}

.openapi-response-header.no-content:hover {
    background: transparent;
}

.openapi-response-code {
    font-family: var(--mono-font);
    font-weight: 600;
    font-size: 0.8125rem;
    min-width: 2.5rem;
}

.openapi-response-description {
    flex: 1;
    color: rgb(var(--tint-11));
    font-size: 0.875rem;
}

.openapi-response-chevron {
    color: rgb(var(--tint-9));
    font-size: 0.625rem;
    transition: transform 0.2s;
}

.openapi-response-item.expanded .openapi-response-chevron {
    transform: rotate(180deg);
}

/* Response item status colors */
.openapi-response-item-success .openapi-response-header {
    border-left-color: rgb(34, 197, 94);
}

.openapi-response-item-success .openapi-response-code {
    color: rgb(34, 197, 94);
}

.openapi-response-item-warning .openapi-response-header {
    border-left-color: rgb(249, 115, 22);
}

.openapi-response-item-warning .openapi-response-code {
    color: rgb(249, 115, 22);
}

.openapi-response-item-error .openapi-response-header {
    border-left-color: rgb(239, 68, 68);
}

.openapi-response-item-error .openapi-response-code {
    color: rgb(239, 68, 68);
}

.openapi-response-item-info .openapi-response-header {
    border-left-color: rgb(59, 130, 246);
}

.openapi-response-item-info .openapi-response-code {
    color: rgb(59, 130, 246);
}

/* Response body (collapsible content) */
.openapi-response-body {
    padding: 0 0.75rem 0.75rem 0.75rem;
    border-top: 1px solid rgb(var(--tint-4));
    background: rgb(var(--tint-2));
}

.openapi-response-body .openapi-schema-table {
    margin-top: 0.5rem;
}

/* OpenAPI endpoint heading - used for ToC integration */
.openapi-endpoint-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 500;
    position: relative;
}

.openapi-endpoint-heading .openapi-path {
    font-size: 0.9375rem;
}

/* OpenAPI anchor link */
.openapi-anchor {
    position: absolute;
    left: -1.5rem;
    color: rgb(var(--tint-9));
    text-decoration: none;
    border-bottom: none;
    opacity: 0;
    font-weight: 400;
    width: 1.25rem;
    text-align: center;
    font-size: 1rem;
}

.openapi-anchor:hover {
    color: rgb(var(--primary-9));
    border-bottom: none;
}

.openapi-endpoint-heading:hover .openapi-anchor,
.openapi-operation:hover .openapi-anchor {
    opacity: 1;
}

/* On touch devices, always show anchors */
@media (hover: none) {
    .openapi-anchor {
        opacity: 0.5;
        position: relative;
        left: 0;
        margin-right: 0.5rem;
    }
}

/* OpenAPI ToC styles */
.openapi-toc-items {
    margin-top: 0.25rem;
}

.openapi-toc-item a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.openapi-toc-method {
    display: inline-block;
    padding: 0.0625rem 0.25rem;
    border-radius: 3px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    min-width: 2.25rem;
    text-align: center;
}

.openapi-toc-method-get {
    background: rgba(34, 197, 94, 0.15);
    color: rgb(34, 197, 94);
}

.openapi-toc-method-post {
    background: rgba(59, 130, 246, 0.15);
    color: rgb(59, 130, 246);
}

.openapi-toc-method-put {
    background: rgba(249, 115, 22, 0.15);
    color: rgb(249, 115, 22);
}

.openapi-toc-method-patch {
    background: rgba(168, 85, 247, 0.15);
    color: rgb(168, 85, 247);
}

.openapi-toc-method-delete {
    background: rgba(239, 68, 68, 0.15);
    color: rgb(239, 68, 68);
}

.openapi-toc-method-head,
.openapi-toc-method-options {
    background: rgba(107, 114, 128, 0.15);
    color: rgb(107, 114, 128);
}

/* OpenAPI Side-by-Side Layout */
.openapi-operation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    background: rgb(var(--tint-2));
    border: 1px solid rgb(var(--tint-5));
    border-radius: 8px;
    padding: 1.5rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Left column: Definition */
.openapi-definition {
    min-width: 0;
}

/* Right column: Examples - sticky positioning */
.openapi-examples {
    position: sticky;
    top: 5rem;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    min-width: 0; /* Allow shrinking below content size for horizontal scroll */
}

/* Example block styling */
.openapi-example-block {
    background: rgb(var(--code-bg));
    border: 1px solid rgb(var(--code-border));
    border-radius: 8px;
    overflow: hidden;

    /* Override tints to match the code background so interactive elements
       (tabs, buttons, hover states) stay legible regardless of the page theme. */
    --tint-2: 18 22 28;
    --tint-3: 23 27 33;
    --tint-4: 28 32 38;
    --tint-5: 35 39 45;
    --tint-6: 45 49 55;
    --tint-9: 113 113 122;
    --tint-11: 161 161 170;
    --tint-12: 250 250 250;
}

.openapi-example-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: rgb(var(--tint-4));
    border-bottom: 1px solid rgb(var(--code-border));
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(var(--tint-11));
}

.openapi-example-header > span:first-child {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.openapi-example-status {
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-family: var(--mono-font);
    font-weight: 600;
    font-size: 0.6875rem;
}

.openapi-example-response-success .openapi-example-status {
    background: rgba(34, 197, 94, 0.15);
    color: rgb(34, 197, 94);
}

.openapi-example-response-warning .openapi-example-status {
    background: rgba(249, 115, 22, 0.15);
    color: rgb(249, 115, 22);
}

.openapi-example-response-error .openapi-example-status {
    background: rgba(239, 68, 68, 0.15);
    color: rgb(239, 68, 68);
}

.openapi-example-response-info .openapi-example-status {
    background: rgba(59, 130, 246, 0.15);
    color: rgb(59, 130, 246);
}

/* Copy button */
.openapi-copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: rgb(var(--tint-9));
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: color 0.15s, background-color 0.15s;
    margin-left: auto;
}

.openapi-copy-btn:hover {
    color: rgb(var(--tint-12));
    background: rgb(var(--tint-5));
}

.openapi-copy-btn i.fa-check {
    color: rgb(34, 197, 94);
}

/* Code blocks inside examples */
.openapi-example-block pre {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: rgb(var(--code-bg)) !important;
}

.openapi-example-block pre code {
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* Response tabs */
.openapi-response-tabs {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid rgb(var(--code-border));
}

.openapi-response-tab {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s, border-color 0.15s;
    color: rgb(var(--tint-11));
}

.openapi-response-tab:hover {
    background: rgb(var(--tint-4));
}

.openapi-response-tab.active {
    background: rgb(var(--tint-3));
}

.openapi-response-tab-code {
    font-family: var(--mono-font);
    font-weight: 600;
    font-size: 0.8125rem;
    min-width: 2.5rem;
}

.openapi-response-tab-desc {
    font-size: 0.75rem;
    color: rgb(var(--tint-9));
}

/* Tab status colors */
.openapi-response-tab-success .openapi-response-tab-code {
    color: rgb(34, 197, 94);
}

.openapi-response-tab-success.active {
    border-left-color: rgb(34, 197, 94);
}

.openapi-response-tab-warning .openapi-response-tab-code {
    color: rgb(249, 115, 22);
}

.openapi-response-tab-warning.active {
    border-left-color: rgb(249, 115, 22);
}

.openapi-response-tab-error .openapi-response-tab-code {
    color: rgb(239, 68, 68);
}

.openapi-response-tab-error.active {
    border-left-color: rgb(239, 68, 68);
}

.openapi-response-tab-info .openapi-response-tab-code {
    color: rgb(59, 130, 246);
}

.openapi-response-tab-info.active {
    border-left-color: rgb(59, 130, 246);
}

/* Response panel */
.openapi-response-panel {
    position: relative;
}

.openapi-response-no-body {
    padding: 1rem;
    margin: 0;
    color: rgb(var(--tint-9));
    font-style: italic;
    font-size: 0.875rem;
}

/* Language tabs for code samples */
.openapi-code-samples {
    display: flex;
    flex-direction: column;
    min-width: 0; /* Allow shrinking for horizontal scroll */
}

.openapi-lang-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgb(var(--code-border));
    background: rgb(var(--tint-2));
}

.openapi-lang-tab {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    color: rgb(var(--tint-9));
    font-size: 0.8125rem;
    font-family: var(--sans-font);
    transition: color 0.15s, border-color 0.15s;
}

.openapi-lang-tab:hover {
    color: rgb(var(--tint-11));
}

.openapi-lang-tab.active {
    color: rgb(var(--tint-12));
    border-bottom-color: rgb(var(--accent));
}

.openapi-lang-panel {
    position: relative;
    min-width: 0; /* Allow shrinking for horizontal scroll */
    overflow-x: auto;
}

.openapi-lang-panel pre {
    margin: 0 !important;
    padding: 1rem;
    padding-left: 0;
    background: rgb(var(--code-bg));
    border-radius: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.openapi-lang-panel pre code {
    display: block;
    counter-reset: line calc(var(--line-start, 1) - 1);
}

.openapi-lang-panel code {
    background: transparent;
    padding: 0;
    font-family: var(--mono-font);
    white-space: pre;
}

.openapi-lang-panel pre code .line {
    display: block;
    min-height: 1.5em;
}

.openapi-lang-panel pre code .line::before {
    counter-increment: line;
    content: counter(line);
    display: inline-block;
    width: 2.5em;
    margin-right: 1em;
    padding-right: 0.5em;
    text-align: right;
    color: rgb(var(--tint-9));
    border-right: 1px solid rgb(var(--tint-5));
    user-select: none;
    -webkit-user-select: none;
}

/* Updated method badges - solid colors */
.openapi-method-get {
    background: rgb(34, 197, 94);
    color: white;
}

.openapi-method-post {
    background: rgb(59, 130, 246);
    color: white;
}

.openapi-method-put {
    background: rgb(249, 115, 22);
    color: white;
}

.openapi-method-patch {
    background: rgb(168, 85, 247);
    color: white;
}

.openapi-method-delete {
    background: rgb(239, 68, 68);
    color: white;
}

.openapi-method-head,
.openapi-method-options {
    background: rgb(107, 114, 128);
    color: white;
}

/* Wider layout for OpenAPI pages */
@media (min-width: 1400px) {
    .main-container.columns:has(.openapi-paths) {
        max-width: 1700px;
    }

    body:has(.openapi-paths) .menu.column {
        width: 280px;
        left: calc((100vw - 1700px) / 2);
        padding: 1.5rem 1.25rem 2rem 1.5rem;
    }

    body:has(.openapi-paths) .content.column {
        margin-left: 280px;
        margin-right: 230px;
    }

    body:has(.openapi-paths) .toc.column {
        width: 230px;
        right: calc((100vw - 1700px) / 2);
        padding: 1.5rem 1rem 2rem 1rem;
    }
}

@media (min-width: 1800px) {
    .main-container.columns:has(.openapi-paths) {
        max-width: 1900px;
    }

    body:has(.openapi-paths) .menu.column {
        width: 300px;
        left: calc((100vw - 1900px) / 2);
        padding: 1.5rem 1.5rem 2rem 1.5rem;
    }

    body:has(.openapi-paths) .content.column {
        margin-left: 300px;
        margin-right: 250px;
    }

    body:has(.openapi-paths) .toc.column {
        width: 250px;
        right: calc((100vw - 1900px) / 2);
        padding: 1.5rem 1.25rem 2rem 1.25rem;
    }
}

/* Ultra-wide screens (2K+) */
@media (min-width: 2200px) {
    .main-container.columns:has(.openapi-paths) {
        max-width: 2200px;
    }

    body:has(.openapi-paths) .menu.column {
        width: 320px;
        left: calc((100vw - 2200px) / 2);
        padding: 1.5rem 1.75rem 2rem 1.75rem;
    }

    body:has(.openapi-paths) .content.column {
        margin-left: 320px;
        margin-right: 270px;
    }

    body:has(.openapi-paths) .toc.column {
        width: 270px;
        right: calc((100vw - 2200px) / 2);
        padding: 1.5rem 1.5rem 2rem 1.5rem;
    }

    /* Cap column widths for readability on ultra-wide */
    .openapi-operation {
        grid-template-columns: minmax(0, 700px) minmax(0, 800px);
        justify-content: space-between;
    }

    .openapi-definition {
        max-width: 700px;
    }

    .openapi-examples {
        max-width: 800px;
    }
}

/* Responsive: Stack vertically below 1200px */
@media (max-width: 1200px) {
    .openapi-operation {
        grid-template-columns: minmax(0, 1fr);
    }

    .openapi-examples {
        position: static;
        max-height: none;
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .openapi-operation {
        padding: 1rem;
        gap: 1.5rem;
    }

    /* Endpoint heading - wrap on mobile */
    .openapi-endpoint-heading {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .openapi-endpoint-heading .openapi-path {
        font-size: 0.8125rem;
        word-break: break-all;
    }

    /* Anchor link adjustments */
    .openapi-anchor {
        position: relative;
        left: 0;
        opacity: 0.5;
        margin-right: 0.25rem;
    }

    /* Parameters list */
    .openapi-param-header,
    .openapi-schema-prop-header {
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    .openapi-param-name,
    .openapi-schema-prop-name {
        font-size: 0.8125rem;
    }

    .openapi-param-desc,
    .openapi-schema-prop-desc {
        font-size: 0.75rem;
    }

    /* Nested schema - reduce indent on mobile */
    .openapi-schema-nested {
        margin-left: 0.5rem;
        padding-left: 0.75rem;
    }

    /* Section headers */
    .openapi-parameters h4,
    .openapi-request-body-header h4,
    .openapi-responses h4 {
        font-size: 0.625rem;
    }

    /* Response items */
    .openapi-response-header {
        padding: 0.625rem 0.75rem;
    }

    .openapi-response-code {
        font-size: 0.75rem;
        padding: 0.125rem 0.375rem;
    }

    .openapi-response-description {
        font-size: 0.75rem;
    }

    /* Code samples - language tabs */
    .openapi-lang-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .openapi-lang-tab {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .openapi-lang-panel pre {
        font-size: 0.75rem;
        padding: 0.75rem;
        padding-left: 0;
    }

    .openapi-lang-panel pre code .line::before {
        width: 2em;
        margin-right: 0.5em;
        padding-right: 0.25em;
        font-size: 0.6875rem;
    }

    /* Response tabs */
    .openapi-response-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    .openapi-response-tab {
        padding: 0.5rem 0.75rem;
        min-width: max-content;
    }

    .openapi-response-tab-code {
        font-size: 0.6875rem;
    }

    .openapi-response-tab-desc {
        font-size: 0.6875rem;
    }

    /* Example headers */
    .openapi-example-header {
        padding: 0.375rem 0.625rem;
        font-size: 0.6875rem;
    }

    .openapi-copy-btn {
        padding: 0.125rem;
    }

    /* Method badges */
    .openapi-method {
        font-size: 0.625rem;
        padding: 0.1875rem 0.375rem;
    }

    /* Tags */
    .openapi-tag {
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
    }

    /* API info header */
    .openapi-info h2 {
        font-size: 1.25rem;
    }

    .openapi-version {
        font-size: 0.6875rem;
    }
}