@charset "UTF-8";
/*
    Fonts: IBM Plex Sans for prose (P) and IBM Plex Mono (M) for the chrome,
    the headings and code, as gjold.com sets them
*/

@font-face {
    font-family: 'P';
    font-weight: 400;
    font-display: swap;
    src: url('/a/font/P400.dfaa21af.woff2') format('woff2');
}

@font-face {
    font-family: 'P';
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    src: url('/a/font/P400i.75580665.woff2') format('woff2');
}

@font-face {
    font-family: 'P';
    font-weight: 600;
    font-display: swap;
    src: url('/a/font/P600.216bcc5e.woff2') format('woff2');
}

@font-face {
    font-family: 'M';
    font-weight: 400;
    font-display: swap;
    src: url('/a/font/M400.24fae366.woff2') format('woff2');
}

@font-face {
    font-family: 'M';
    font-weight: 600;
    font-display: swap;
    src: url('/a/font/M600.9d9afade.woff2') format('woff2');
}

/*
    Dark only, in greys, with gjold's brass for links and focus and nothing
    else; and the text: headings, lists, tables and figures
*/

:root {
    color-scheme: dark;
    --bg: #0c0c0c;
    /* Code, the header and anything set apart from the text */
    --raised: #141414;
    --hover: #1c1c1c;
    --line: #262626;
    --line-hard: #383838;
    --hi: #f2f2f2;
    --text: #d4d4d4;
    --muted: #a8a8a8;
    /* The quietest text, still 5.6:1 on the background */
    --dim: #8c8c8c;
    --accent: #c9ad3c;
    --accent-hi: #dcc25a;
    --accent-line: rgb(201 173 60 / 45%);
    --select: rgb(201 173 60 / 25%);
    /* A request's method, in the menu and on its request line */
    --post: #8cbfa8;
    --get: #93aacd;
    --delete: #d09a9a;
    /* An external link's arrow, and the chevron of a menu */
    --out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
    /* A request's method in the menu: the arrow of a POST, which CSS turns
       round for a GET or a request we send you, and the cross of a DELETE */
    --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
    --cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
    --shadow: rgb(0 0 0 / 60%);
    --sans: 'P', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mono: 'M', ui-monospace, monospace;
    /* The header's height, which the sticky columns sit under */
    --top: 3.5rem;
    /* The width of the page's text, its head and its footer, at most */
    --width: 52rem;
    /* and of its paragraphs and lists, about 88 characters, as tables and code keep the whole width */
    --measure: 44rem;
    /* The menu's width, and the frame's, which holds the menu and the page:
       its text, 3.5rem in, and ending under the end of the search */
    --menu: 16rem;
    --frame: calc(var(--menu) + 3.5rem + var(--width) + 1.5rem);
    /* Where the mark starts in the column over the menu, which the menu's
       and the switch's text line up with */
    --edge: 1.5rem;
    background: var(--bg);
}

* {
    box-sizing: border-box;
}

body {
    min-width: 16rem;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 1rem/1.65 var(--sans);
    tab-size: 4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

::selection {
    background: var(--select);
}

:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 2px;
}

a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: var(--accent-line);
    text-underline-offset: 0.2em;
}

a:hover {
    color: var(--accent-hi);
    text-decoration-color: currentColor;
}

p {
    margin: 0 0 1.125rem;
}

strong, b {
    color: var(--hi);
    font-weight: 600;
}

ul, ol {
    margin: 0 0 1.125rem;
    padding-left: 1.4rem;
}

li + li {
    margin-top: 0.25rem;
}

li::marker {
    color: var(--dim);
}

ol > li::marker {
    font: 400 0.875em var(--mono);
}

dd + dt {
    margin-top: 0.75rem;
}

blockquote {
    margin: 0 0 1.125rem;
    padding-left: 1rem;
    border-left: 1px solid var(--line-hard);
    color: var(--muted);
}

hr {
    margin: 2.5rem 0;
    border: 0;
    border-top: 1px solid var(--line);
}

img, svg {
    max-width: 100%;
}

h1, h2, h3, h4 {
    color: var(--hi);
    font-family: var(--mono);
    font-weight: 600;
}

h1 {
    margin: 0 0 1rem;
    font-size: clamp(1.5rem, 4vw, 1.75rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

h2 {
    margin: 2.75rem 0 0.875rem;
    font-size: 1.25rem;
    line-height: 1.4;
}

h3 {
    margin: 2rem 0 0.625rem;
    font-size: 1rem;
    line-height: 1.5;
}

h4 {
    margin: 1.5rem 0 0.5rem;
    font-size: 0.9375rem;
}

h2[id], h3[id], h4[id] {
    scroll-margin-top: calc(var(--top) + 1rem);
}

/* A rule above each of a page's sections, so a long page falls into parts */
main h2 {
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}

/* Paragraphs and lists at a length of line that reads well */
.page > main > p, .page > main > ul, .page > main > ol, .page > main > blockquote, .page > main > dl {
    max-width: var(--measure);
}

/* The # that docs.js adds to headings, shown on hover */
.anchor {
    margin-left: 0.6ch;
    color: var(--dim);
    font-weight: 400;
    text-decoration: none;
    opacity: 0;
}

:hover > .anchor, .anchor:focus-visible {
    opacity: 1;
}

.anchor:hover {
    color: var(--accent);
}

/* What the page is, under its title: one paragraph, a little larger */
.lead {
    color: var(--hi);
    font-size: 1.0625rem;
}

/* A sentence set apart from the text around it, such as a rule to follow */
.callout {
    padding: 0.125rem 0 0.125rem 1rem;
    border-left: 2px solid var(--accent);
    color: var(--hi);
}

/* Text for screen readers only, such as what a button just did */
.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The changelog: each date beside what changed on it */
.changelog {
    margin: 1.5rem 0;
    border-top: 1px solid var(--line-hard);
}

.changelog > div {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--line);
}

/* On the first line of the text beside it */
.changelog dt {
    color: var(--muted);
    font: 400 0.8125rem/1.65rem var(--mono);
}

.changelog dd {
    grid-column: 2;
    margin: 0;
}

.changelog dd + dd {
    margin-top: 0.75rem;
}

/* markdown2's tables, each in a box that scrolls sideways on a narrow screen */
.table {
    overflow-x: auto;
    margin: 1.25rem 0 1.5rem;
}

table {
    width: 100%;
    min-width: 36rem;
    border-collapse: collapse;
    font-size: 0.875rem;
    line-height: 1.55;
}

th {
    padding: 0 1rem 0.5rem 0;
    border-bottom: 1px solid var(--line-hard);
    color: var(--hi);
    font: 600 0.8125rem/1.5 var(--mono);
    text-align: left;
    white-space: nowrap;
}

td {
    padding: 0.625rem 1rem 0.625rem 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

th:last-child, td:last-child {
    padding-right: 0;
}

td > :last-child {
    margin-bottom: 0;
}

/*
    The first column of every table names what its row is about: a field, a
    header, a status and message, or a parameter. It is as wide as its
    longest name, which stays on one line, and the last column has the rest.
*/
td:first-child {
    width: 1%;
    white-space: nowrap;
}

td:first-child > code {
    color: var(--hi);
}

table ul, table ol {
    margin: 0.375rem 0 0.75rem;
    padding-left: 1.1rem;
}

table p {
    margin: 0 0 0.5rem;
}

/*
    The diagrams in src/include/diagrams, centred, each at its width.
    TikZ draws them black on white, so their black and darkest grey are
    turned into the text's colours; text has no fill of its own and takes the
    figure's.
*/
.diagram {
    margin: 1.75rem auto;
    fill: var(--text);
}

.diagram svg {
    display: block;
    width: 100%;
    height: auto;
}

.diagram [stroke="#000"] {
    stroke: var(--text);
}

.diagram [fill="#404040"] {
    fill: var(--muted);
}

.diagram.seq {
    max-width: 470px;
}

.diagram.seq-requests {
    max-width: 700px;
}

.diagram.ping {
    max-width: 480px;
}

/*
    The header, then two columns: the menu and the page
*/

.skip {
    position: fixed;
    top: -4rem;
    left: 1rem;
    z-index: 100;
    padding: 0.5rem 0.75rem;
    background: var(--accent);
    color: var(--bg);
}

.skip:focus {
    top: 0.75rem;
}

/*
    Lined up with the frame below it, however wide the window: the site's
    column over the menu, and the links from where the page's text starts
*/
.top {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    height: var(--top);
    padding: 0 max(1.5rem, calc((100% - var(--frame)) / 2 + 1.5rem)) 0 max(0px, calc((100% - var(--frame)) / 2));
    border-bottom: 1px solid var(--line-hard);
    background: var(--bg);
    font: 400 0.8125rem/1 var(--mono);
}

.top a {
    text-decoration: none;
}

/*
    Over the menu, as wide as it and ending in the line it ends in: the mark,
    and beside it which site this is, or on a site with versions the switch
    between them, which the mark is part of
*/
.site {
    position: relative;
    display: flex;
    flex: none;
    align-self: stretch;
    align-items: center;
    width: var(--menu);
    padding: 0 1rem 0 var(--edge);
    border-right: 1px solid var(--line-hard);
}

.brand {
    display: flex;
    align-items: center;
    color: var(--hi);
}

.brand svg {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
}

.brand span {
    margin-left: 0.75rem;
    white-space: nowrap;
}

/* The pages of the section at /, and the other sites, from where the page's text starts */
.topnav ul {
    display: flex;
    margin: 0 0 0 clamp(1.5rem, 4vw, 3.5rem);
    padding: 0;
    list-style: none;
}

.topnav li + li {
    margin: 0 0 0 1.5rem;
}

.topnav a {
    display: block;
    padding: 0.5rem 0;
    color: var(--muted);
}

.topnav a:hover, .topnav [aria-current] {
    color: var(--hi);
}

/* An arrow after a link that leaves for another site */
.out::after, .ext {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    margin-left: 0.3em;
    background: currentColor;
    content: '';
    -webkit-mask: var(--out) center / contain no-repeat;
    mask: var(--out) center / contain no-repeat;
}

#search {
    display: flex;
    align-items: center;
    min-width: 12rem;
    height: 2rem;
    margin-left: auto;
    padding: 0 0.375rem 0 0.625rem;
    border: 1px solid var(--line-hard);
    background: none;
    color: var(--muted);
    font: 400 0.8125rem/1 var(--mono);
    cursor: pointer;
}

#search:hover {
    border-color: var(--muted);
    color: var(--hi);
}

#search svg {
    width: 0.875rem;
    height: 0.875rem;
    margin-right: 0.625rem;
    fill: currentColor;
}

#search kbd {
    margin-left: auto;
}

kbd {
    min-width: 1.375rem;
    padding: 0.1875rem 0.3125rem;
    border: 1px solid var(--line-hard);
    color: var(--muted);
    font: 400 0.75rem/1 var(--mono);
    text-align: center;
}

#burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-left: 0.5rem;
    padding: 0.4375rem;
    border: 1px solid var(--line-hard);
    background: none;
    fill: var(--muted);
    cursor: pointer;
}

#burger:hover, #burger[aria-expanded="true"] {
    border-color: var(--muted);
    fill: var(--hi);
}

/*
    On a site with versions, the mark is the switch between them, and the
    switch is the whole cell over the menu: the mark, the version in view,
    or the one that a page both versions share is read as, its state, and a
    chevron at the cell's end. Open, the cell and its dropdown are one
    surface, over the header's line, as wide as the menu it covers.
*/
.top .versions {
    flex: 1;
    align-self: stretch;
    min-width: 0;
    margin: 0 -1rem 0 calc(-1 * var(--edge));
}

/* As tall as the header, inside its line */
.top .versions summary {
    display: flex;
    align-items: center;
    height: calc(var(--top) - 1px);
    padding: 0 1rem 0 var(--edge);
    color: var(--hi);
    list-style: none;
    cursor: pointer;
}

.top .versions summary::-webkit-details-marker {
    display: none;
}

.top .versions summary:hover, .top .versions[open] summary {
    background: var(--raised);
}

/* The dropdown's left edge, up to the top */
.top .versions[open] summary {
    box-shadow: inset 1px 0 var(--line-hard);
}

/* Inside the cell, which the header's edges would cut off */
.top .versions summary:focus-visible {
    outline-offset: -3px;
}

.top .versions summary > svg {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
}

/* Read out, not shown: beside the mark, the version needs no label */
.top .vlabel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The version and its state, or the space apart, beside the mark */
.top .vcur {
    display: flex;
    align-items: baseline;
    min-width: 0;
    margin-left: 0.75rem;
    white-space: nowrap;
}

.top .vcur .vname {
    font: 600 0.875rem/1 var(--mono);
}

.top .vstate {
    color: var(--muted);
}

.top .vcur .vstate {
    margin-left: 0.625rem;
    font: 400 0.75rem/1 var(--mono);
}

.top .versions .chev {
    width: 0.875rem;
    height: 0.875rem;
    margin-left: auto;
    color: var(--muted);
}

.top .versions summary:hover .chev, .top .versions[open] .chev {
    color: var(--hi);
}

.top .versions[open] .chev {
    transform: rotate(180deg);
}

/*
    The dropdown, from the cell's foot, over the header's line, to the line
    the menu ends in: the versions under a label, as the menu's sections are,
    and the spaces apart and the other sites under a rule. Each line has its
    name, its state at the end, and what it is under them, from where the
    switch's text starts, beside the mark; the line in view has a square of
    brass, as the menu's page in view has, under the mark's edge.
*/
.top .vmenu {
    /* Where the switch's text starts, 2.5rem from the mark's edge, less
       the dropdown's border */
    --indent: calc(var(--edge) + 2.5rem - 1px);
    position: absolute;
    top: 100%;
    right: -1px;
    left: 0;
    z-index: 10;
    padding: 0.5rem 0 0.625rem;
    border: 1px solid var(--line-hard);
    border-top: 0;
    background: var(--raised);
    box-shadow: 0 16px 32px var(--shadow);
}

.top .vhead {
    margin: 0;
    padding: 0.5rem 1rem 0.375rem var(--indent);
    color: var(--dim);
    font: 600 0.6875rem/1.5 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.top .vmenu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.top .vmenu ul + ul::before {
    display: block;
    height: 1px;
    margin: 0.5rem 1rem 0.5rem var(--indent);
    background: var(--line);
    content: '';
}

.top .vmenu li + li {
    margin-top: 0;
}

.top .vmenu a {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 0.75rem;
    padding: 0.5rem 1rem 0.5625rem var(--indent);
    color: var(--text);
}

.top .vmenu a:hover {
    background: var(--hover);
    color: var(--hi);
}

/* Inside the line, which runs from edge to edge */
.top .vmenu a:focus-visible {
    outline-offset: -3px;
}

.top .vmenu .vname {
    font: 600 0.8125rem/1.4 var(--mono);
}

.top .vmenu .vstate {
    grid-area: 1 / 2;
    font: 400 0.75rem/1.4 var(--mono);
}

.top .vmenu small {
    grid-column: 1 / -1;
    margin-top: 0.125rem;
    color: var(--muted);
    font: 400 0.8125rem/1.4 var(--sans);
}

.top .vmenu .ext {
    margin-left: 0.375rem;
    vertical-align: 0;
}

/*
    The line in view, marked as the page in view is in the menu: on its
    name's line, and ending under the mark's end, as far from the text as
    the mark is
*/
.top .vmenu [aria-current] {
    color: var(--hi);
}

.top .vmenu [aria-current]::before {
    position: absolute;
    top: calc(0.5rem + 0.8125rem * 0.7 - 0.1875rem);
    left: calc(var(--indent) - 1.125rem);
    width: 0.375rem;
    height: 0.375rem;
    background: var(--accent);
    content: '';
}

.frame {
    display: grid;
    grid-template-columns: var(--menu) minmax(0, 1fr);
    max-width: var(--frame);
    margin: 0 auto;
}

/*
    The menu, as a map of the API: each section under a small label, from
    the mark's edge, a quarter rem inside it, where it looks lined up with
    it, and the page in view marked by a square of brass before its name.
    A menu with requests in it, the reference's, has every request in view
    under its object, with a column for their icons before the names, which
    then start where the switch's text does, beside the mark.
*/
.menu {
    position: sticky;
    top: var(--top);
    height: calc(100vh - var(--top));
    overflow-y: auto;
    padding: 1.75rem 1rem 3rem calc(var(--edge) + 0.25rem);
    border-right: 1px solid var(--line-hard);
    font: 400 0.875rem/1.45 var(--sans);
}

.menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu li + li {
    margin-top: 0;
}

.menu .sections > li + li {
    margin-top: 1.25rem;
}

/* A section's name: a label, and no link */
.menu .sections > li > span {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--dim);
    font: 600 0.6875rem/1.5 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.menu a {
    position: relative;
    display: block;
    padding: 0.1875rem 0;
    color: var(--muted);
    text-decoration: none;
}

.menu .api a {
    padding-left: 2.25rem;
}

.menu a:hover, .menu .open > a {
    color: var(--hi);
}

/*
    A request's method, as an icon in the column before its name, in the
    method's colour: an arrow out for a POST, the arrow turned in for a GET
    and for a request we send you, as the ping is, and a cross for a DELETE.
    The method's name stays in the text, for screen readers, out of sight.
*/
.menu .method {
    position: absolute;
    top: calc(50% - 0.5rem);
    left: 0.625rem;
    width: 1rem;
    height: 1rem;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

.menu .method::before {
    position: absolute;
    top: 0.125rem;
    right: 0.125rem;
    bottom: 0.125rem;
    left: 0.125rem;
    background: currentColor;
    content: '';
    -webkit-mask: var(--arrow) center / contain no-repeat;
    mask: var(--arrow) center / contain no-repeat;
}

.menu .get::before, .menu .in::before {
    transform: rotate(180deg);
}

.menu .delete::before {
    -webkit-mask-image: var(--cross);
    mask-image: var(--cross);
}

/* A group's sections, each as one link, with its pages under it on its own pages alone */
.menu .open > ul {
    margin: 0.125rem 0 0.375rem;
    padding-left: 0.875rem;
    border-left: 1px solid var(--line-hard);
}

/* The page in view: its name, and a square of brass before it */
.menu [aria-current] {
    color: var(--hi);
}

.menu [aria-current]::before {
    content: "";
    position: absolute;
    top: calc(50% - 0.1875rem);
    left: -0.875rem;
    width: 0.375rem;
    height: 0.375rem;
    background: var(--accent);
}

.menu .open > ul [aria-current]::before {
    left: calc(-1.75rem - 1px);
}

/* The links the header has no room for on a narrow screen */
.menu .elsewhere {
    display: none;
}

/* The page: what section it is in, its text and the footer, which end where the search does */
.page {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: calc(100vh - var(--top));
    padding: 2.25rem 1.5rem 0 clamp(1.5rem, 4vw, 3.5rem);
}

.pagehead, .page > main, .vnotice {
    width: 100%;
    max-width: var(--width);
}

/* Above a version's pages, while it is not the one in use, and a link to the one that is */
.vnotice {
    margin: 0 0 1.5rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--line-hard);
    background: var(--raised);
    color: var(--text);
    font-size: 0.875rem;
    line-height: 1.5;
}

.pagehead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 1.75rem;
    margin-bottom: 0.5rem;
}

.crumb {
    margin: 0 1rem 0 0;
    color: var(--muted);
    font: 400 0.8125rem/1.5 var(--mono);
}

.crumb a {
    color: var(--muted);
    text-decoration: none;
}

.crumb a:hover {
    color: var(--hi);
}

/*
    What a reader can do with the page: copy its Markdown, for an editor or a
    model, or from the menu beside it view it or open it in a chat
*/
.pageuse {
    position: relative;
    display: flex;
    flex: none;
}

#copypage, .pageuse summary {
    display: flex;
    align-items: center;
    height: 1.75rem;
    border: 1px solid var(--line-hard);
    background: none;
    color: var(--muted);
    font: 400 0.75rem/1 var(--mono);
    cursor: pointer;
}

#copypage {
    padding: 0 0.625rem 0 0.5rem;
}

.pageuse summary {
    padding: 0 0.375rem;
    border-left: 0;
    list-style: none;
}

.pageuse summary::-webkit-details-marker {
    display: none;
}

#copypage:hover, .pageuse summary:hover, .pageuse [open] > summary {
    border-color: var(--muted);
    color: var(--hi);
}

.pageuse summary:hover, .pageuse [open] > summary {
    box-shadow: -1px 0 var(--muted);
}

#copypage svg, .pageuse summary svg {
    width: 0.875rem;
    height: 0.875rem;
}

#copypage svg {
    margin-right: 0.4375rem;
}

/* As wide as Copy page, so that Copied does not move the button */
#copypage span {
    min-width: 9ch;
}

/* After a copy, a tick for the copy icon until the label comes back */
#copypage .check, #copypage.done .copy {
    display: none;
}

#copypage.done .check {
    display: block;
}

.pageuse ul {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 10;
    width: 17rem;
    margin: 0;
    padding: 0.25rem;
    border: 1px solid var(--line-hard);
    background: var(--raised);
    box-shadow: 0 12px 32px var(--shadow);
    list-style: none;
}

.pageuse li + li {
    margin-top: 0;
}

.pageuse li > * {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 0;
    background: none;
    color: var(--text);
    font: 400 0.8125rem/1.35 var(--mono);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.pageuse li > :hover {
    background: var(--hover);
    color: var(--hi);
}

.pageuse li svg {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin: 0.0625rem 0.625rem 0 0;
    color: var(--muted);
}

.pageuse li .ext {
    width: 0.625rem;
    height: 0.625rem;
    margin: 0 0 0 0.3em;
    vertical-align: 0;
}

.pageuse small {
    display: block;
    margin-top: 0.125rem;
    color: var(--muted);
    font: 400 0.75rem/1.4 var(--sans);
}

.page > main {
    flex: 1;
    padding-bottom: 3rem;
}

/* The footer, with the day the page last changed at its right */
.page > footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
    max-width: var(--width);
    padding: 1.25rem 0 2rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font: 400 0.75rem/1.6 var(--mono);
}

.page > footer .updated {
    margin-left: auto;
}

.page > footer .updated:empty {
    display: none;
}

.page > footer a {
    color: var(--muted);
    text-decoration: none;
}

.page > footer a:hover {
    color: var(--hi);
}

/*
    Code, highlighting and endpoints
*/

code, kbd, pre {
    font-family: var(--mono);
}

/* Inline code: the text's monospace twin, a shade brighter, on no chip */
code {
    color: var(--hi);
    font-size: 0.875em;
}

/* 1.6 rather than the text's 1.65: code is read in columns, not lines */
pre, .fold {
    margin: 1rem 0 1.25rem;
    padding: 0.875rem 1rem;
    overflow-x: auto;
    border: 1px solid var(--line);
    background: var(--raised);
    color: var(--muted);
    font-size: 0.8125rem;
    line-height: 1.6;
}

pre code {
    color: inherit;
    font-size: 1em;
}

/* A code block whose long lines are cut off with an ellipsis */
pre > .clip {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
    A shell command after a $ prompt, an argument on each line after the
    first, as a shell takes it pasted
*/
.cmd::before {
    color: var(--dim);
    content: '$ ';
}

/*
    Highlighting, from tools/highlight-json.awk and by hand: names bright,
    values in the text's colour, and the punctuation between them, which is
    the block's own colour, quieter. No colours: the shape of JSON is plain
    enough.
*/
pre {
    color: var(--muted);
}

.key, .hdr, .fn {
    color: var(--hi);
}

.str, .num, .kw, pre i {
    color: var(--text);
}

/*
    Lines of an example that the text points to, across the whole block, on
    a lighter ground with an edge
*/
.hl {
    display: block;
    margin: 0 -1rem;
    padding: 0 1rem 0 calc(1rem - 2px);
    border-left: 2px solid var(--muted);
    background: var(--hover);
}

pre b {
    color: var(--hi);
}

pre a, .endpoint a {
    color: inherit;
    text-decoration: underline dotted var(--dim);
}

pre a:hover, .endpoint a:hover {
    color: var(--accent-hi);
    text-decoration-color: currentColor;
}

code abbr {
    cursor: help;
}

/* A comment in pseudo-code */
pre .c {
    color: var(--dim);
}

/*
    A JSON example with lines that can be folded away. A details can't go in
    a pre, so the box holds a pre, a details with a pre, and a pre, which look
    like one pre
*/
.fold {
    font-family: var(--mono);
}

.fold pre {
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: none;
    font-size: 1em;
}

.fold > details > summary {
    margin: 0.5em 0;
    padding: 0.125rem 0;
    border: 1px dashed var(--line-hard);
    color: var(--dim);
    font-size: 0.75rem;
    line-height: 1.4;
    text-align: center;
    list-style: none;
    cursor: pointer;
}

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

.fold > details > summary::before {
    content: 'More fields';
}

.fold > details > summary:hover {
    border-color: var(--muted);
    color: var(--hi);
}

.fold > details[open] > summary {
    display: none;
}

/* An API endpoint: the method, then the URL, as a request line */
.endpoint {
    display: block;
    overflow-x: auto;
    margin: 1rem 0 1.25rem;
    padding: 0.625rem 1rem;
    border: 1px solid var(--line);
    background: var(--raised);
    color: var(--text);
    font: 0.875rem/1.5 var(--mono);
    white-space: nowrap;
}

.endpoint > code:first-child {
    margin-right: 0.75ch;
    color: var(--hi);
    font-size: 1em;
    font-weight: 600;
    -webkit-user-select: none;
    user-select: none;
}

.endpoint.post > code:first-child, .method.post {
    color: var(--post);
}

.endpoint.get > code:first-child, .method.get {
    color: var(--get);
}

.endpoint.delete > code:first-child, .method.delete {
    color: var(--delete);
}

/* The notes under an endpoint or an example, as far below it as any text */
.endpoint + ul, .copyable + ul {
    padding-left: 1.1rem;
    color: var(--muted);
    font-size: 0.875rem;
}

/*
    A code block or endpoint in a box with its copy button, which docs.js
    adds: the box takes the block's margins, the block keeps room for the
    button, and the button stays put while the code scrolls sideways. The
    button shows when the box is hovered or focused, and always on a touch
    screen.
*/
.copyable {
    position: relative;
    margin: 1rem 0 1.25rem;
}

.copyable > pre, .copyable > .fold, .copyable > .endpoint {
    margin: 0;
    padding-right: 3rem;
}

/* A marked line reaches across the room kept for the button */
.copyable .hl {
    margin-right: -3rem;
    padding-right: 3rem;
}

.copybtn {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--line-hard);
    background: var(--raised);
    color: var(--muted);
    cursor: pointer;
    opacity: 0;
}

.copyable:hover > .copybtn, .copybtn:focus-visible, .copybtn.done {
    opacity: 1;
}

@media (hover: none) {
    .copybtn {
        opacity: 1;
    }
}

.copybtn:hover {
    border-color: var(--muted);
    color: var(--hi);
}

.copybtn svg {
    width: 0.875rem;
    height: 0.875rem;
}

/* After a copy, a tick for the copy icon until the button comes back */
.copybtn .check, .copybtn.done .copy {
    display: none;
}

.copybtn.done .check {
    display: block;
}

/*
    The search dialog
*/

#modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 98;
    width: 100%;
    height: 100%;
    padding: 10vh 1rem 0;
    background: rgb(0 0 0 / 70%);
}

.dialog {
    display: flex;
    flex-direction: column;
    max-width: 40rem;
    max-height: 75vh;
    margin: 0 auto;
    border: 1px solid var(--line-hard);
    background: var(--raised);
    box-shadow: 0 16px 40px var(--shadow);
}

.dialog form {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--line);
}

.dialog label {
    display: flex;
}

.dialog label svg {
    width: 1rem;
    height: 1rem;
    fill: var(--muted);
}

#query {
    flex: 1;
    min-width: 0;
    margin: 0 0.75rem;
    padding: 0.25rem 0;
    border: 0;
    outline: 0;
    background: none;
    color: var(--hi);
    font: 400 1rem/1.5 var(--mono);
    -webkit-appearance: none;
    appearance: none;
}

#query::placeholder {
    color: var(--dim);
    opacity: 1;
}

#query::-webkit-search-cancel-button {
    display: none;
}

#results {
    overflow-y: auto;
    margin: 0;
    padding: 0.375rem;
    list-style: none;
}

#results:empty {
    display: none;
}

#results li + li {
    margin-top: 0;
}

#results > p, #results > li > p {
    margin: 0;
    padding: 0.75rem;
    color: var(--muted);
    font-size: 0.875rem;
}

#results a {
    display: block;
    padding: 0.625rem 0.75rem;
    border-left: 1px solid transparent;
    color: var(--muted);
    font-size: 0.8125rem;
    line-height: 1.5;
    text-decoration: none;
}

#results a:hover, #results a:focus-visible, #results a.on {
    outline: 0;
    background: var(--hover);
}

#results a.on {
    border-left-color: var(--accent);
}

/* Where the hit is: the page's section, the page and its heading */
#results small {
    display: block;
    color: var(--muted);
    font: 400 0.75rem/1.5 var(--mono);
}

#results strong {
    display: block;
    margin: 0.125rem 0 0.25rem;
    color: var(--hi);
    font: 600 0.875rem/1.5 var(--mono);
}

#results mark {
    background: var(--select);
    color: var(--hi);
}

/*
    Narrower windows: the menu drops down from the burger, and the header
    keeps the mark, which is the version switch on a site with versions, the
    search and the burger
*/

/* A narrower search, to leave the header's links room beside it */
@media screen and (max-width: 64rem) {
    #search {
        min-width: 9rem;
    }
}

@media screen and (max-width: 56rem) {
    :root {
        --edge: 1rem;
    }

    .top {
        padding: 0 1rem;
    }

    /* No menu beside the page, so no column over it */
    .site {
        position: static;
        width: auto;
        padding: 0;
        border-right: 0;
    }

    /*
        The switch as wide as what it shows, from the screen's edge, and its
        dropdown under the header's line, across the screen, as the menu
        drops down from the burger
    */
    .top .versions {
        flex: none;
        margin-right: 0;
    }

    .top .versions summary {
        padding-right: 0.75rem;
    }

    .top .versions[open] summary {
        box-shadow: none;
    }

    .top .versions .chev {
        margin-left: 0.625rem;
    }

    .top .vmenu {
        --indent: calc(var(--edge) + 2.5rem);
        top: calc(100% + 1px);
        right: 0;
        border-width: 0 0 1px;
    }

    .topnav {
        display: none;
    }

    #search {
        min-width: 0;
        width: 2rem;
        justify-content: center;
        padding: 0;
    }

    #search svg {
        margin: 0;
    }

    #search span, #search kbd {
        display: none;
    }

    #burger {
        display: flex;
    }

    .frame {
        display: block;
    }

    .menu {
        position: fixed;
        top: var(--top);
        left: 0;
        z-index: 15;
        display: none;
        width: 100%;
        height: auto;
        bottom: 0;
        padding: 1.5rem 1rem 3rem calc(var(--edge) + 0.25rem);
        border-right: 0;
        background: var(--bg);
    }

    .menu.show {
        display: block;
    }

    .menu .elsewhere {
        display: block;
        margin-bottom: 1.125rem;
        padding-bottom: 1.125rem;
        border-bottom: 1px solid var(--line);
    }

    .page {
        padding: 1.5rem 1rem 0;
    }

    /* An endpoint wraps where the build lets a URL break, after a slash or a colon */
    .endpoint {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/*
    Every table is a name and what it means, and the changelog a date and
    its changes: on a phone, one above the other
*/
@media screen and (max-width: 40rem) {
    .brand span {
        display: none;
    }

    .changelog > div {
        display: block;
    }

    /* A diagram at the size it is drawn, which a phone's screen scrolls sideways */
    .diagram {
        overflow-x: auto;
    }

    .diagram svg {
        max-width: none;
    }

    .diagram.seq svg {
        width: 470px;
    }

    .diagram.seq-requests svg {
        width: 700px;
    }

    .diagram.ping svg {
        width: 480px;
    }

    table, tbody, tr, td {
        display: block;
    }

    table {
        min-width: 0;
    }

    thead {
        display: none;
    }

    tr {
        padding: 0.625rem 0;
        border-bottom: 1px solid var(--line);
    }

    tr:first-child {
        border-top: 1px solid var(--line-hard);
    }

    td {
        padding: 0;
        border: 0;
    }

    td:first-child {
        width: auto;
        white-space: normal;
    }

    td:first-child > code {
        overflow-wrap: anywhere;
    }

    td + td {
        margin-top: 0.25rem;
    }
}