/* ULTRABENCH — /docs: the public API reference. Sidebar · measured article · page rail.
   Structure follows a developer-docs layout; every colour comes from base.css tokens —
   nothing here loads a font, an icon set or a highlighter. Last sheet in the cascade, and
   every rule below is scoped under `.docs` so it cannot reach another view. */

/* JS overwrites this from #app-header.offsetHeight (the header wraps, so its height is
   measured rather than assumed); this value is what the page uses before JS runs. */
:root { --docs-topbar: 44px; }

.docs {
  --docs-sidebar: 248px;
  --docs-toc:     240px;
  --docs-measure: 640px;  /* prose measure — a comfortable ~75-85 characters at 15px */
  --docs-wide:    880px;  /* tables and code cards widen past the prose, and stop here */
  /* --text-faint is 3.9-4.1:1 on these backgrounds: fine for an eyebrow, below AA for
     anything a reader has to READ. Column headings, enum values, the rail and an idle
     tab carry content, so they get a token that clears 5:1 instead. */
  --docs-quiet:   #7d8798;
  /* A string is the most common token in a JSON body. On the brand green it made every
     response card read as a wall of links, so code gets a colour of its own. */
  --docs-str:     #cdb391;
  /* Deliberate local deviation from --radius: a code card reads as an object on the page,
     not as another panel edge. Chips follow the app's own 4px. */
  --docs-radius-code: 10px;
  --docs-radius-chip: var(--radius-s);

  display: grid;
  grid-template-columns: var(--docs-sidebar) minmax(0, 1fr) var(--docs-toc);
  gap: 0 32px;
  /* Same cap as every other capped view (base.css `.view:not(.view-wide)`), so the
     sidebar's left edge lines up with the board and the wordmark at every width. */
  max-width: 1680px;
  margin: 0 auto;
  align-items: start;
}
.docs.docs-no-toc { grid-template-columns: var(--docs-sidebar) minmax(0, 1fr); }

/* Every anchor target clears the sticky header — without this a fragment link lands with
   its own heading hidden behind the top bar. */
.docs [data-doc-anchor] { scroll-margin-top: calc(var(--docs-topbar) + 20px); }

/* ---------- sidebar ---------- */

.docs-sidebar {
  position: sticky; top: calc(var(--docs-topbar) + 14px);
  max-height: calc(100vh - var(--docs-topbar) - 28px); overflow-y: auto; overscroll-behavior: contain;
  border-right: 1px solid var(--line); padding-right: 16px;
}
/* Author `display` out-ranks the UA's `[hidden]` rule, so the panel that the toggle
   controls on phones is simply always open at desk widths. */
.docs-sidebar-panel { display: block; }
.docs-nav-toggle { display: none; }

.docs-search-open {
  display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 16px; padding: 7px 10px;
  background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--radius-s);
  color: var(--docs-quiet); font: 13px var(--sans); cursor: pointer;
}
.docs-search-open:hover { color: var(--text); border-color: var(--line-strong); }
.docs-kbd { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--docs-quiet); }

.docs-nav-group + .docs-nav-group { margin-top: 20px; }
/* Inverts the app's h3 convention (dim + uppercase) on purpose: in a sidebar the group
   label must read brighter than its children. A <div>, so base.css's h3 rule never lands. */
.docs-nav-label {
  font-size: 12px; font-weight: 600; color: var(--text); padding: 4px 10px; margin-bottom: 2px;
}
.docs-nav-item {
  display: block; font-size: 13px; line-height: 1.35; color: var(--text-dim);
  padding: 6px 10px; border-radius: var(--docs-radius-chip);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.docs-nav-item:hover { color: var(--text); background: var(--bg-inset); text-decoration: none; }
/* A raised chip, not an accent fill: the accent belongs to the global top nav, and two
   accent-filled items on one screen make neither of them read as current. */
.docs-nav-item[aria-current="page"] {
  color: var(--text); background: var(--bg-raised);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ---------- article column ---------- */

.docs-main { min-width: 0; }
.docs-article { max-width: var(--docs-wide); outline: none; }

.docs-eyebrow {
  font-size: 11px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .08em;
}
.docs h1.docs-title {
  font-size: 26px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); margin: 6px 0 8px;
}
.docs-summary { font-size: 15px; color: var(--text-dim); line-height: 1.6; margin-bottom: 20px; }
.docs-group-note {
  font-size: 12px; color: var(--docs-quiet); font-family: var(--mono);
  border-left: 2px solid var(--line-strong); padding-left: 10px; margin: 0 0 28px;
}
.docs .doc-heading-3 {
  font-size: 15px; margin: 28px 0 8px; color: var(--text);
  text-transform: none; letter-spacing: normal;
}

/* A parameter name is one long unbreakable token, and this page is full of them: without
   a break rule a phone gets a horizontally scrolling DOCUMENT, which is the one thing the
   layout may never do. */
.docs-blocks { font-size: 15px; line-height: 1.7; color: var(--text); overflow-wrap: break-word; }
.docs h1, .docs h2, .docs h3 { font-weight: 500; }
.docs .doc-heading-2 { font-size: 20px; margin: 40px 0 12px; }
.docs-blocks > :first-child { margin-top: 0; }

/* A heading with no way to copy its address is a deep link nobody can share. */
.doc-anchor-link { display: inline-flex; margin-left: 8px; color: var(--text-faint); opacity: 0; vertical-align: middle; }
.doc-heading:hover .doc-anchor-link, .doc-anchor-link:focus-visible { opacity: 1; }
.doc-anchor-link:hover { color: var(--accent); }

.doc-prose { margin: 0 0 14px; }
.doc-prose, .doc-list, .doc-callout, .docs-summary, .doc-heading, .doc-link, .docs-group-note {
  max-width: var(--docs-measure);
}
/* Not accent-coloured: a paragraph naming three response fields must not look like a
   paragraph holding three links. A tint, no border — at this density a bordered inline
   code span turns the paragraph into a dotted line. */
.doc-inline-code {
  font-family: var(--mono); font-size: .9em; color: var(--text); overflow-wrap: anywhere;
  background: var(--bg-raised); border-radius: 3px; padding: 1px 4px;
}

.doc-list { margin: 0 0 16px; }
.doc-list-title {
  font-size: 11px; color: var(--text-faint); text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 6px;
}
.doc-list ul, .doc-list ol { margin: 0; padding-left: 20px; }
.doc-list li { margin: 0 0 6px; }
.doc-list li::marker { color: var(--text-faint); }

/* ---------- callouts ---------- */

.doc-callout {
  background: var(--bg-inset); border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong); border-radius: var(--radius);
  padding: 12px 14px; margin: 0 0 18px;
}
.doc-callout.callout-note    { border-left-color: var(--accent); }
.doc-callout.callout-warning { border-left-color: var(--warn); }
.doc-callout.callout-danger  { border-left-color: var(--danger); }
.doc-callout-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.doc-callout-body  { font-size: 13px; color: var(--text-dim); line-height: 1.65; }

/* ---------- cross-reference rows ---------- */

.doc-link {
  display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; margin: 0 0 8px;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text-dim);
}
.doc-link:hover { border-color: var(--line-strong); text-decoration: none; }
.doc-link-label { color: var(--accent); font-size: 13px; white-space: nowrap; }
.doc-link-desc  { font-size: 13px; color: var(--text-dim); }
.doc-link-arrow { margin-left: auto; align-self: center; color: var(--text-faint); flex: none; }
.doc-link-flat  { color: var(--text-dim); }

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

/* The id and the scroll anchor live on this wrapper, not on the h2: a fragment link that
   targets the heading parks the method and the path above the viewport, and those two
   lines are what identifies the entry. */
.doc-endpoint { border-top: 1px solid var(--line); padding-top: 28px; margin-top: 40px; }
.docs-blocks > .doc-endpoint:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

.doc-endpoint-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* One chip, not five: every public route is a GET, so a per-method palette would be four
   dead rules and a colour that never varies. The word carries the method. */
.doc-method {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .06em;
  padding: 2px 7px; border-radius: var(--docs-radius-chip); color: var(--info);
  background: var(--bg-raised); border: 1px solid var(--line-strong);
}
.doc-path { font-family: var(--mono); font-size: 15px; color: var(--text); }

.docs .doc-endpoint-title { font-size: 20px; margin: 10px 0 6px; }
.doc-endpoint-summary { color: var(--text-dim); margin-bottom: 0; }

.doc-endpoint-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 8px 12px;
  margin: 10px 0 18px; font-family: var(--mono); font-size: 12px;
  background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--radius);
}
/* An item wraps as a unit — a `Cache:` that ends one line and a value that starts the
   next is two facts pretending to be one. */
.doc-meta-item { white-space: nowrap; }
.doc-meta-label { color: var(--docs-quiet); }
.doc-meta-value { color: var(--text-dim); }
.doc-try {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--accent); text-decoration: none; white-space: nowrap;
}
.doc-try:hover { text-decoration: underline; }

/* ---------- reference tables ---------- */

/* Not `table.data`: that component carries a sticky first column and sticky headers built
   for a 100-row board, which fight a six-row reference table. Horizontal rules only —
   no outer border, no vertical rules, no zebra. */
.doc-table-title {
  font-size: 11px; color: var(--text-faint); text-transform: uppercase;
  letter-spacing: .06em; margin: 26px 0 8px;
}
.doc-table-scroll { position: relative; }
.doc-table-wrap { overflow-x: auto; max-width: 100%; margin: 0 0 20px; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.doc-table th {
  font-size: 11px; font-weight: 500; color: var(--docs-quiet); text-align: left;
  padding: 0 16px 8px 0; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.doc-table .doc-name { font-family: var(--mono); color: var(--text); white-space: nowrap; }
/* No left padding on the first cell — parameter names align flush with the prose edge
   above them, which is what makes the column scannable. */
.doc-table td {
  padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.6;
}
.doc-table tbody tr { background-color: transparent; transition: background-color .12s; }
.doc-table tbody tr:hover { background-color: var(--bg-inset); }
.doc-table tbody tr:last-child td { border-bottom: none; }
.doc-table .doc-type { font-family: var(--mono); font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.doc-table .doc-default { font-family: var(--mono); font-size: 12px; width: 96px; color: var(--text-dim); }
.doc-req {
  font-family: var(--sans); font-size: 10px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--warn); margin-left: 8px;
}
.doc-values { font-family: var(--mono); font-size: 12px; color: var(--docs-quiet); margin-top: 4px; }

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

.doc-code {
  background: var(--bg-inset); border: 1px solid var(--line);
  border-radius: var(--docs-radius-code); margin: 0 0 20px; overflow: hidden;
  /* a tab swap that changes the card's height must not yank the scroll position */
  overflow-anchor: none;
}
.doc-code-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 10px 6px 12px; border-bottom: 1px solid var(--line); background: var(--bg-raised);
}
.doc-code-left, .doc-code-right { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
.doc-code-right { gap: 10px; }
.doc-code-title, .doc-code-lang {
  font-size: 11px; color: var(--text-faint); text-transform: uppercase;
  letter-spacing: .06em; white-space: nowrap;
}
/* The disclosure that a sample is abridged is a note beside the label, never the label:
   as a title it made seven cards announce a caveat where their name should be. */
.doc-code-note { font-size: 11px; color: var(--docs-quiet); white-space: nowrap; }
.doc-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.doc-tab {
  background: none; border: 0; font-size: 12px; font-family: var(--sans);
  padding: 4px 8px; border-radius: var(--docs-radius-chip);
  color: var(--docs-quiet); cursor: pointer;
}
.doc-tab:hover { color: var(--text); }
.doc-tab[aria-selected="true"] { color: var(--text); background: var(--bg-inset); }
.doc-copy {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none;
  background: none; border: 0; border-radius: var(--radius-s); color: var(--text-faint); cursor: pointer;
}
.doc-copy:hover { color: var(--text); background: var(--bg-inset); }
.doc-copy[data-state="copied"] { color: var(--accent); }

/* A response body can run past a screen. It opens clipped with an expander rather than
   pushing the next paragraph off the page. */
.doc-code-body { position: relative; }
.doc-code[data-collapsed="true"] .doc-code-body { max-height: 300px; overflow: hidden; }
.doc-code[data-collapsed="true"] .doc-code-body::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(14, 17, 22, 0), rgba(14, 17, 22, .97));
}
.doc-code-expand {
  display: block; width: 100%; padding: 7px 12px; border: 0; border-top: 1px solid var(--line);
  background: var(--bg-raised); color: var(--text-dim); font-family: var(--sans); font-size: 12px; cursor: pointer;
}
.doc-code-expand:hover { color: var(--text); }

.doc-code-panel { outline-offset: -2px; }
pre.doc-pre {
  margin: 0; padding: 12px 14px; overflow-x: auto; max-width: 100%; tab-size: 2;
  font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--text-dim); white-space: pre;
}
/* JSON has no significant trailing whitespace and no line-continuation grammar, so a long
   value wraps rather than hiding seven screens of horizontal scroll behind a scrollbar
   that iOS does not draw. Shell and code samples keep `pre` — a wrapped line there would
   read as two commands. */
.doc-code-panel[data-lang="json"] pre.doc-pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Token classes are only ever emitted inside a code card, and they stay scoped to one so
   this sheet cannot repaint a `tok-` class some later component invents. */
.doc-pre .tok-key  { color: var(--text); }
.doc-pre .tok-str  { color: var(--docs-str); }
.doc-pre .tok-num  { color: var(--info); }
.doc-pre .tok-lit  { color: var(--warn); }
.doc-pre .tok-punc { color: var(--text-faint); }
.doc-pre .tok-com  { color: var(--text-faint); font-style: italic; }
.doc-pre .tok-flag { color: var(--info); }

/* ---------- on-this-page rail ---------- */

.docs-toc {
  position: sticky; top: calc(var(--docs-topbar) + 14px);
  max-height: calc(100vh - var(--docs-topbar) - 28px); overflow-y: auto;
}
.docs-toc-label {
  font-size: 11px; color: var(--text-faint); text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 8px;
}
.docs-toc-list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.docs-toc-item {
  display: block; padding: 4px 0 4px 12px; margin-left: -1px;
  border-left: 1px solid transparent; font-size: 12px; line-height: 1.4; color: var(--docs-quiet);
}
.docs-toc-item:hover { color: var(--text); text-decoration: none; }
.docs-toc-item.is-active { color: var(--accent); border-left-color: var(--accent); }
.docs-toc-item.level-3 { padding-left: 24px; }
.docs-toc-item.is-endpoint { font-family: var(--mono); font-size: 12px; }

/* ---------- search palette ---------- */

.docs-search {
  position: fixed; inset: 0; z-index: 60; padding: 10vh 16px 16px;
  display: flex; justify-content: center; align-items: flex-start;
}
/* Author `display` out-ranks the UA's `[hidden]` rule — same trap as the sidebar panel
   above, and the palette would otherwise open itself on every render. */
.docs-search[hidden] { display: none; }
.docs-search-scrim { position: absolute; inset: 0; background: rgba(4, 6, 9, .74); }
.docs-search-panel {
  position: relative; width: min(620px, 100%); max-height: 72vh; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
  background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.docs-search-input {
  width: 100%; padding: 13px 14px; background: none; border: 0;
  border-bottom: 1px solid var(--line); color: var(--text); font-family: var(--sans); font-size: 15px;
}
.docs-search-input::placeholder { color: var(--docs-quiet); }
.docs-search-results { list-style: none; margin: 0; padding: 4px; overflow-y: auto; }
.docs-search-hit {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 1px 10px; align-items: baseline;
  padding: 7px 9px; border-radius: var(--radius-s); color: var(--text);
}
.docs-search-results li[aria-selected="true"] .docs-search-hit,
.docs-search-hit:hover { background: var(--bg-inset); text-decoration: none; }
.docs-search-kind {
  grid-row: 1 / span 2; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--docs-quiet);
}
.docs-search-title { font-family: var(--mono); font-size: 13px; color: var(--text); }
.docs-search-context {
  font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.docs-search-hint { margin: 0; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 11px; color: var(--docs-quiet); }

/* Copy confirmation, announced rather than drawn. Its own region, so the shell's polite
   `#view` never owns the announcement. */
.docs-status {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- pager ---------- */

.docs-pager {
  display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line);
  margin-top: 48px; padding-top: 20px;
}
.docs-pager-slot { display: block; min-width: 0; }
/* The first and last sections render one empty slot to hold the layout; it must not also
   hold a gap once the pager stacks. */
.docs-pager-slot:empty { display: none; }
.docs-pager-next { text-align: right; margin-left: auto; }
.docs-pager-dir {
  display: block; font-size: 11px; color: var(--docs-quiet); text-transform: uppercase; letter-spacing: .08em;
}
.docs-pager-title { display: block; font-size: 14px; color: var(--text); }
a.docs-pager-slot:hover { text-decoration: none; }
a.docs-pager-slot:hover .docs-pager-title { color: var(--accent); }

/* ---------- responsive ---------- */

/* Both breakpoints sit where the reading column would otherwise JUMP WIDER as the window
   narrows: 1440 is the width at which three columns still leave 880px of article, 1184 the
   width at which two do. Below each, the column that goes is the one that was starving it. */

/* The rail stops being a column and becomes an index above the article — it is the only
   endpoint-level navigation on the page, so it must survive every width, not just wide
   desktops. */
@media (max-width: 1439px) {
  .docs, .docs.docs-no-toc { grid-template-columns: var(--docs-sidebar) minmax(0, 1fr); }
  .docs-sidebar { grid-column: 1; grid-row: 1 / span 2; }
  .docs-toc {
    grid-column: 2; grid-row: 1; position: static; max-height: none; margin-bottom: 22px;
    max-width: var(--docs-wide); padding: 10px 12px;
    border: 1px solid var(--line); border-radius: var(--radius);
  }
  .docs-main { grid-column: 2; grid-row: 2; }
  .docs-toc-list { display: flex; flex-wrap: wrap; gap: 4px 6px; border-left: 0; }
  .docs-toc-item, .docs-toc-item.level-3 {
    padding: 3px 8px; margin-left: 0; border-left: 0;
    border-radius: var(--docs-radius-chip); background: var(--bg-inset);
  }
  .docs-toc-item.is-active { background: var(--accent-dim); color: var(--accent); }
}

/* Sidebar collapses to a toggle. The panel renders in flow rather than as an overlay, so
   the page keeps exactly one scroll context on touch. */
@media (max-width: 1183px) {
  .docs, .docs.docs-no-toc { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .docs-sidebar {
    grid-column: 1; grid-row: 1;
    position: static; max-height: none; overflow: visible;
    border-right: 0; padding-right: 0; margin-bottom: 20px;
  }
  .docs-toc  { grid-column: 1; grid-row: 2; }
  .docs-main { grid-column: 1; grid-row: 3; }
  .docs-nav-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; text-align: left; padding: 8px 12px; cursor: pointer;
    background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
    color: var(--text); font-family: var(--sans); font-size: 13px;
  }
  .docs-nav-toggle-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .docs-nav-toggle[aria-expanded="true"] .docs-nav-chevron { transform: rotate(180deg); }
  .docs-nav-chevron { color: var(--text-faint); flex: none; }
  .docs-sidebar-panel { padding: 12px 0 0; }
  .docs-sidebar-panel[hidden] { display: none; }
  .docs-nav-item { white-space: normal; }
}

@media (max-width: 860px) {
  .docs h1.docs-title { font-size: 22px; }
  .docs .doc-heading-2, .docs .doc-endpoint-title { font-size: 17px; }
  .docs-summary { font-size: 14px; margin-bottom: 18px; }
  .docs-blocks { font-size: 14px; }
  /* The strip is a column here, so an item is already alone on its line: keeping it
     unbreakable would push a 300-character cache string off a 390px screen. */
  .doc-endpoint-meta { flex-direction: column; align-items: flex-start; gap: 4px; }
  .doc-meta-item { white-space: normal; }
  .doc-table-wrap { -webkit-overflow-scrolling: touch; }
  .doc-anchor-link { opacity: 1; }
}

/* Same contract as components.css `.scroll-x`: a table that runs off the screen must SAY
   so. Scoped to the band where these tables actually scroll — below 560px they restack,
   and a fade there would be decoration that lies. */
@media (min-width: 561px) and (max-width: 860px) {
  .doc-table-scroll::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 20px; width: 30px; pointer-events: none;
    background: linear-gradient(to right, rgba(11, 13, 17, 0), rgba(11, 13, 17, .94));
  }
  .doc-table-wrap { scrollbar-width: thin; scrollbar-color: var(--accent-dim) transparent; }
  .doc-table-wrap::-webkit-scrollbar { height: 9px; -webkit-appearance: none; }
  .doc-table-wrap::-webkit-scrollbar-track { background: transparent; }
  .doc-table-wrap::-webkit-scrollbar-thumb { background: var(--accent-dim); border-radius: 999px; }
}

/* 390px: nothing on this page may scroll the document sideways. A four-column reference
   table cannot: the name column alone is wider than the description column it leaves
   behind, so the table restacks into labelled rows. */
@media (max-width: 560px) {
  .docs .doc-path { font-size: 13px; overflow-wrap: anywhere; }
  pre.doc-pre { font-size: 12px; padding: 10px; }
  .doc-code-head { flex-wrap: wrap; }
  .doc-code-left { gap: 8px; }
  .doc-link { flex-direction: column; align-items: flex-start; gap: 2px; }
  .doc-link-label { white-space: normal; }
  .doc-link-arrow { display: none; }
  .docs-pager { flex-direction: column; gap: 18px; }
  .docs-pager-next { text-align: left; margin-left: 0; }
  .docs-search { padding: 6vh 10px 10px; }

  .docs .doc-table, .docs .doc-table tbody, .docs .doc-table tr, .docs .doc-table td { display: block; width: auto; }
  .docs .doc-table thead { position: absolute; left: -9999px; }
  .docs .doc-table tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .docs .doc-table tbody tr:last-child { border-bottom: none; }
  .docs .doc-table td { padding: 0; border: 0; }
  .docs .doc-table .doc-name { white-space: normal; }
  .docs .doc-table .doc-type, .docs .doc-table .doc-default {
    display: inline-block; width: auto; margin: 2px 12px 2px 0; color: var(--docs-quiet);
  }
  /* The column heading is gone, so the value needs its own label — but a labelled dash
     is a row of noise where nine parameters in ten have no default. */
  .docs .doc-table .doc-default::before { content: "default "; }
  .docs .doc-table .doc-default:has(.dash) { display: none; }
}