/*
    Documentation-only styling, on top of instarc.css rather than forked from it.

    The console stylesheet is built for dense tables of records. A reference page is prose with
    code in it, which wants a measure, a readable monospace and headings that break a long
    document up — none of which the console needs and none of which belongs in a file three
    other applications share.
*/

/* ------------------------------------------------------------------ prose */

.ia-prose {
    max-width: 62rem;
}

.ia-prose h2 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ia-dark);
    margin-top: 1.75rem;
    margin-bottom: .5rem;
}

.ia-prose h2:first-child {
    margin-top: 0;
}

.ia-prose h3 {
    font-size: .95rem;
    font-weight: 600;
    color: var(--ia-dark);
    margin-top: 1.25rem;
    margin-bottom: .4rem;
}

.ia-prose p,
.ia-prose li {
    font-size: .875rem;
    line-height: 1.6;
}

.ia-prose table {
    width: 100%;
    font-size: .8125rem;
    margin: .75rem 0 1.25rem;
    border-collapse: collapse;
}

.ia-prose th,
.ia-prose td {
    border-bottom: 1px solid var(--ia-border);
    padding: .4rem .6rem;
    text-align: left;
    vertical-align: top;
}

.ia-prose th {
    color: var(--ia-muted);
    font-weight: 600;
}

/* A table with an empty header row is how a three-column layout with no headings is written in
   Markdown, and the empty band it leaves looks like a rendering fault. */
.ia-prose thead:has(th:empty:only-child),
.ia-prose thead:has(th:empty + th:empty) {
    display: none;
}

.ia-prose code,
.ia-field-name,
.ia-endpoint code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .8125em;
}

.ia-prose :not(pre) > code {
    background: var(--ia-bg);
    border: 1px solid var(--ia-border);
    border-radius: 4px;
    padding: .05rem .3rem;
    color: var(--ia-dark);
}

.ia-prose blockquote {
    border-left: 3px solid var(--ia-gold);
    margin: 1rem 0;
    padding: .25rem 0 .25rem 1rem;
    color: var(--ia-muted);
}

/* ------------------------------------------------------------------ code */

.ia-code {
    background: var(--ia-navy);
    color: #e8eef5;
    padding: 1rem 1.15rem;
    font-size: .8125rem;
    line-height: 1.55;
    overflow-x: auto;
    border-radius: 0 0 var(--ia-radius) var(--ia-radius);
}

.ia-code code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    color: inherit;
    background: none;
    padding: 0;
    border: 0;
    white-space: pre;
}

.ia-prose pre {
    background: var(--ia-navy);
    color: #e8eef5;
    padding: .9rem 1.1rem;
    border-radius: var(--ia-radius);
    overflow-x: auto;
    font-size: .8125rem;
}

.ia-prose pre code {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
}

/* ------------------------------------------------------------------ endpoint */

.ia-endpoint {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--ia-bg);
    border: 1px solid var(--ia-border);
    border-radius: var(--ia-radius);
    padding: .6rem .9rem;
}

.ia-endpoint code {
    font-size: .9rem;
    color: var(--ia-dark);
    font-weight: 600;
}

/* ------------------------------------------------------------------ fields */

.ia-fields th {
    color: var(--ia-muted);
    font-weight: 600;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.ia-fields td {
    vertical-align: top;
}

.ia-fields .ia-field-name {
    color: var(--ia-dark);
    font-weight: 600;
}

/* A nested field is a detail of the row above it, and reads as one rather than as a peer. */
.ia-field-nested .ia-field-name {
    font-weight: 400;
    color: var(--ia-muted);
}

.ia-fields p {
    margin-bottom: .25rem;
}

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

/* ------------------------------------------------------------------ navigation */

.ia-nav-subheader {
    font-size: .68rem;
    opacity: .75;
    padding-top: .5rem;
}

/* The mark against a method that cannot be called. Muted on purpose: it is information, not a
   warning, and a sidebar of red icons would read as something being broken. */
.ia-nav-flag {
    opacity: .55;
    font-size: .8rem;
}

.ia-copy {
    text-decoration: none;
    font-size: .8125rem;
}