/* The API docs page's own rules, on Slate's tokens. tokens.css and
   components.css are byte copies of Slate: a missing rule goes here, not
   there. One section per topic, one per endpoint, as wabbajackview's
   /docs/api. */

/* The header is kantine's, not Slate's navbar: base.css's values, restated
   because /docs loads Slate in its place. */
header {
    padding: 0.75rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid #e6e6e6;
    font-family:
        system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell,
        "Noto Sans", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.6;
}

header nav {
    display: flex;
    gap: 1rem;
}

/* Slate's reset sets its sans on every element; the links take the header's. */
header nav a {
    color: #111;
    font-family: inherit;
    font-weight: 600;
    text-decoration: none;
}

header nav a:last-of-type {
    margin-left: auto;
}

@media (width >= 768px) {
    header {
        font-size: 19px;
    }
}

.api-section {
    margin-top: 2rem;
    scroll-margin-top: 1rem;
}

.api-endpoint {
    padding-top: 1.5rem;
    border-top: var(--edge);
}

.api-endpoint h2 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.api-route {
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

.api-index td:first-child,
.api-fields td:nth-child(2) {
    white-space: nowrap;
}

.api-fields td:nth-child(2) {
    color: var(--muted);
    font-family: var(--mono);
}

.api-fields td:first-child {
    width: 14rem;
}

.api-example {
    margin-top: 1rem;
}

.api-example summary {
    margin-bottom: 0.5rem;
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}