/* ---------------------------------------------------------------------------
   API documentation (api.html). Same tokens as the showcase page; `ad-`
   prefixed because the page also carries Webflow, Tailwind and Geist classes.
   --------------------------------------------------------------------------- */
.ad {
    --ad-raised: hsla(0, 0%, 100%, 0.024);
    --ad-border: hsla(0, 0%, 100%, 0.12);
    --ad-fg: #ededed;
    --ad-muted: #a1a1a1;
    --ad-accent: #cf362d;
    --ad-accent-text: #f0786f;
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 48px;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 56px 16px 80px;
    box-sizing: border-box;
    color: var(--ad-fg);
    text-align: left;
}

.ad *,
.ad *::before,
.ad *::after {
    box-sizing: border-box;
}

.ad-side {
    position: sticky;
    top: 84px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.875rem;
}

.ad-side-title {
    margin: 0 0 8px 10px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ad-muted);
}

.ad-side a {
    padding: 6px 10px;
    border-radius: 6px;
    color: var(--ad-muted);
    text-decoration: none;
}

.ad-side a:hover {
    color: var(--ad-fg);
    background: hsla(0, 0%, 100%, 0.05);
}

.ad-side a[aria-current='true'] {
    color: var(--ad-fg);
    background: hsla(0, 0%, 100%, 0.07);
}

.ad-body section {
    padding-bottom: 36px;
    margin-bottom: 36px;
    border-bottom: 1px solid var(--ad-border);
    scroll-margin-top: 84px;
}

.ad-body section:last-child {
    border-bottom: 0;
}

.ad-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ad-accent-text);
}

.ad-body h1 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.ad-body h2 {
    margin: 0 0 14px;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.ad-body h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 600;
}

.ad-body .ad-sub {
    margin-top: 26px;
    scroll-margin-top: 84px;
}

.ad-body p,
.ad-body li {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--ad-muted);
}

.ad-body p {
    margin: 0 0 12px;
}

.ad-body ul {
    margin: 0 0 12px;
    padding-left: 20px;
}

.ad-body li + li {
    margin-top: 6px;
}

.ad-body b,
.ad-body em {
    color: var(--ad-fg);
}

.ad-body a {
    color: var(--ad-accent-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ad-body a:hover {
    color: var(--ad-fg);
}

.ad-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85em;
    color: var(--ad-fg);
}

.ad-lead {
    margin-top: 14px !important;
    font-size: 1.0625rem !important;
}

.ad-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 22px 0 0;
    border: 1px solid var(--ad-border);
    border-radius: 10px;
    background: var(--ad-raised);
}

.ad-facts div {
    padding: 14px 16px;
    border-right: 1px solid var(--ad-border);
    min-width: 0;
}

.ad-facts div:last-child {
    border-right: 0;
}

.ad-facts dt {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ad-muted);
}

.ad-facts dd {
    margin: 4px 0 0;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.ad-code {
    margin: 10px 0 14px;
    padding: 14px 16px;
    overflow-x: auto;
    border: 1px solid var(--ad-border);
    border-radius: 10px;
    background: #0d0d0d;
    color: var(--ad-fg);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.65;
    white-space: pre;
}

.ad-code[hidden] {
    display: none;
}

/* --- syntax highlighting (js/api-docs.js) ------------------------------- */
.ad-code .tk-c { color: #7d8590; font-style: italic; }
.ad-code .tk-s { color: #a5d6ff; }
.ad-code .tk-i { color: #ededed; }
.ad-code .tk-k { color: #ff7b72; }
.ad-code .tk-n { color: #79c0ff; }
.ad-code .tk-b { color: #79c0ff; }
.ad-code .tk-f { color: #d2a8ff; }
.ad-code .tk-p { color: #7ee787; }
.ad-code .tk-v { color: #ffa657; }

.ad-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 14px;
}

.ad-where {
    margin: 4px 0 12px;
    font-size: 13.5px;
    color: var(--ad-muted);
}

.ad-where b {
    color: var(--ad-fg);
    font-weight: 500;
}

.ad-tabs button {
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: none;
    color: var(--ad-muted);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.ad-tabs button[aria-selected='true'] {
    border-color: var(--ad-border);
    background: var(--ad-raised);
    color: var(--ad-fg);
}

.ad-endpoint {
    margin: 0 0 18px;
    padding: 16px 18px;
    border: 1px solid var(--ad-border);
    border-radius: 10px;
    background: var(--ad-raised);
}

.ad-endpoint p:last-child,
.ad-endpoint .ad-table:last-child {
    margin-bottom: 0;
}

.ad-method {
    padding: 2px 7px;
    border-radius: 5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.ad-method.get {
    background: rgba(63, 185, 80, 0.14);
    color: #6bd17c;
}

.ad-method.post {
    background: rgba(207, 54, 45, 0.16);
    color: var(--ad-accent-text);
}

.ad-table {
    width: 100%;
    margin: 10px 0 14px;
    border-collapse: collapse;
    font-size: 0.875rem;
}

/* Phones: a table that is wider than the column scrolls inside itself
   instead of pushing the page sideways. */
@media (max-width: 600px) {
    .ad-table {
        display: block;
        overflow-x: auto;
    }

    .ad-table td,
    .ad-table th {
        min-width: 90px;
    }
}

.ad-table th {
    padding: 8px 10px;
    border-bottom: 1px solid var(--ad-border);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    color: var(--ad-muted);
}

.ad-table td {
    padding: 9px 10px;
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.06);
    vertical-align: top;
    line-height: 1.55;
    color: var(--ad-muted);
}

.ad-table tr:last-child td {
    border-bottom: 0;
}

.ad-table td:first-child {
    white-space: nowrap;
}

.ad-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px !important;
}

.ad-body a.ad-btn {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border: 1px solid #ededed;
    border-radius: 8px;
    background: #ededed;
    color: #0a0a0a;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.ad-body a.ad-btn:hover {
    background: #cfcfcf;
    border-color: #cfcfcf;
}

.ad-body a.ad-btn.ghost {
    background: transparent;
    border-color: var(--ad-border);
    color: var(--ad-fg);
}

.ad-body a.ad-btn.ghost:hover {
    background: hsla(0, 0%, 100%, 0.06);
}


/* --- code blocks with a copy button ------------------------------------- */
.ad-codegroup {
    margin: 12px 0 4px;
}

.ad-codegroup .ad-tabs {
    margin-top: 0;
}

.ad-codewrap {
    position: relative;
}

.ad-codewrap[hidden] {
    display: none;
}

.ad-codewrap .ad-code {
    padding-right: 72px;
}

/* Phones: code lines scroll sideways under the button, so it gets its own
   strip above the first line instead of sitting on the text. */
@media (max-width: 640px) {
    .ad-codewrap .ad-code {
        padding-top: 52px;
        padding-right: 16px;
    }
    .ad-codewrap .ad-copy {
        top: 18px;
        right: 10px;
        box-shadow: none;
    }
}

.ad-copy {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 9px;
    border: 1px solid var(--ad-border);
    border-radius: 6px;
    background: #161616;
    color: var(--ad-muted);
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
    box-shadow: -10px 0 10px -2px #0d0d0d;
    transition: color 0.15s ease;
    z-index: 1;
}

.ad-copy:hover,
.ad-copy:focus-visible {
    color: var(--ad-fg);
}

.ad-copy[data-done='true'] {
    color: #6bd17c;
}

.ad-tabs button:focus-visible,
.ad-copy:focus-visible {
    outline: 2px solid var(--ad-accent-text);
    outline-offset: 1px;
}

.ad-label {
    margin: 14px 0 -4px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ad-muted);
}

.ad-label code {
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
}

.ad-body h4 {
    margin: 16px 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ad-fg);
}

.ad-req {
    display: inline-block;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 4px;
    background: rgba(207, 54, 45, 0.14);
    color: var(--ad-accent-text);
    font-size: 10px;
    font-weight: 500;
    vertical-align: 1px;
}

.ad-steps {
    margin: 0 0 14px;
    padding-left: 22px;
}

.ad-steps li {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--ad-muted);
}

.ad-steps li + li {
    margin-top: 8px;
}

.ad-steps .ad-code {
    margin: 8px 0 0;
}

.ad-glance td:first-child {
    white-space: nowrap;
}

.ad-glance td a {
    text-decoration: none;
}

.ad-glance .ad-method {
    display: inline-block;
    min-width: 42px;
    text-align: center;
}

@media (max-width: 820px) {
    .ad {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding-top: 32px;
    }

    .ad-side {
        position: static;
        flex-direction: row;
        gap: 4px;
        margin: 0 -16px 24px;
        padding: 0 16px 6px;
        overflow-x: auto;
        scrollbar-width: none;
        white-space: nowrap;
    }

    .ad-side::-webkit-scrollbar {
        display: none;
    }

    .ad-side-title {
        display: none;
    }

    .ad-side a {
        flex: 0 0 auto;
        border: 1px solid var(--ad-border);
    }

    .ad-glance thead,
    .ad-glance td:nth-child(2) {
        display: none;
    }

    .ad-glance tr {
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid hsla(0, 0%, 100%, 0.06);
    }

    .ad-glance tr:last-child {
        border-bottom: 0;
    }

    .ad-glance td {
        display: block;
        padding: 2px 0;
        border: 0;
    }

    .ad-glance td:first-child {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .ad-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .ad-facts div {
        border-right: 0;
        border-bottom: 1px solid var(--ad-border);
    }

    .ad-facts div:last-child {
        border-bottom: 0;
    }

    .ad-table td:first-child {
        white-space: normal;
    }
}