/*
 * Header colours follow Redoc's own theme variables, so it switches light/dark together with the docs.
 * The fallbacks are the values Redoc 3 sets, for pages where Redoc did not render (e.g. the spec failed to load).
 */
:root {
    --header-bg: var(--bg-color, #ffffff);
    --header-text: var(--text-color-primary, #1a1c21);
    --header-text-muted: var(--text-color-secondary, #3b3c45);
    --header-border: var(--border-color-primary, #dcdde5);
    --header-accent: var(--color-primary-base, #3e63dd);
}

@media (prefers-color-scheme: dark) {
    :root {
        --header-bg: var(--bg-color, #22242b);
        --header-text: var(--text-color-primary, #fbfbfc);
        --header-text-muted: var(--text-color-secondary, #c4c6d1);
        --header-border: var(--border-color-primary, #555761);
    }
}

body {
    margin: 0;
    padding-top: 56px;
}

nav {
    position: fixed;
    top: 0;
    display: flex;
    align-items: center;
    gap: 24px;
    box-sizing: border-box;
    width: 100%;
    height: 56px;
    padding: 0 20px;
    z-index: 100;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--header-text);
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.brand::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--header-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--header-accent) 22%, transparent);
}

.brand span {
    font-weight: 500;
    color: var(--header-text-muted);
}

#links_container {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
}

#links_container::-webkit-scrollbar {
    display: none;
}

#links_container li {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    white-space: nowrap;
    color: var(--header-text-muted);
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}

#links_container li:hover {
    color: var(--header-text);
    background-color: color-mix(in srgb, var(--header-text) 7%, transparent);
}

#links_container li.active {
    font-weight: 600;
    color: var(--header-accent);
    background-color: color-mix(in srgb, var(--header-accent) 14%, transparent);
}

#links_container li svg {
    height: 14px;
    width: 14px;
    fill: currentColor;
}

@media (max-width: 600px) {
    nav {
        gap: 12px;
        padding: 0 12px;
    }

    .brand span {
        display: none;
    }
}
div[data-section-id^="operation/"] h3 ~ div button {
    display: flex;
    justify-content: flex-start;
}
div[data-section-id^="operation/"] h3 ~ div button p {
    margin: 0 0 0 14px !important;
}