@import url(layout.css);

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Mono:ital,wght@0,300..700;1,300..700&display=swap');

@import url('https://unpkg.com/prismjs@1.20.0/themes/prism-okaidia.css') layer(prism);

@layer style {

    :root {
        --font-heading: "Source Serif 4", Georgia, serif;
        --font-body: "Hanken Grotesk", system-ui, sans-serif;
        --font-mono: "Red Hat Mono", ui-monospace, monospace;

        --color-bg: #FAF9F7;
        --color-surface: #F0EEEA;
        --color-border: #DBD7CF;
        --color-border-light: #E9E6DF;

        --color-text: #1D293D;
        --color-text-secondary: #566378;
        --color-text-tertiary: #8790A0;

        --color-link: #2563A8;
        --color-link-hover: #1A4574;

        --color-accent: #B35318;

        --color-inline-code-bg: #EBE8E2;

        --sidebar-width: 16rem;
        --content-max-width: 48rem;
        --header-height: 3.5rem;
    }

    @view-transition {
        navigation: auto;
    }

    /* --- Base typography --- */

    body {
        font-family: var(--font-body);
        color: var(--color-text);
        background-color: var(--color-bg);
        font-size: 0.9375rem;
        line-height: 1.7;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-heading);
        font-style: normal;
        line-height: 1.3;
        color: var(--color-text);
    }

    h1 {
        font-size: 1.875rem;
        font-weight: 600;
        letter-spacing: -0.015em;
    }

    h2 {
        font-size: 1.3125rem;
        font-weight: 500;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--color-border-light);
    }

    h3 {
        font-size: 1.125rem;
        font-weight: 500;
    }

    /* --- Global links --- */

    a {
        color: var(--color-link);
        text-decoration: none;
        transition: color 150ms ease;
    }

    a:where(:visited) {
        color: var(--color-link);
    }

    a:hover {
        color: var(--color-link-hover);
    }

    /* --- Header --- */

    header {
        background-color: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
        border-top: 2px solid var(--color-accent);
    }

    header .brand {
        text-decoration: none;
    }

    header .primary-nav a {
        position: relative;
        display: inline-flex;
        align-items: center;
        height: var(--header-height, 3.5rem);
        padding: 0 0.875rem;
        font-family: var(--font-body);
        font-size: 0.8125rem;
        font-weight: 550;
        letter-spacing: 0.02em;
        color: var(--color-text-secondary);
        text-decoration: none;
        transition: color 150ms;
    }

    header .primary-nav a:hover {
        color: var(--color-text);
    }

    header .primary-nav a[aria-current="page"] {
        color: var(--color-text);
    }

    header .primary-nav a[aria-current="page"]::after {
        content: '';
        position: absolute;
        left: 0.875rem;
        right: 0.875rem;
        bottom: -1px;
        height: 2px;
        background-color: var(--color-accent);
    }

    .sidebar-eyebrow {
        margin: 0 0 1rem 0.5rem;
        font-family: var(--font-heading);
        font-size: 0.6875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--color-text-tertiary);
    }

    .sidebar-eyebrow-secondary {
        margin-top: 1.5rem;
    }

    aside [aria-current="page"] {
        color: var(--color-text);
        background-color: rgba(179, 83, 24, 0.08);
    }

    /* --- Sidebar --- */

    aside {
        background-color: var(--color-surface);
        border-right: 1px solid var(--color-border);
        font-size: 0.875rem;
        scrollbar-color: var(--color-border) transparent;

        > menu > li > a {
            display: block;
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            color: var(--color-text-secondary);
            font-weight: 450;
            transition: color 150ms, background-color 150ms;
        }

        > menu > li > a:hover {
            color: var(--color-text);
            background-color: rgba(0, 0, 0, 0.04);
        }

        menu > li > span {
            display: block;
            font-weight: 550;
            font-size: 0.8125rem;
            color: var(--color-text-secondary);
            padding: 0 0.5rem 0.125rem;
        }

        menu > li > span a {
            color: inherit;
        }

        menu > li > span a:hover {
            color: var(--color-text-secondary);
        }

        ul a {
            display: block;
            padding: 0.1875rem 0.5rem;
            border-radius: 0.25rem;
            color: var(--color-text-secondary);
            font-weight: 400;
            transition: color 150ms, background-color 150ms;
        }

        ul a:hover {
            color: var(--color-text);
            background-color: rgba(0, 0, 0, 0.04);
        }

        /* Group headers (summary). Only the section eyebrow is uppercase;
           every group header is title case, and nesting depth is conveyed by
           weight + indentation (see the `ul` tree guide in layout.css), never
           by casing. This keeps arbitrarily deep groups legible. */
        details > summary {
            display: block;
            font-weight: 600;
            font-size: 0.8125rem;
            color: var(--color-text-secondary);
            padding: 0.1875rem 0.5rem;
            cursor: pointer;
            list-style: none;
        }

        details > summary::-webkit-details-marker {
            display: none;
        }

        details > summary::marker {
            content: '';
        }

        details > summary a {
            display: block;
            color: inherit;
            text-decoration: none;
        }

        details > summary:hover,
        details > summary a:hover {
            color: var(--color-text);
        }

        /* Nested group headers (a group inside another group) step down a
           notch, so each level reads as subordinate to the one above it. */
        ul details > summary {
            font-weight: 550;
            font-size: 0.78125rem;
            color: var(--color-text-tertiary);
        }

        ul details > summary:hover,
        ul details > summary a:hover {
            color: var(--color-text-secondary);
        }

        /* Sessel section separator */
        ul li[aria-hidden] hr {
            border: none;
            border-top: 1px solid var(--color-border);
            margin: 0.5rem 0.5rem;
        }
    }

    /* --- Main content links --- */

    main a {
        font-weight: 500;
        text-decoration-line: underline;
        text-decoration-color: color-mix(in srgb, var(--color-link) 30%, transparent);
        text-underline-offset: 0.15em;
        text-decoration-thickness: 1px;
        transition: text-decoration-color 150ms, color 150ms;
    }

    main a:hover {
        text-decoration-color: currentColor;
    }

    /* --- Code --- */

    code {
        font-family: var(--font-mono);
        font-size: 0.875em;
    }

    :not(pre) > code {
        background-color: var(--color-inline-code-bg);
        padding: 0.1em 0.35em;
        border-radius: 0.25rem;
        font-weight: 450;
    }

    pre {
        border-radius: 0.5rem;
        overflow-x: auto;
    }

    pre code {
        font-size: 0.8125rem;
        line-height: 1.65;
    }

    code[class*="language-"],
    pre[class*="language-"] {
        font-family: var(--font-mono);
        font-size: 0.8125rem;
        line-height: 1.65;
    }

    pre[class*="language-"] {
        border-radius: 0.5rem;
        border: 1px solid var(--color-border);
        padding: 1.25rem;
    }

    /* --- Setup Block Disclosure --- */

    details.http-setup {
        margin-bottom: 1rem;
    }

    details.http-setup > summary {
        display: block;
        font-family: var(--font-body);
        font-size: 0.8125rem;
        font-weight: 450;
        color: var(--color-text-tertiary);
        cursor: pointer;
        padding: 0.375rem 0.625rem;
        border-radius: 0.375rem;
        border: 1px dashed var(--color-border);
        background: var(--color-surface);
        transition: color 150ms, border-color 150ms, background-color 150ms;
        list-style: none;
    }

    details.http-setup > summary::-webkit-details-marker {
        display: none;
    }

    details.http-setup > summary::marker {
        content: '';
    }


    details.http-setup > summary:hover {
        color: var(--color-text-secondary);
        border-color: var(--color-border-light);
        background: color-mix(in srgb, var(--color-surface) 80%, white);
    }

    details.http-setup > summary code {
        font-family: var(--font-mono);
        font-size: 0.875em;
        font-weight: 500;
        color: var(--color-text-secondary);
        background: none;
        padding: 0;
    }

    details.http-setup > pre[class*="language-"] {
        margin-top: 0.5rem;
        border-style: dashed;
        opacity: 0.85;
        padding-top: 0.375rem;
    }

    /* The transform wraps HTTP method/headers in a [hidden] span;
       no additional CSS needed to hide them. */

    /* --- HTTP Request/Response Grouping --- */

    /* First block in a consecutive group: flatten bottom edge */
    pre[class*="language-http"]:has(+ pre[class*="language-http"]) {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        margin-bottom: 0;
        border-bottom: none;
        padding-bottom: 1rem;
    }

    /* Any continuation block in a group: flatten top edge, add separator */
    pre[class*="language-http"] + pre[class*="language-http"] {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        margin-top: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        padding-top: 1rem;
    }

    /* Middle blocks in a chain of 3+: flatten both edges */
    pre[class*="language-http"] + pre[class*="language-http"]:has(+ pre[class*="language-http"]) {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom: none;
        padding-bottom: 1rem;
    }

    /* Response blocks — no request-line token means it starts with HTTP/n status */
    pre[class*="language-http"] + pre[class*="language-http"]:not(:has(.token.request-line)) {
        background: #1e1f1a;
        box-shadow: inset 3px 0 0 var(--color-accent);
        padding-top: 1.625rem;
        position: relative;
    }

    pre[class*="language-http"] + pre[class*="language-http"]:not(:has(.token.request-line))::before {
        content: "response";
        position: absolute;
        top: 0.4375rem;
        left: 1.25rem;
        font-family: var(--font-body);
        font-size: 0.5625rem;
        font-weight: 650;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-accent);
        line-height: 1;
    }

    /* --- Tables --- */

    main table {
        font-size: 0.875rem;
        line-height: 1.5;
    }

    main table th {
        background-color: var(--color-surface);
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--color-text-secondary);
    }

    main table :is(td, th) {
        border: 1px solid var(--color-border-light);
    }

    main table.schema [itemprop='cardinality'] {
        text-align: center;
    }

    /* --- Blockquotes --- */

    blockquote {
        border-left: 3px solid var(--color-accent);
        padding: 0.25rem 0 0.25rem 1rem;
        color: var(--color-text-secondary);
    }

    /* --- Footer --- */

    footer {
        font-size: 0.8125rem;
        color: var(--color-text-tertiary);
        border-top: 1px solid var(--color-border);
    }

    /* --- Lists in content --- */

    main li {
        line-height: 1.65;
    }

    /* --- Horizontal rules --- */

    hr {
        border: none;
        border-top: 1px solid var(--color-border);
        margin: 2rem 0;
    }

    /* --- Selection highlight --- */

    ::selection {
        background-color: color-mix(in srgb, var(--color-link) 15%, transparent);
    }

    /* --- Mobile sidebar adjustments --- */

    @media (max-width: 52rem) {
        aside {
            border-right: none;
            border-bottom: 1px solid var(--color-border);
        }
    }
}