/* ── site.css ── */
/* GoRunner docs: the site's page forms (PRESENTATION §2), on top of the system (docs.css). Shell pieces the system
   doesn't own, then one block per form. */

/* ── Shell ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
.home .top .secs, .home .top .search-btn { display: none; }
/* "Steps for" in the page (below 1024): one line sized to its words in every frame (Split's "every child spans the
   frame" must not stretch it); the key fits its longest choice, so switching never moves the "?". */
.doc[data-frame] > [data-ed-spot] { margin: 0 0 var(--s-6); max-width: none; }
[data-ed-spot] .ed { display: inline-flex; width: auto; max-width: 100%; }
[data-ed-spot] .ed-pick, [data-ed-spot] .ed-btn { flex: none; }
[data-ed-spot] .ed-btn { min-width: 132px; }
.side-sec { display: block; }
.foot .checked { margin-left: auto; }
@media (max-width: 1023px) { .foot .checked { margin-left: 0; width: 100%; } }
.since { font: var(--t-small); color: var(--gr-ink-2); }
.since a { color: inherit; }
.mismatch { font: var(--t-small); color: var(--gr-ink-2); margin: calc(-1 * var(--s-5)) 0 var(--s-6); max-width: var(--prose); }
.checked-line { margin-top: var(--s-10); font: var(--t-small); color: var(--gr-ink-2); }
/* A draft in a preview build (SITEMAP §3.7): a Warning band under the title. */
.band-draft { display: block; margin: var(--s-1) 0 var(--s-5); padding: var(--s-2) var(--s-4); background: var(--gr-warn-soft); border-left: 2px solid var(--gr-warn-fill); font: var(--t-small); color: var(--gr-ink); }
.band-draft b { color: var(--gr-warn); }
/* No JavaScript: every group open, the sheet's close key and the search well hidden. */
html:not(.js) .grp > ul { visibility: visible; }
html:not(.js) .grp { grid-template-rows: auto 1fr; }

/* ── Rows (the product's list, PRESENTATION §1.2 "Rows"): title, then "what · time", the whole row a link. A sheet
   (docs.css §8c); two columns from a 928 container, a divider between the columns too. ── */
.rows { max-width: var(--col); }
.rows-2 { display: grid; grid-template-columns: 1fr; }
@container doc (min-width: 928px) {
  .rows-2 { grid-template-columns: 1fr 1fr; }
  .doc .rows-2 > li:nth-child(2) { border-top: 0; }
  .rows-2 > li:nth-child(even) { border-left: 1px solid var(--sheet-rule); }
  /* An odd count: the last row spans both columns, so its divider runs wall to wall and no cell is left empty. */
  .rows-2 > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.sheet-row { max-width: var(--col); margin: var(--s-4) 0 var(--s-6); }
.sheet-row a { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--s-4); padding: var(--s-4) var(--sheet-x); text-decoration: none; transition: background-color var(--dur-quick) var(--ease); }
.sheet-row a:hover { background: var(--sheet-hover); }
.sheet-row a::after { content: ""; grid-row: 1 / span 2; grid-column: 2; width: 16px; height: 16px; background: var(--gr-ink-2); -webkit-mask: var(--i-arrow) center / 16px no-repeat; mask: var(--i-arrow) center / 16px no-repeat; transition: transform var(--dur-base) var(--ease); }
.sheet-row a:hover::after { transform: translateX(2px); }
.sheet-row a:hover b { text-decoration: underline; text-decoration-color: var(--gr-rule-emph); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sheet-row a:focus-visible { outline-offset: -2px; }
.sheet-row b { font-weight: var(--w-strong); }
.sheet-row span { font: var(--t-small); color: var(--gr-muted); }
.inline-links { font: var(--t-small); color: var(--gr-ink-2); }

/* ── Home (PRESENTATION §2.24): Wide, no sidebar; search; the six sections as a 3 × 2 grid; Start here and What's new ── */
.home .doc { padding-top: var(--s-14); }
.home h1 { margin-bottom: var(--s-6); }
.home .ask { max-width: var(--col); }
/* The six sections: one sheet, a 3 × 2 grid with dividers between the cells (rows on a phone). */
.sections-grid { list-style: none; margin: var(--s-12) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; background: var(--sheet); border: 1px solid var(--sheet-edge); border-radius: var(--r-sheet); }
.sections-grid > li { margin: 0; padding: var(--s-5) var(--s-5) var(--s-6); }
.sections-grid > li + li { border-top: 1px solid var(--sheet-rule); }
.sections-grid h2 { font: var(--t-h3); margin: 0 0 var(--s-1); }
.sections-grid h2 a { text-decoration: none; }
.sections-grid h2 a:hover { text-decoration: underline; text-decoration-color: var(--gr-rule-emph); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sections-grid .line { margin: 0 0 var(--s-3); font: var(--t-small); color: var(--gr-muted); max-width: 34ch; }
@container doc (min-width: 728px) { .sections-grid .line { min-height: 40px; } }
.doc .sections-grid ul { list-style: none; margin: 0; padding: 0; }
.sections-grid ul li { margin: 0 0 6px; }
@container doc (min-width: 728px) {
  .sections-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sections-grid > li + li { border-top: 0; }
  .sections-grid > li:nth-child(n+4) { border-top: 1px solid var(--sheet-rule); }
  .sections-grid > li:not(:nth-child(3n+1)) { border-left: 1px solid var(--sheet-rule); }
}
.home-pair { display: grid; grid-template-columns: 1fr; gap: var(--s-8); margin-top: var(--s-12); }
.home-pair h2 { font: var(--t-h3); margin: 0 0 var(--s-3); }
@container doc (min-width: 728px) { .home-pair { grid-template-columns: 1fr 1fr; } }
/* A phone: the sections become rows (name, then line, →), with no task links. */
@container doc (max-width: 727px) {
  .sections-grid ul { display: none; }
  .sections-grid > li { padding: 0 var(--sheet-x); }
  .sections-grid h2 { font: var(--t-body); font-weight: var(--w-strong); margin: 0; }
  .sections-grid h2 a { display: grid; grid-template-columns: 1fr auto; padding: var(--s-3) 0 0; }
  .sections-grid h2 a::after { content: ""; grid-row: 1 / span 2; grid-column: 2; width: 16px; height: 16px; align-self: center; background: var(--gr-muted); -webkit-mask: var(--i-arrow) center / 16px no-repeat; mask: var(--i-arrow) center / 16px no-repeat; }
  .sections-grid .line { margin: 0; padding: 0 0 var(--s-3); max-width: none; }
}

/* ── Filters, tabs and counts (Reference, Errors, Glossary) ── */
.filter-row { position: relative; display: flex; align-items: center; margin: var(--s-6) 0 0; max-width: var(--col); }
.doc[data-frame="wide"] > .filter-row, .doc[data-frame="split"] > .filter-row { max-width: none; }
/* A filter is exactly as wide as its list; its count and its "/" hint sit inside it, at the right. */
.filter-row .field { flex: 1 1 100%; width: 100%; height: 40px; padding-right: 128px; font: var(--t-body); }
.filter-row .field::placeholder { font: var(--t-body); }
.filter-row kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); margin: 0; pointer-events: none; }
.filter-count { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: var(--t-small); color: var(--gr-muted); pointer-events: none; white-space: nowrap; }
.filter-row kbd ~ .filter-count { right: 46px; }
.doc .gl-list, .doc .rows { max-width: var(--col); }
html:not(.js) .filter-row { display: none; }
.band { display: flex; align-items: baseline; gap: var(--s-2); margin: var(--s-10) 0 var(--s-3); font: var(--t-h3); }
.band .count { font: var(--t-small); color: var(--gr-muted); }
.band:first-child { margin-top: var(--s-6); }
.empty-line { padding: var(--s-4) 0; color: var(--gr-ink-2); }
.doc .ref-list + .empty-line, .doc .err-list + .empty-line { margin-top: 0; }

/* ── Reference index (PRESENTATION §2.17): Wide; rows at 52px, the title at left, the machine value right in Mono ── */
.doc .ref-list { list-style: none; margin: 0; padding: 0; max-width: none; }
.ref-list li { margin: 0; }
.ref-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-6); min-height: 52px; padding: var(--s-2) var(--sheet-x); text-decoration: none; transition: background-color var(--dur-quick) var(--ease); }
.ref-list a:hover, .ref-list a.is-hover { background: var(--sheet-hover); }
.ref-list a:focus-visible { outline-offset: -2px; }
.ref-list .t { display: flex; flex-direction: column; min-width: 0; }
.ref-list .t b { font-weight: var(--w-regular); color: var(--gr-ink); }
.ref-list .t span { font: var(--t-small); color: var(--gr-muted); }
.ref-list .v { font: var(--t-code-small); color: var(--gr-muted); text-align: right; white-space: nowrap; }
.ref-list .v .method { min-width: 0; margin-right: 6px; }
.ref-list .v .mid { display: none; }
.ref-list li.dep .t b::after { content: " · deprecated"; color: var(--gr-muted); }
.ref-list li[hidden] { display: none; }
/* Endpoint index rows (critic, 26 Oct): the title keeps room; below a 900px column the method and path go under it,
   so a long title never wraps a word per line or runs under the method */
.ref-list .t { min-width: min(14em, 100%); }
@container doc (max-width: 899px) {
  .ref-list a { grid-template-columns: minmax(0, 1fr); row-gap: 2px; padding-top: var(--s-3); padding-bottom: var(--s-3); }
  .ref-list .v { text-align: left; overflow: hidden; text-overflow: ellipsis; }
}
@container doc (max-width: 727px) {
  .ref-list a { grid-template-columns: minmax(0, 1fr); row-gap: 2px; padding-top: var(--s-3); padding-bottom: var(--s-3); }
  .ref-list .v { text-align: left; overflow: hidden; text-overflow: ellipsis; }
  .ref-list .v .full { display: none; }
  .ref-list .v .mid { display: inline; }
}

/* ── Error codes (PRESENTATION §2.13): two-line rows. Status and code, what to do at the right; the meaning under. ── */
.doc .err-list { list-style: none; margin: 0; padding: 0; max-width: var(--col); }
.err-list.banded .todo { display: none; }
.err-list > li { margin: 0; scroll-margin-top: calc(var(--top-h) + var(--s-6)); }
.err-list > li:target, .err-list > li.is-target { animation: gr-target 1.6s var(--ease) both; }
.err-head { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--s-3); }
.err-head .st-code { font-variant-numeric: tabular-nums; color: var(--gr-ink-2); }
.err-head code { font: var(--t-code); font-weight: var(--w-strong); overflow-wrap: anywhere; }
.err-head code a { text-decoration: none; }
.err-head code a:hover { text-decoration: underline; text-decoration-color: var(--gr-rule-emph); text-underline-offset: 3px; }
.err-head .todo { font: var(--t-small); color: var(--gr-ink-2); white-space: nowrap; }
.err-list p { margin: 4px 0 0 60px; max-width: var(--prose); }
.err-list .where { margin-top: 4px; font: var(--t-small); color: var(--gr-muted); }
.err-list .where a { color: var(--gr-ink-2); }
@container doc (max-width: 727px) {
  .err-head { grid-template-columns: 40px minmax(0, 1fr); }
  .err-head .todo { grid-column: 2; }
  .err-list p { margin-left: 52px; }
}

/* ── Glossary (PRESENTATION §2.16): the term in a 160 column, the definition at reading width, a link at the right ── */
.gl-list { margin: var(--s-4) 0 0; max-width: var(--col); }
.gl-row { display: grid; grid-template-columns: 160px minmax(0, 1fr) 24px; column-gap: var(--s-4); padding: var(--s-4) var(--sheet-x); scroll-margin-top: calc(var(--top-h) + var(--s-6)); }
.gl-row:target, .gl-row.is-target { animation: gr-target 1.6s var(--ease) both; }
.gl-row dt { font-weight: var(--w-strong); margin: 0; }
.gl-row dd { margin: 0; }
.gl-row dd p { margin: 0; }
.gl-row .sub { margin-top: 4px; font: var(--t-small); color: var(--gr-muted); }
.gl-row .go { display: flex; justify-content: flex-end; padding-top: 4px; }
.gl-row .go a { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; color: var(--gr-muted); border-radius: var(--r-control); }
.gl-row .go a:hover { color: var(--gr-ink); background: var(--gr-hover); }
.gl-row .go svg { width: 16px; height: 16px; }
@container doc (max-width: 727px) { .gl-row { grid-template-columns: minmax(0, 1fr) 24px; } .gl-row dt { grid-column: 1; } .gl-row dd { grid-column: 1; } .gl-row .go { grid-column: 2; grid-row: 1; } }

/* ── Changelog (PRESENTATION §2.15): version and date hang left in a 160 lane, the entry in the Read column ── */
/* Entries are prose: no rule above or below them (C-PLAN §1.7); the version lane and the gap set them apart. */
.cl-entry { position: relative; padding: var(--s-6) 0 var(--s-6); scroll-margin-top: calc(var(--top-h) + var(--s-6)); }
.cl-entry + .cl-entry { margin-top: var(--s-6); }
.cl-entry:first-of-type { margin-top: var(--s-4); }
.cl-entry h2 { margin: 0 0 var(--s-2); }
.cl-entry h2 a { text-decoration: none; }
.cl-entry h2 a:hover { text-decoration: underline; text-decoration-color: var(--gr-rule-emph); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cl-entry h3 { font: var(--t-small); font-weight: var(--w-strong); margin: var(--s-4) 0 var(--s-1); color: var(--gr-ink); }
.cl-entry ul { margin: 0; }
.cl-meta { font: var(--t-small); color: var(--gr-muted); margin: 0 0 var(--s-2); }
.cl-meta code { font: var(--t-code-small); color: var(--gr-ink); }
.cl-lane { display: none; }
@container doc (min-width: 1048px) {
  .cl-lane { display: block; position: absolute; top: var(--s-6); right: calc(100% + var(--s-6)); width: 160px; font: var(--t-small); color: var(--gr-muted); }
  .cl-lane code { display: block; font: var(--t-code); color: var(--gr-ink); }
  .cl-entry .cl-meta { display: none; }
}
.cl-older { margin-top: var(--s-12); }
.cl-older h3 { font: var(--t-small); color: var(--gr-muted); font-weight: var(--w-regular); margin: var(--s-6) 0 var(--s-2); }
.rel-install { margin-top: var(--s-2); }

/* ── All pages ── */
.ap-section { margin-top: var(--s-10); }
.ap-section h2 { margin: 0 0 var(--s-1); }
.ap-section h2 a { text-decoration: none; }
.ap-groups { columns: 1; column-gap: var(--s-8); margin-top: var(--s-4); }
@container doc (min-width: 728px) { .ap-groups { columns: 2; } }
@container doc (min-width: 1000px) { .ap-groups { columns: 3; } }
.ap-group { break-inside: avoid; margin: 0 0 var(--s-6); }
.ap-group h3 { font: var(--t-small); font-weight: var(--w-strong); margin: 0 0 var(--s-1); color: var(--gr-ink); }
.doc .ap-group ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.ap-group li { margin: 0; padding: 3px 0; font: var(--t-small); }
.ap-group li.pending a { color: var(--gr-ink-2); text-decoration-style: dotted; }
.ap-legend { font: var(--t-small); color: var(--gr-muted); }

/* ── 404 and the "isn't in the prototype" note ── */
.nf-closest { margin-top: var(--s-8); }
.nf-closest h2, .pending-note h2 { font: var(--t-h3); margin: 0 0 var(--s-3); }
.rows .sec { font: var(--t-small); color: var(--gr-muted); }
.rows a.with-sec { grid-template-columns: 1fr auto auto; }
.rows a.with-sec::after { grid-column: 3; }
.pending-note { margin-top: var(--s-6); padding: var(--s-4) var(--sheet-x); background: var(--sheet); border: 1px solid var(--sheet-edge); max-width: var(--col); }
.pending-note p { margin: 0 0 var(--s-3); }
.pending-note p:last-child { margin: 0; }
.pending-note .addr { font: var(--t-code-small); color: var(--gr-ink-2); overflow-wrap: anywhere; }

/* ═══ Apps and MCP (PRESENTATION §2.25, §2.10, §2.5): moved from lib/apps/css.mjs ═══ */
/* ── App gallery (PRESENTATION §2.25): Wide; group bands with counts; a 4-column logo grid; list rows on a phone ── */
.ag-tabs { margin-top: var(--s-4); }
.ag-band { display: flex; align-items: baseline; gap: var(--s-2); margin: var(--s-10) 0 var(--s-3); font: var(--t-h3); }
.ag-band .count { font: var(--t-small); color: var(--gr-muted); }
.ag-sec:first-of-type .ag-band { margin-top: var(--s-6); }
.doc .ag-grid { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s-6); row-gap: var(--s-2); }
.ag-grid li { margin: 0; min-width: 0; }
.ag-grid a { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--s-3); align-items: start; min-height: 72px; padding: var(--s-3); margin: 0 calc(-1 * var(--s-3)); text-decoration: none; border-radius: var(--r-control); transition: background-color var(--dur-quick) var(--ease); }
.ag-grid a:hover { background: var(--gr-hover); }
.ag-grid a:focus-visible { outline-offset: -2px; }
.ag-grid .tile { grid-row: 1 / span 2; margin-top: 2px; }
.ag-grid b { font-weight: var(--w-strong); color: var(--gr-ink); overflow-wrap: anywhere; }
.ag-grid .d { font: var(--t-small); color: var(--gr-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ag-also { margin: var(--s-3) 0 0; font: var(--t-small); color: var(--gr-ink-2); }
.ag-not { margin-top: var(--s-12); }
.ag-sec[hidden], .ag-grid li[hidden] { display: none; }
@container doc (max-width: 1000px) { .doc .ag-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container doc (max-width: 759px) { .doc .ag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container doc (max-width: 519px) {
  .doc .ag-grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .doc .ag-grid { background: var(--sheet); border: 1px solid var(--sheet-edge); }
  .ag-grid li + li { border-top: 1px solid var(--sheet-rule); }
  .ag-grid a { min-height: 64px; align-items: center; padding: var(--s-2) var(--sheet-x); margin: 0; border-radius: 0; }
  .ag-grid a:hover { background: var(--sheet-hover); }
  .ag-grid .d { -webkit-line-clamp: 1; }
}

/* ── An app page's head: the 40px tile beside the name (PRESENTATION §2.10) ── */
h1 .app-h { display: inline-flex; align-items: center; gap: var(--s-4); }
h1 .app-h .tile { width: 40px; height: 40px; }

/* ── Triggers: one row each; the name, what starts it, then its settings ── */
.tr-row { margin: var(--s-8) 0 0; }
.tr-row h3 { margin: 0 0 var(--s-1); }
.tr-row > p { margin: 0 0 var(--s-3); }

/* ── Actions: the resource × action matrix. A whole row opens its fields in the side panel. ── */
/* (a sheet: docs.css §8c) */
.doc .am { list-style: none; margin: var(--s-4) 0 0; padding: 0; max-width: var(--col); }
.am li { margin: 0; }
.am a { display: grid; grid-template-columns: 136px minmax(0, 1fr) 16px; column-gap: var(--s-4); align-items: start; padding: var(--sheet-y) var(--sheet-x); text-decoration: none; transition: background-color var(--dur-quick) var(--ease); }
.am a:hover { background: var(--sheet-hover); }
.am a:focus-visible { outline-offset: -2px; }
.am a[aria-current] { background: var(--sheet-hover); }
.am b { font-weight: var(--w-strong); color: var(--gr-ink); overflow-wrap: anywhere; }
.am .ops { color: var(--gr-ink-2); max-width: var(--prose); }
.am .ops .op { white-space: nowrap; }
.am .ops .sep { color: var(--gr-muted); }
.am a::after { content: ""; width: 16px; height: 16px; margin-top: 5px; background: var(--gr-muted); -webkit-mask: var(--i-arrow) center / 16px no-repeat; mask: var(--i-arrow) center / 16px no-repeat; transition: transform var(--dur-base) var(--ease); }
.am a:hover::after { transform: translateX(2px); }
@container doc (max-width: 559px) { .am a { grid-template-columns: minmax(0, 1fr) 16px; } .am .ops { grid-column: 1; } .am a::after { grid-column: 2; grid-row: 1; } }

/* ── Fields (in the side panel, and at the end of the page without JavaScript) ── */
.af { margin: 0 0 var(--s-6); max-width: none; }

.af dt { font-weight: var(--w-strong); }
.af dt .req { font: var(--t-small); font-weight: var(--w-regular); color: var(--gr-muted); margin-left: var(--s-2); }
.af dd { margin: 2px 0 0; font: var(--t-small); color: var(--gr-ink-2); }
.af dd p { margin: 0 0 2px; max-width: none; }
.af .opt { color: var(--gr-muted); }
.af-op { font: var(--t-h3); margin: var(--s-6) 0 var(--s-2); }
.af-op:first-child { margin-top: 0; }
.af-empty { font: var(--t-small); color: var(--gr-muted); margin: 0 0 var(--s-6); }
html.js .fields-nojs { display: none; }
.fields-nojs h3 { margin-top: var(--s-8); }


/* ── Small pieces of the app page ── */
.app-not { margin-top: var(--s-10); font: var(--t-small); color: var(--gr-ink-2); }
.app-start-line { margin-top: var(--s-4); color: var(--gr-ink-2); }

/* ── MCP: the AI apps logo grid (PRESENTATION §2.5): labelled rows, tiles of mark + name ── */
.aig-group { margin: var(--s-6) 0 0; }
.aig-group h2, .aig-group h3 { font: var(--t-small); font-weight: var(--w-regular); color: var(--gr-muted); margin: 0 0 var(--s-2); }
.doc .aig { list-style: none; margin: 0; padding: 0; max-width: var(--col); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.aig li { margin: 0; min-width: 0; }
.aig a { display: flex; align-items: center; gap: var(--s-3); height: 48px; padding: 0 var(--s-3); border: 1px solid var(--gr-rule); border-radius: var(--r-control); background: var(--gr-card); text-decoration: none; color: var(--gr-ink); transition: background-color var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease); }
.aig a:hover { background: var(--gr-hover); border-color: var(--gr-rule-strong); }
.aig a:focus-visible { outline-offset: 2px; }
.aig .mk { width: 20px; height: 20px; flex: none; }
.aig span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container doc (max-width: 559px) { .doc .aig { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container doc (max-width: 359px) { .doc .aig { grid-template-columns: minmax(0, 1fr); } }

/* ── An AI app page: the app's mark beside its name ── */
h1 .ai-h { display: inline-flex; align-items: center; gap: var(--s-3); }
h1 .ai-h .mk { width: 32px; height: 32px; }
.ai-what { margin-top: var(--s-4); }
.ai-what li { margin: 0 0 var(--s-1); }

html:not(.js) .ag-tabs { display: none; }

/* ── The page head (crumbs and ⋯, title, lede, meta) starts at the content's left edge in every frame: Read, Wide
   and Split (SYSTEM §1.4). The crumbs row spans the frame, so ⋯ sits at the content's right edge. ── */
/* The home: what GoRunner is, the search, Start here, then the six sections, then what's new */
.home .lede { margin: 0 0 var(--s-6); }
.home .hp-start { margin-top: var(--s-8); max-width: var(--col); }
.home .hp-start h2, .home .hp-new h2 { font: var(--t-h3); margin: 0 0 var(--s-3); }
.home .hp-new { margin-top: var(--s-10); max-width: var(--col); }
/* Gmail-style operation lists end with room before the text that follows */
.doc .am { margin-bottom: var(--s-6); }

/* ── css/ai-api.css ── */
/* MCP and API guides (pages/mcp, pages/api guides). */

/* A code bar's long file name (PRESENTATION §2.11): on a phone the folder is cut with an ellipsis and the file's own
   name stays whole, so it never runs under Copy. Markup: .file.mid > .f-dir + .f-base (pages/mcp/mcp.mjs). */
.code-bar .file.mid { display: flex; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.code-bar .file.mid .f-dir { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-bar .file.mid .f-base { flex: none; white-space: nowrap; }

/* The API landing (PRESENTATION §2.23) in the Wide frame: Start here at the width of the 2-column task sheet and the
   endpoint list below, so the first screen has one width. (docs.css widens only .rows-2 for a wide landing.) */
body[data-section="api"] .doc[data-frame="wide"] .landing .sheet-row { max-width: none; }

/* ── css/build-a.css ── */
/* Build A: the Build section's start and building pages (pages/build/*, lib/groups/build-a.mjs) */

/* Old heading ids kept as aliases (SITEMAP §1.10.4): an empty anchor right before the heading that took their place */
.ba-alias { display: block; height: 0; overflow: hidden; scroll-margin-top: calc(var(--top-h) + var(--s-8)); }

/* Tables (PRESENTATION §2.12): an error code stays whole; the line may break only between the status and the code */
.ba-nw { white-space: nowrap; }

/* A product replay with a one-line caption (/build/use-data-from-earlier-steps): no step number before the line */
.rp-steps.ba-one li { grid-template-columns: 1fr; }
.rp-steps.ba-one li::before { content: none; }

/* ── css/build-b.css ── */
/* Build B: the Build section's Keel, Monitor, Your organization, Troubleshoot and Reference pages (pages/build/*,
   lib/groups/build-b.mjs) */

/* The keyboard shortcuts list (PRESENTATION §2.14): titled key / action sheets, in two columns in the Wide frame. Each
   group is one sheet (SYSTEM §8c); a group never splits across columns. */
.bb-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-8); align-items: start; margin-top: var(--s-6); }
.bb-keys > .sheet { margin: 0; }
.bb-keys .defs { margin: 0; max-width: none; grid-template-columns: 168px minmax(0, 1fr); }
.bb-keys .defs dt { font-weight: var(--w-regular); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.bb-keys .defs dt kbd + kbd { margin-left: 0; }
.bb-keys .defs dd { font: var(--t-small); align-self: center; }
.bb-or { font: var(--t-small); color: var(--gr-muted); }
@container doc (max-width: 959px) { .bb-keys { grid-template-columns: minmax(0, 1fr); } }
@container doc (max-width: 727px) { .bb-keys .defs { grid-template-columns: minmax(0, 1fr); } }

/* Generated tables (Triggers, Events): a muted second line in a cell */
.bb-sub { font: var(--t-small); color: var(--gr-muted); }
.bb-triggers { table-layout: fixed; min-width: 760px; }
.bb-triggers th:nth-child(1) { width: 19%; } .bb-triggers th:nth-child(2) { width: 30%; } .bb-triggers th:nth-child(3) { width: 24%; }
.bb-triggers td code { overflow-wrap: anywhere; }
/* The events catalogue: two columns; the name on one line, its exceptions (Streaming only, High volume) under it */
.bb-cat td:first-child { width: 344px; }
.bb-cat .nm code { white-space: nowrap; overflow-wrap: normal; }
.bb-cat .bb-sub { display: block; margin-top: 2px; }

/* A tab strip over whole panels (event streaming's destination kinds) */
.bb-pane { margin-top: var(--s-4); }
.bb-pane:focus-visible { outline-offset: 4px; }
.bb-pane > :first-child { margin-top: 0; }

/* ── css/embed.css ── */
/* ── Embed section (pages/embed/**, lib/groups/embed.mjs) ── */

/* Old heading ids kept as aliases (SITEMAP §1.10.4): an empty anchor right before the heading that took their place. */
.em-alias { display: block; height: 0; overflow: hidden; scroll-margin-top: calc(var(--top-h) + var(--s-8)); }

/* PRESENTATION §2.12, a Wide page (switches, events): its definition sheets span the frame like its catalogue and
   tables, so every sheet on the page ends at one right edge. Their text still stops at the prose measure. */
.doc[data-frame="wide"] .defs.em-full { max-width: none; }

/* ── css/endpoints.css ── */
/* ── Endpoint pages (PRESENTATION §2.11; pages/api/**, pages/embed/api/**, lib/groups/endpoints.mjs) ── */

/* A partner page's edition line: the section's meta line, moved under the signature, the line and Needs, so the head
   reads as a public endpoint's does (title, signature, line). */
.ep-needs + .meta.ep-ed { margin: calc(-1 * var(--s-2)) 0 var(--s-4); }

/* The codes every call shares, in one line under an endpoint's own responses. */
.ep-any { color: var(--gr-ink-2); }
.ep-any a { white-space: nowrap; }

.doc .resp + .ep-any { margin-top: var(--s-3); }

/* A section without code of its own runs on in the pair above it (lib/groups/endpoints.mjs addPair): the same break
   as between two pairs. */
.ep-sec .l > h2.ep-more { margin-top: var(--s-12); }

/* "Every field" (lib/groups/endpoints.mjs everyField): the closed fold with every field of the body and the answer.
   A nested field steps in under the row that holds it, one step per level (data-depth, at most 5). A heading names
   each list: Body, Response · 200 OK. */
.params.every > div { --every-d: 0; }
.params.every > div[data-depth="1"] { --every-d: 1; }
.params.every > div[data-depth="2"] { --every-d: 2; }
.params.every > div[data-depth="3"] { --every-d: 3; }
.params.every > div[data-depth="4"] { --every-d: 4; }
.params.every > div[data-depth="5"] { --every-d: 5; }
/* Each list sits under its plain heading with a gap, not a rule (the sheet law: a list in the middle of a fold would
   otherwise draw a rule above and below itself); the fold is the sheet, its rows divide inside. */
.fold-body.fold-body > .params.every { border-width: 0; margin: 0 0 var(--s-3); }
.fold-body.fold-body > .params.every:last-child { margin-bottom: 0; }
.fold-body.fold-body > .params.every > div { padding-left: calc(var(--sheet-x) + 26px + var(--every-d) * var(--s-4)); }
@media (max-width: 560px) { .fold-body.fold-body > .params.every > div { padding-left: calc(var(--sheet-x) + 26px + var(--every-d) * var(--s-2)); } }
.fold-body > h3.every-h { font: var(--t-small); font-weight: var(--w-strong); color: var(--gr-ink-2); margin-top: var(--s-4); margin-bottom: var(--s-2); } /* as .ep-sec h3 (Path, Query, Body) */
.fold-body > h3.every-h:first-child { margin-top: var(--s-3); }

/* ── css/self-host.css ── */
/* ── Self-host section (pages/self-host/**, lib/groups/self-host.mjs) ── */

/* Old heading ids kept as aliases (SITEMAP §1.10.4): an empty anchor right before the heading that took their place. */
.sh-alias { display: block; height: 0; overflow: hidden; scroll-margin-top: calc(var(--top-h) + var(--s-8)); }

/* The license timeline (PRESENTATION §2.8's lifecycle strip, drawn as a line figure) */
.sh-timeline .fig-wide { margin: 0 auto; }


/* Command steps grouped under a variant's h2 (PRESENTATION §2.2: /self-host/uninstall's Docker and Kubernetes runs) */
.cmd-step h3 { margin: 0 0 var(--s-3); scroll-margin-top: calc(var(--top-h) + var(--s-6)); }
.cmd-step h3 .n { position: static; display: inline; width: auto; padding: 0 .35em 0 0; }

/* Flag tables (/self-host/settings): a variable's name stays on one line */
.sh-flags td:nth-child(2) code { white-space: nowrap; }
.sh-flags td:nth-child(2) wbr { display: none; }

/* Troubleshooting (PRESENTATION §2.18): the symptom index and every sheet below it end at the Why/Fix blocks' edge */
body[data-section="self-host"][data-type="tbl"] .doc :is(ul.symptoms, .tbl-wrap, dl.defs) { max-width: calc(var(--prose) + 52px); }

/* ── css/site.css ── */
/* ── Apps, Changelog and the site-wide pages (Reference, Error codes, Glossary, All pages): this group's own rules.
   The forms several sections share are in _src/site.css. ── */

/* Reference (PRESENTATION §2.17): a row's title has the weight of every other row title (ul.rows, SYSTEM §8c) */
[data-ref-list] .ref-list .t b { font-weight: var(--w-strong); }

/* The gallery tile's line (PRESENTATION §2.25): the app's one line, at most two lines, one on a phone. Its class is
   .ln, not .d, which the Markdown twin skips as a dark capture. */
.ag-grid .ln { font: var(--t-small); color: var(--gr-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@container doc (max-width: 519px) {
  .ag-grid .ln { -webkit-line-clamp: 1; }
}

/* The gallery's one question sits apart from the last category, as a section would */
[data-ag-empty] + .q-sheet { margin-top: var(--s-10); }