/* API reference. Carbon foundations with a notation layer: framed panels titled in
   tracked mono, a method glyph that encodes the verb by shape, and the scan lifecycle
   drawn as a numbered axis. Tokens only; the page reads fine without JavaScript. */
body:has(.api-page) { --mut: var(--ink-2); --faint: var(--ink-3); --line: var(--border); --line-2: var(--border-2); --brass: var(--accent); --brass-soft: var(--accent-soft); --raise: var(--surface); --raise-2: var(--surface-2); --glow: var(--surface); --sheen: var(--ink-3); background: var(--bg); }
.api-page { max-width: var(--page-max); margin-inline: auto; color: var(--ink-2); font: var(--body-02-size)/1.5 var(--sans); }
.api-page [hidden] { display: none; }
.api-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.api-page a:not(.btn) { text-underline-offset: var(--spacing-02); }
.api-page :is(a, button, summary, pre, input, [tabindex="0"]):focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* Shared notation: tracked mono titles, counts and the method glyph. */
.api-panel-title, .api-outline-head, .api-label { display: block; margin: 0; color: var(--ink-3); font: 500 var(--label-01-size)/1.5 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.api-count { color: var(--ink-3); font: var(--label-01-size)/1.5 var(--mono); font-variant-numeric: tabular-nums; }
.api-method { display: inline-flex; align-items: center; gap: var(--spacing-03); color: var(--ink); font: 500 var(--label-01-size)/1.5 var(--mono); letter-spacing: 0.06em; white-space: nowrap; }
.api-glyph { flex: none; width: 8px; height: 14px; border: 1.5px solid currentColor; border-radius: 1px; }
.api-method[data-method="post"] .api-glyph { background: currentColor; }
.api-method[data-method="delete"] .api-glyph { background: repeating-linear-gradient(135deg, currentColor 0 1.5px, transparent 1.5px 4px); }
.api-panel { min-width: 0; padding: var(--spacing-05) var(--spacing-06) var(--spacing-06); border: 1px solid var(--border-2); border-radius: var(--r-lg); }
.api-content .api-panel-title { max-width: none; padding-bottom: var(--spacing-04); margin-bottom: var(--spacing-05); border-bottom: 1px solid var(--border); font-size: var(--label-01-size); line-height: 1.5; }

/* Frame: breadcrumb, outline rail, content column. */
.api-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--spacing-03); padding: var(--spacing-06) var(--spacing-07); border-bottom: 1px solid var(--border); color: var(--ink-3); font: var(--label-01-size)/1.4 var(--mono); }
.api-breadcrumb a { color: var(--ink-2); }
.api-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--spacing-09); padding: var(--spacing-07); align-items: start; }
.api-rail { position: sticky; top: calc(var(--nav-h, 64px) + var(--spacing-06)); max-height: calc(100vh - var(--nav-h, 64px) - var(--spacing-09)); overflow-y: auto; padding-right: var(--spacing-05); border-right: 1px solid var(--border); }
.api-rail-home { padding-bottom: var(--spacing-05); }
.api-rail-home a { color: var(--ink-2); font: var(--label-01-size)/1.5 var(--mono); }
.api-outline > summary { display: none; }
.api-outline-head { padding: var(--spacing-06) var(--spacing-04) var(--spacing-03); }
.api-on-this-page a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-04); padding: var(--spacing-03) var(--spacing-04); border-left: 2px solid transparent; color: var(--ink-2); font: var(--body-01-size)/1.4 var(--sans); text-decoration: none; }
.api-on-this-page a:hover { color: var(--ink); background: var(--surface); }
.api-on-this-page a[aria-current] { color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); }
.api-content { min-width: 0; }
.api-content :is(h1, h2, h3, h4, h5) { color: var(--ink); font-family: var(--sans); font-weight: 400; text-wrap: balance; }
.api-content h1 { font-size: var(--heading-07-size); line-height: 1.1; font-weight: 300; letter-spacing: -0.01em; margin: 0 0 var(--spacing-06); }
.api-content h2 { font-size: var(--heading-05-size); line-height: 1.25; margin: 0 0 var(--spacing-06); }
.api-content h3 { font-size: var(--heading-03-size); line-height: 1.4; margin: 0; }
.api-content h4 { font-size: var(--heading-03-size); line-height: 1.4; margin: 0; }
.api-content h5 { font-size: var(--body-01-size); line-height: 1.5; font-weight: 600; margin: var(--spacing-06) 0 var(--spacing-03); }
.api-content p { max-width: 72ch; margin: 0 0 var(--spacing-05); text-wrap: pretty; }
/* Links and code sit one step below headings: body ink with a quiet underline, so the
   brightest ink stays for headings and paths. */
.api-content a:not(.btn) { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--ink-4); }
.api-content a:not(.btn):hover { color: var(--accent); }
.api-content > section { border-top: 1px solid var(--border); padding-block: var(--spacing-09); }
.api-content :is(section, header, details[id], span[id], div[id]) { scroll-margin-top: calc(var(--nav-h, 64px) + var(--spacing-06)); }
.api-content code { font: var(--code-02-size)/1.5 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.api-content a code { color: inherit; }
.api-content :is(p, dd, .api-steps li > div) code { padding: 0 var(--spacing-02); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xs); font-size: var(--code-01-size); }
.api-content :is(.api-path, .api-score-steps a > code) { color: var(--ink); }
.api-content pre { overflow: auto; max-width: 100%; padding: var(--spacing-05) var(--spacing-06); margin: var(--spacing-05) 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xs); }
.api-content pre code { white-space: pre; overflow-wrap: normal; }

/* Intro: the copy on the left, two framed panels on the right. */
.api-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: var(--spacing-09); align-items: start; padding-bottom: var(--spacing-09); }
.api-content .lede { font-size: var(--heading-03-size); line-height: 1.45; max-width: 58ch; color: var(--ink-2); }
.api-intro-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-04); margin-block: var(--spacing-07); }
.api-intro-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.api-intro-links li + li { border-left: 1px solid var(--border); }
.api-content .api-intro-links a { display: grid; gap: var(--spacing-02); height: 100%; padding: var(--spacing-05); text-decoration: none; }
.api-content .api-intro-links a:hover { background: var(--surface); color: var(--ink); }
.api-intro-links strong { color: var(--ink); font: 500 var(--body-01-size)/1.4 var(--sans); }
.api-intro-links span { color: var(--ink-3); font-size: var(--body-01-size); line-height: 1.4; }
.api-intro-panels { display: grid; gap: var(--spacing-05); }
.api-glance, .api-legend { display: grid; margin: 0; }
.api-glance > div, .api-legend > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--spacing-04); align-items: baseline; padding-block: var(--spacing-03); }
.api-glance > div + div, .api-legend > div + div { border-top: 1px solid var(--border); }
.api-glance dt { color: var(--ink-3); font: var(--label-01-size)/1.5 var(--mono); }
.api-glance dd, .api-legend dd { margin: 0; color: var(--ink); font-size: var(--body-01-size); line-height: 1.4; }
.api-glance dd code { font-size: var(--code-01-size); }
.api-legend dd { color: var(--ink-2); }

/* Scopes as a legend grid. */
.api-scopes-panel { margin-block: var(--spacing-06); }
.api-scopes { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 0 var(--spacing-06); margin: 0; padding: 0; list-style: none; }
.api-scopes li { display: grid; gap: var(--spacing-01); padding-block: var(--spacing-03); border-bottom: 1px solid var(--border); }
.api-scopes span { color: var(--ink-3); font: var(--label-01-size)/1.5 var(--mono); }

/* The lifecycle score: numbered stops on a double-ruled axis. */
.api-score { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: var(--spacing-07); align-items: start; margin-block: var(--spacing-07); }
.api-score-steps, .api-content .api-steps { position: relative; display: grid; margin: 0; padding: 0; list-style: none; }
/* One double-ruled segment joins each stop to the next, so the axis ends on the last stop. */
.api-score-steps li, .api-content .api-steps li { position: relative; }
.api-score-steps li:not(:last-child)::before, .api-content .api-steps li:not(:last-child)::before { content: ''; position: absolute; left: 13px; width: 2px; border-inline: 1px solid var(--border-2); }
.api-score-steps li:not(:last-child)::before { top: calc(var(--spacing-04) + 28px); bottom: calc(-1 * var(--spacing-04)); }
.api-content .api-steps li:not(:last-child)::before { top: 28px; bottom: calc(-1 * var(--spacing-05)); }
.api-score-n { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; background: var(--bg); border: 1px solid var(--border-2); border-radius: var(--r-xs); color: var(--ink); font: 500 var(--label-01-size)/1 var(--mono); font-variant-numeric: tabular-nums; }
.api-content .api-score-steps a { display: grid; grid-template-columns: 28px 72px minmax(0, 1fr) auto; grid-template-areas: "n m path status" "n . what status"; gap: var(--spacing-02) var(--spacing-05); align-items: center; padding: var(--spacing-04) var(--spacing-04) var(--spacing-04) 0; border-radius: var(--r-xs); color: var(--ink); text-decoration: none; }
.api-content .api-score-steps a:hover { background: var(--surface); color: var(--ink); }
.api-content .api-score-steps a:hover .api-score-n { border-color: var(--ink-3); }
.api-score-steps .api-score-n { grid-area: n; align-self: start; }
.api-score-steps .api-method { grid-area: m; }
.api-score-steps a > code { grid-area: path; font-size: var(--code-02-size); }
.api-score-what { grid-area: what; color: var(--ink-2); font-size: var(--body-01-size); line-height: 1.4; }
.api-score-what code { font-size: var(--code-01-size); }
.api-score-status { grid-area: status; color: var(--ink-3); font: var(--label-01-size)/1.5 var(--mono); font-variant-numeric: tabular-nums; }
.api-score-branch p:not(.api-panel-title) { font-size: var(--body-01-size); line-height: 1.5; }
.api-score-branch a code { overflow-wrap: normal; word-break: normal; }
.api-score-branch p:last-child { margin-bottom: 0; }
.api-content .api-steps { gap: var(--spacing-05); margin-block: var(--spacing-06); }
.api-content .api-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--spacing-05); align-items: start; margin: 0; max-width: 80ch; }
.api-steps li > div { padding-top: var(--spacing-01); }

/* Code examples and their toolbar (added by api-reference.js). */
.api-examples details { border-top: 1px solid var(--border); }
.api-examples details:last-child { border-bottom: 1px solid var(--border); }
.api-examples summary { font-family: var(--mono); }
.api-code { position: relative; min-width: 0; margin: var(--spacing-05) 0; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-xs); }
.api-code pre { border: 0; margin: 0; background: transparent; padding-top: var(--spacing-04); }
.api-code-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-04); padding: var(--spacing-02) var(--spacing-02) var(--spacing-02) var(--spacing-05); border-bottom: 1px solid var(--border); }
.api-code-toolbar > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font: var(--label-01-size)/1.5 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.api-code-copy { flex: none; cursor: pointer; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--ink); min-height: var(--control-h-sm); padding-inline: var(--spacing-04); font: 500 var(--label-01-size)/1.5 var(--mono); }
.api-code-copy:hover { background: var(--surface-2); }

/* Notes: a term and its explanation on one hairline row. */
.api-notes { display: grid; margin: var(--spacing-07) 0 0; border-bottom: 1px solid var(--border); }
.api-notes > div { display: grid; grid-template-columns: 184px minmax(0, 72ch); gap: var(--spacing-06); padding-block: var(--spacing-05); border-top: 1px solid var(--border); }
.api-notes dt { color: var(--ink); font: 500 var(--body-01-size)/1.5 var(--sans); }
.api-notes dd { margin: 0; font-size: var(--body-01-size); line-height: 1.6; }

/* Endpoints. */
.api-section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--spacing-05); margin-bottom: var(--spacing-06); }
.api-section-heading h2 { margin: 0; }
.api-endpoint-search { display: grid; grid-template-columns: minmax(0, 560px) auto; justify-content: start; gap: var(--spacing-03) var(--spacing-05); margin-block: var(--spacing-06); }
.api-endpoint-search label { grid-column: 1 / -1; color: var(--ink-3); font: var(--label-01-size)/1.5 var(--mono); }
.api-endpoint-search input { appearance: none; width: 100%; min-width: 0; height: var(--control-h); padding: var(--spacing-03) var(--spacing-05); border: 1px solid var(--border-2); border-radius: var(--control-radius); background: var(--surface-2); color: var(--ink); font: var(--body-01-size)/1.4 var(--mono); }
.api-endpoint-search input::placeholder { color: var(--ink-3); opacity: 1; }
.api-endpoint-search .api-search-status { align-self: center; margin: 0; color: var(--ink-3); font: var(--label-01-size)/1.5 var(--mono); font-variant-numeric: tabular-nums; }
.api-endpoint-group { margin-top: var(--spacing-08); }
.api-endpoint-group > h3 { display: flex; align-items: baseline; gap: var(--spacing-04); padding-bottom: var(--spacing-04); border-bottom: 1px solid var(--border-2); }
.api-endpoint { border-bottom: 1px solid var(--border); }
.api-endpoint > summary { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto 16px; grid-template-areas: "m path scope t" "m title scope t"; gap: var(--spacing-02) var(--spacing-05); align-items: center; padding: var(--spacing-05) var(--spacing-04); cursor: pointer; list-style: none; }
.api-endpoint > summary::-webkit-details-marker { display: none; }
.api-endpoint > summary::after { content: '+'; grid-area: t; color: var(--ink-2); font: var(--body-02-size)/1 var(--mono); text-align: center; }
.api-endpoint[open] > summary::after { content: '\2212'; }
.api-endpoint > summary:hover { background: var(--surface); }
.api-endpoint[open] > summary { background: var(--surface); }
.api-endpoint > summary .api-method { grid-area: m; }
.api-path { grid-area: path; }
.api-endpoint-title { grid-area: title; color: var(--ink-3); font-size: var(--body-01-size); line-height: 1.4; }
.api-content .api-scope { grid-area: scope; color: var(--ink-3); font-size: var(--code-01-size); }
.api-endpoint-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); gap: var(--spacing-07); align-items: start; padding: var(--spacing-06) var(--spacing-04) var(--spacing-07); border-top: 1px solid var(--border); }
.api-endpoint-docs { min-width: 0; }
.api-endpoint-code { position: sticky; top: calc(var(--nav-h, 64px) + var(--spacing-05)); display: grid; min-width: 0; }
.api-endpoint-code > :first-child { margin-top: 0; }
.api-endpoint-code pre { max-height: 420px; }
.api-operation-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--spacing-05); margin-bottom: var(--spacing-04); }
.api-content .api-operation-heading > a { color: var(--ink-3); font: var(--label-01-size)/1.5 var(--mono); }
.api-op-meta { display: flex; flex-wrap: wrap; gap: var(--spacing-03) var(--spacing-07); margin: 0 0 var(--spacing-05); padding-block: var(--spacing-04); border-block: 1px solid var(--border); }
.api-op-meta > div { display: flex; gap: var(--spacing-03); align-items: baseline; }
.api-op-meta dt { color: var(--ink-3); font: var(--label-01-size)/1.5 var(--mono); }
.api-op-meta dd { margin: 0; color: var(--ink); font-size: var(--body-01-size); }
.api-op-meta code { font-size: var(--code-01-size); }
.api-no-body { color: var(--ink-3); font-size: var(--body-01-size); }
.api-content summary { cursor: pointer; color: var(--ink); font-size: var(--body-01-size); }
.api-content :is(.api-examples, .api-response-codes) summary { padding: var(--spacing-04) var(--spacing-04); }
.api-content :is(.api-examples, .api-response-codes) summary:hover { background: var(--surface); }
.api-response-codes { margin-top: var(--spacing-05); border-block: 1px solid var(--border); }

/* Tables. */
.api-table-wrap { overflow-x: auto; max-width: 100%; margin-block: var(--spacing-03) var(--spacing-05); }
.api-content table { border-collapse: collapse; width: 100%; text-align: left; font-size: var(--body-01-size); line-height: 1.45; }
.api-content :is(th, td) { font-size: var(--body-01-size); padding: var(--spacing-04) var(--spacing-05) var(--spacing-04) 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.api-content th { color: var(--ink-3); font: 500 var(--label-01-size)/1.5 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; border-bottom-color: var(--border-2); }
.api-content td code { font-size: var(--code-01-size); }
.api-errors td:first-child { white-space: nowrap; }
.api-field-required { display: block; margin-top: var(--spacing-02); color: var(--ink-3); font: var(--label-01-size)/1.5 var(--mono); }

/* Schemas: an index beside a fixed-height viewer, so choosing one never moves the page. */
.api-schemas { display: grid; grid-template-columns: minmax(200px, 248px) minmax(0, 1fr); margin-top: var(--spacing-06); border: 1px solid var(--border-2); border-radius: var(--r-lg); overflow: hidden; }
.api-schema-index { display: flex; flex-direction: column; height: 520px; overflow-y: auto; padding-block: var(--spacing-03); border-right: 1px solid var(--border); }
.api-schema-index [role="tab"] { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-04); width: 100%; min-height: 36px; padding: var(--spacing-03) var(--spacing-05); border: 0; border-left: 2px solid transparent; background: transparent; color: var(--ink-2); text-align: left; cursor: pointer; }
.api-schema-index [role="tab"] code { color: inherit; font-size: var(--code-01-size); }
.api-schema-index [role="tab"]:hover { background: var(--surface); color: var(--ink); }
.api-schema-index [role="tab"][aria-selected="true"] { border-left-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.api-schemas:has(.api-schema-index:not([hidden])) .api-schema-viewer { height: 520px; overflow-y: auto; }
.api-schema-index[hidden] + .api-schema-viewer { grid-column: 1 / -1; }
.api-schema { padding: var(--spacing-05) var(--spacing-06) var(--spacing-06); }
.api-schema + .api-schema { border-top: 1px solid var(--border); }
.api-schema:focus-visible { outline-offset: -4px; }
.api-schema-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-05); padding-bottom: var(--spacing-04); border-bottom: 1px solid var(--border); }
.api-schema-head h3 code { font-size: var(--body-02-size); color: var(--ink); }
.api-content .api-type-link { text-decoration-color: var(--ink-4); }
.api-content .api-type-link:hover code { color: var(--accent); }
.api-downloads { display: flex; flex-wrap: wrap; gap: var(--spacing-04); margin-top: var(--spacing-06); padding-top: var(--spacing-06); border-top: 1px solid var(--border); }
.api-footer { display: flex; flex-wrap: wrap; gap: var(--spacing-05) var(--spacing-07); border-top: 1px solid var(--border); padding-block: var(--spacing-07); font-size: var(--body-01-size); }

@media (max-width: 1311.98px) {
  .api-intro { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-07); }
  .api-intro-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1055.98px) {
  .api-layout { grid-template-columns: 192px minmax(0, 1fr); gap: var(--spacing-06); padding: var(--spacing-06); }
  .api-content h1 { font-size: var(--heading-06-size); }
  .api-score, .api-endpoint-body { grid-template-columns: minmax(0, 1fr); }
  .api-endpoint-code { position: static; }
  .api-intro-panels { grid-template-columns: minmax(0, 1fr); }
  .api-notes > div { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-02); }
}
@media (max-width: 671.98px) {
  .api-layout { display: block; padding: var(--spacing-05); }
  .api-breadcrumb { padding: var(--spacing-05); }
  .api-rail { position: static; max-height: none; padding: 0 0 var(--spacing-06); border-right: 0; }
  .api-outline { border: 1px solid var(--border-2); border-radius: var(--r-md); }
  .api-outline > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding-inline: var(--spacing-05); font: 500 var(--label-01-size)/1.5 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; list-style: none; }
  .api-outline > summary::-webkit-details-marker { display: none; }
  .api-outline > summary::after { content: '+'; font: var(--body-02-size)/1 var(--mono); }
  .api-outline[open] > summary::after { content: '\2212'; }
  .api-outline[open] > summary { border-bottom: 1px solid var(--border); }
  .api-on-this-page { padding-bottom: var(--spacing-04); }
  .api-content h1 { font-size: var(--heading-05-size); }
  .api-content h2 { font-size: var(--heading-04-size); }
  .api-content .lede { font-size: var(--body-02-size); }
  .api-content > section { padding-block: var(--spacing-07); }
  .api-intro { padding-top: var(--spacing-05); }
  .api-intro-links { grid-template-columns: minmax(0, 1fr); }
  .api-intro-links li + li { border-left: 0; border-top: 1px solid var(--border); }
  .api-intro-actions .btn { flex: 1 1 auto; }
  .api-panel { padding-inline: var(--spacing-05); }
  .api-content .api-score-steps a { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "n m status" "n path path" "n what what"; }
  .api-endpoint > summary { grid-template-columns: minmax(0, 1fr) 16px; grid-template-areas: "m t" "path t" "title t" "scope t"; padding-inline: var(--spacing-03); }
  .api-endpoint-body { padding-inline: 0; }
  .api-code pre { padding-inline: var(--spacing-05); }
  .api-endpoint-search { grid-template-columns: minmax(0, 1fr); }
  .api-downloads { flex-direction: column; align-items: stretch; }
  .api-schemas { grid-template-columns: minmax(0, 1fr); }
  .api-schema-index { height: 200px; border-right: 0; border-bottom: 1px solid var(--border); }
  .api-schemas:has(.api-schema-index:not([hidden])) .api-schema-viewer { height: 440px; }
  .api-schema { padding-inline: var(--spacing-05); }
}
@media (prefers-reduced-motion: reduce) { .api-page *, .api-page *::before, .api-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
