/* ==========================================================================
   Reticle — documentation
   Three-column developer-docs shell: a persistent left sidebar (which doc and
   which section), a reading column, and a right-hand "on this page" rail.
   Built on the tokens in base.css; this file only adds the docs-specific
   layout, code blocks, and field tables.
   ========================================================================== */

/* Docs pages run a little wider than the marketing pages so code blocks and
   field tables have room. Scoped to the body so the header and footer wraps
   widen with the content and stay left-aligned to it. */
.docs-page {
    --maxw: 1240px;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.docs {
    padding-block: clamp(2rem, 4vw, 3rem) clamp(4rem, 8vw, 6rem);
}

.docs__layout {
    display: grid;
    gap: clamp(2rem, 4vw, 2.75rem);
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 900px) {
    .docs__layout {
        grid-template-columns: 13.5rem minmax(0, 1fr);
        column-gap: 3rem;
    }
}

@media (min-width: 1180px) {
    .docs__layout {
        grid-template-columns: 13.5rem minmax(0, 1fr) 12rem;
        column-gap: 3rem;
    }
}

/* --------------------------------------------------------------------------
   Left sidebar — which document, and its sections
   -------------------------------------------------------------------------- */
.docnav {
    position: sticky;
    top: calc(var(--header-h) + 1.25rem);
    align-self: start;
}

/* A long object list can outrun the viewport; let the sidebar scroll inside
   itself rather than stranding its lower half below the fold. */
@media (min-width: 900px) {
    .docnav {
        max-block-size: calc(100vh - var(--header-h) - 2.5rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        padding-inline-end: 0.25rem;
    }
}

/* On narrow screens the sidebar becomes a collapsible disclosure so it does
   not push the content down a full screen. */
@media (max-width: 899px) {
    .docnav {
        position: static;
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        background: var(--surface);
        padding: 0.5rem 1rem;
    }

    .docnav__body {
        display: none;
        padding-block: 0.5rem 0.75rem;
    }

    .docnav[open] .docnav__body {
        display: block;
    }

    .docnav__summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        list-style: none;
        padding-block: 0.75rem;
        font-family: var(--mono);
        font-size: var(--t-micro);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--dim);
    }

    .docnav__summary::-webkit-details-marker {
        display: none;
    }

    .docnav__summary::after {
        content: "+";
        font-size: 1rem;
    }

    .docnav[open] .docnav__summary::after {
        content: "\2212"; /* minus */
    }
}

/* On wide screens the disclosure is always open and chrome-free. */
@media (min-width: 900px) {
    .docnav__summary {
        display: none;
    }

    .docnav__body {
        display: block !important;
    }
}

.docnav__group + .docnav__group {
    margin-block-start: 1.5rem;
}

.docnav__title {
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dim-2);
    margin-block-end: 0.625rem;
}

.docnav__link {
    display: block;
    padding-block: 0.375rem;
    padding-inline-start: 0.75rem;
    border-inline-start: 2px solid var(--line);
    font-size: var(--t-small);
    color: var(--dim);
    text-decoration: none;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.docnav__link:hover {
    color: var(--text);
}

/* The document this page is (top-level entry). */
.docnav__link--doc {
    font-weight: 600;
    color: var(--text);
    border-inline-start-color: transparent;
    padding-inline-start: 0;
}

.docnav__link--doc[aria-current="page"] {
    color: transparent;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
}

/* A section anchor within the current document. */
.docnav__link[aria-current="true"] {
    color: var(--text);
    border-inline-start-color: var(--violet);
}

.docnav__link--soon {
    color: var(--dim-2);
    cursor: default;
    pointer-events: none;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.docnav__link--soon span {
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dim-2);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 0.05rem 0.4rem;
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */
.docs__head {
    padding-block-end: clamp(1.5rem, 3vw, 2rem);
    margin-block-end: clamp(1.5rem, 3vw, 2rem);
    border-block-end: 1px solid var(--line);
}

.docs__title {
    font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.035em;
    margin-block-start: 0.75rem;
    background: linear-gradient(180deg, #fff 40%, #a8adc4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.docs__lead {
    margin-block-start: 1rem;
    color: var(--dim);
    font-size: var(--t-lead);
    max-inline-size: 60ch;
}

.docs__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-block-start: 1.5rem;
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dim-2);
}

/* --------------------------------------------------------------------------
   "On this page" right rail
   -------------------------------------------------------------------------- */
.onpage {
    display: none;
}

@media (min-width: 1180px) {
    .onpage {
        display: block;
        position: sticky;
        top: calc(var(--header-h) + 1.25rem);
        align-self: start;
        font-size: var(--t-small);
    }
}

.onpage__title {
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dim-2);
    margin-block-end: 0.75rem;
}

.onpage__link {
    display: block;
    padding-block: 0.3125rem;
    color: var(--dim);
    text-decoration: none;
    border-inline-start: 2px solid var(--line);
    padding-inline-start: 0.75rem;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.onpage__link[aria-current="true"] {
    color: var(--text);
    border-inline-start-color: var(--violet);
}

.onpage__link:hover {
    color: var(--text);
}

/* --------------------------------------------------------------------------
   Content — reuses .doc typography from legal.css conceptually, redefined
   here so docs pages don't need to load legal.css.
   -------------------------------------------------------------------------- */
.docbody {
    max-inline-size: 74ch;
}

.docbody__section {
    scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.docbody__section + .docbody__section {
    margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
}

.docbody h2 {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    padding-block-end: 0.625rem;
    border-block-end: 1px solid var(--line);
    margin-block-end: 1.125rem;
}

.docbody h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-block: 1.75rem 0.75rem;
    scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.docbody p {
    color: var(--dim);
    line-height: 1.75;
}

.docbody p + p {
    margin-block-start: 0.875rem;
}

.docbody ul {
    margin-block-start: 0.875rem;
    display: grid;
    gap: 0.5rem;
}

/* Marker is absolutely positioned rather than a grid column, so list items
   can hold inline <b>/<code> without those fragmenting into extra grid
   items (which collapses the text into the marker column, one word per line). */
.docbody li {
    position: relative;
    padding-inline-start: 1.25rem;
    color: var(--dim);
    line-height: 1.7;
}

.docbody li::before {
    content: "\2014";
    position: absolute;
    inset-inline-start: 0;
    color: var(--violet);
}

.docbody a {
    color: #b49dff;
    text-underline-offset: 3px;
}

/* Inline code. */
.docbody code {
    font-family: var(--mono);
    font-size: 0.85em;
    background: var(--surface-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 0.1em 0.4em;
    color: #d6c9ff;
}

/* --------------------------------------------------------------------------
   Code block
   -------------------------------------------------------------------------- */
.code {
    position: relative;
    margin-block: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: #0c0c13;
    overflow: hidden;
}

.code__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.875rem;
    border-block-end: 1px solid var(--line);
    background: var(--surface);
}

.code__label {
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dim-2);
}

.code__copy {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--dim);
    font-family: var(--mono);
    font-size: var(--t-micro);
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.code__copy:hover {
    color: var(--text);
    border-color: var(--line-2);
}

.code__copy[data-copied="true"] {
    color: var(--ok);
    border-color: rgba(34, 197, 94, 0.4);
}

.code pre {
    margin: 0;
    padding: 1rem 1.125rem;
    overflow-x: auto;
    font-family: var(--mono);
    font-size: 0.8125rem;
    line-height: 1.7;
    color: #cdd2e4;
    tab-size: 2;
}

.code pre code {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* Minimal token tinting applied by a tiny highlighter in docs.js. No build
   step, so this is deliberately coarse — enough to read JSON, not a full
   grammar. */
.tok-key { color: #b49dff; }
.tok-str { color: #7fd4a8; }
.tok-num { color: #f0a868; }
.tok-bool { color: #6ea8ff; }
.tok-punc { color: #6f7490; }

/* --------------------------------------------------------------------------
   Field / spec table
   -------------------------------------------------------------------------- */
.spec {
    margin-block: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow-x: auto;
}

.spec table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-small);
    min-inline-size: 34rem;
}

.spec th,
.spec td {
    text-align: start;
    vertical-align: top;
    padding: 0.625rem 0.875rem;
    border-block-end: 1px solid var(--line);
}

.spec thead th {
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dim-2);
    background: var(--surface);
    font-weight: 500;
}

.spec tbody tr:last-child td {
    border-block-end: 0;
}

.spec td:first-child {
    font-family: var(--mono);
    font-size: 0.8125rem;
    color: #d6c9ff;
    white-space: nowrap;
}

.spec td:nth-child(2) {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--dim-2);
    white-space: nowrap;
}

.spec td:last-child {
    color: var(--dim);
    line-height: 1.6;
    min-inline-size: 16rem;
}

/* "required" tag inside a field row. */
.req {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--violet);
    margin-inline-start: 0.375rem;
    vertical-align: 1px;
}

/* --------------------------------------------------------------------------
   Landing cards (docs/index.html)
   -------------------------------------------------------------------------- */
.docgrid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    margin-block-start: clamp(1.5rem, 3vw, 2rem);
}

@media (min-width: 720px) {
    .docgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.doccard {
    display: grid;
    gap: 0.5rem;
    align-content: start;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    padding: 1.5rem;
    text-decoration: none;
    transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

a.doccard:hover {
    border-color: rgba(139, 92, 246, 0.4);
    transform: translateY(-2px);
}

.doccard__kicker {
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--violet);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.doccard__title {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.doccard__body {
    color: var(--dim);
    font-size: var(--t-small);
    line-height: 1.7;
}

.doccard--soon {
    opacity: 0.85;
}

.doccard--soon .doccard__kicker {
    color: var(--dim-2);
}

.badge-soon {
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dim-2);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 0.1rem 0.5rem;
}

/* --------------------------------------------------------------------------
   Draft chrome — mirrors the legal pages so unfinished docs read as unfinished.
   Same look as legal.css's .draft-banner / .todo, redefined here so docs pages
   do not need to load legal.css.
   -------------------------------------------------------------------------- */
.draft-banner {
    background: #fb923c;
    color: #1b1206;
}

.draft-banner .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem 1rem;
    padding-block: 0.75rem;
    font-family: var(--mono);
    font-size: var(--t-micro);
}

.draft-banner strong {
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.todo {
    border: 1px solid rgba(251, 146, 60, 0.45);
    border-radius: var(--r);
    background: rgba(251, 146, 60, 0.07);
    padding: 1.125rem;
    margin-block: 1.125rem;
}

.todo__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #1b1206;
    background: #fb923c;
    border-radius: var(--r-sm);
    padding: 0.1875rem 0.5rem;
    margin-block-end: 0.75rem;
    font-weight: 600;
}

.todo p {
    color: #f3c99a;
    font-size: var(--t-small);
    line-height: 1.7;
}

.todo p + p {
    margin-block-start: 0.5rem;
}

/* --------------------------------------------------------------------------
   Coming-soon empty state (report-api.html)
   -------------------------------------------------------------------------- */
.soon {
    border: 1px dashed var(--line-2);
    border-radius: var(--r-lg);
    background: var(--surface);
    padding: clamp(2rem, 5vw, 3.5rem);
    text-align: center;
    max-inline-size: 48rem;
}

.soon__glyph {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    margin-inline: auto;
    margin-block-end: 1rem;
    color: var(--violet);
}

.soon h2 {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-block-end: 0.75rem;
    border: 0;
    padding: 0;
}

.soon p {
    color: var(--dim);
    line-height: 1.75;
    max-inline-size: 42ch;
    margin-inline: auto;
}