/* The reference layout (components/ApiReference, 2026-11-03): small cards
   on the dark hero, a narrow navigation on the left, sticky, grouped, and a
   column of wide white cards on the right, each an endpoint with its badge,
   its name in mono, a line of what it does, its facts in two columns and
   code boxes with a Copy button. Shared by /agents, which links this file
   after web/ship.css, and the private API reference, whose source
   (docs/api-reference/index.html) carries a copy over the tokens written by
   npm run api-page. Every rule is under .ref, so it reaches no other page;
   the frame round it (the site's bar and footer, the reference's own band)
   is each page's. */

/* The hero's small cards, on the dark band: an address in mono or a name in
   words, then a sentence. */
.ref .hosts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--space-3); min-width: 0; }
.ref .host { min-width: 0; padding: var(--space-4) var(--space-5); background: var(--accent-tint); border: 1px solid var(--line-dark); border-radius: var(--radius-control); }
.ref .host .mono { font: var(--type-data-page); color: var(--accent-light); overflow-wrap: anywhere; }
.ref .host .host-name { font: var(--type-page-strong); color: var(--text-on-dark); }
.ref .host p { margin: var(--space-1) 0 0; font: var(--type-page-small); color: var(--muted-on-dark); }

/* The navigation beside the cards, then the cards. */
.ref .wrap { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.ref nav.toc { min-width: 0; position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--space-5)); max-height: calc(100vh - 2 * var(--space-5)); overflow-y: auto; }
.ref nav.toc h2 { margin: var(--space-5) 0 var(--space-1); font: var(--type-popout-label); color: var(--sub); }
.ref nav.toc h2:first-child { margin-top: 0; }
.ref nav.toc ul { list-style: none; margin: 0; padding: 0; display: grid; }
.ref nav.toc a { display: block; padding: var(--space-1) var(--space-2); border-radius: var(--radius-small); font: var(--type-data-caption); color: var(--sub); overflow-wrap: anywhere; }
.ref nav.toc a.plain { font: var(--type-page-small); }
.ref nav.toc a:hover { background: var(--card); color: var(--text); }
.ref .stack { min-width: 0; display: grid; gap: var(--space-5); }

/* A group's heading over its cards. */
.ref .section-head { display: grid; gap: var(--space-1); margin-top: var(--space-6); }
.ref .section-head:first-child { margin-top: 0; }
.ref .section-head h2 { margin: 0; font: var(--type-page-title); color: var(--text); }
.ref .section-head p { margin: 0; max-width: 70ch; color: var(--sub); }

/* A card: white on the page's ground, its parts a step apart. */
.ref .card { min-width: 0; padding: var(--space-6); background: var(--card); border-radius: var(--radius-panel); box-shadow: var(--shadow-card); scroll-margin-top: var(--space-4); }
.ref .card > * { margin-block: 0; }
.ref .card > * + * { margin-top: var(--space-3); }

/* An endpoint's head: its badge, its name in mono, then what it does. */
.ref .ep-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
.ref .method { padding: var(--space-1) var(--space-2); border: 1px solid currentColor; border-radius: var(--radius-small); font: var(--type-data-caption); color: var(--link); }
.ref .path { margin: 0; font: var(--type-data-page); color: var(--text); overflow-wrap: anywhere; }
.ref .ep-what { color: var(--sub); }

/* Its facts: a label beside each value (above it on a phone). */
.ref .facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-5); margin: 0; }
.ref .facts dt { padding-top: 2px; font: var(--type-popout-label); color: var(--sub); }
.ref .facts dd { min-width: 0; margin: 0; }

/* A code box (components/CodeBlock): its label and Copy button over the
   code, a line never wrapped; a long one scrolls inside its box, never the
   page. Focusable, so a keyboard can scroll it. */
.ref .code { min-width: 0; }
.ref .code-label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); font: var(--type-popout-label); color: var(--sub); }
.ref .code pre { margin: 0; max-width: 100%; padding: var(--space-3) var(--space-4); overflow-x: auto; background: var(--page); border: 1px solid var(--line); border-radius: var(--radius-control); font: var(--type-data-popout); color: var(--text); white-space: pre; tab-size: 2; }
.ref .code pre code { padding: 0; background: none; border: 0; font: inherit; white-space: pre; overflow-wrap: normal; }
.ref .code pre:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.ref .copy { padding: var(--space-1) var(--space-3); background: none; border: 1px solid var(--line); border-radius: var(--radius-small); font: var(--type-popout-label); color: var(--link); cursor: pointer; }
.ref .copy:hover { background: var(--page); }
.ref .copy:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.ref .copy[hidden] { display: none; }

/* A phone (and a narrow window): the navigation is a short card at the top,
   two links to a row, each a whole finger tall; facts stack. */
@media (max-width: 860px) {
  .ref .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .ref nav.toc { position: static; max-height: none; overflow: visible; padding: var(--space-4); background: var(--card); border-radius: var(--radius-panel); box-shadow: var(--shadow-card); }
  .ref nav.toc ul { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); }
  .ref nav.toc a { display: flex; align-items: center; min-height: 44px; }
  .ref .facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ref .facts dd { margin-bottom: var(--space-3); }
  .ref .facts dd:last-child { margin-bottom: 0; }
  .ref .card { padding: var(--space-5) var(--space-4); }
  .ref .copy { min-width: 44px; min-height: 44px; }
}