/* Rove — API reference page. Loaded after base.css, whose header (.site-head),
   eyebrow, lede and footer it shares with the product page. */

body { line-height: 1.6; }

main { max-width: 940px; margin: 0 auto; padding: 0 28px; }

@media (max-width: 720px) {
  main { padding: 0 16px; }
}

.docs {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 48px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 28px 64px;
}

/* Contents: stays in view while the reference scrolls. */
/* Sticky pinned the contents in place but gave them no height, so once the list
   outgrew the viewport its lower half was unreachable: the page scrolled under
   a column that could not. It now scrolls on its own, bounded by what is left
   of the screen below the masthead.

   overscroll-behavior stops a flick that reaches the end of the list from
   carrying on into the page, which is what makes two scrolling regions feel
   like two rather than one that occasionally fights you. */
.docs-toc {
  position: sticky;
  top: calc(var(--head-height) + 16px);
  align-self: start;
  max-height: calc(100vh - var(--head-height) - 16px - var(--space-5));
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: 13.5px;
}
.docs-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.docs-toc ul ul { margin: 4px 0 10px; }
.docs-toc a { display: block; padding: 3px 6px; border-radius: var(--radius-sm); color: var(--text-muted); text-decoration: none; }
.docs-toc a:hover { color: var(--text); background: var(--surface-sunken); }
.toc-group {
  display: block;
  margin-top: 10px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.docs-schema { margin: 18px 0 0; padding: 0 6px; font-size: 12.5px; }

.docs-main { min-width: 0; max-width: 780px; }
.docs-main h1 { margin: 0; font-size: 32px; font-weight: 650; letter-spacing: -0.02em; }
.docs-main .lede { margin: 10px 0 0; }
.docs-main > h2 {
  margin: 48px 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
  scroll-margin-top: calc(var(--head-height) + 8px);
}
.docs-main p { color: var(--text-muted); font-size: 15px; line-height: 1.6; }
.docs-main strong { color: var(--text); }
.docs-main code {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text);
}

.example {
  margin: 0 0 16px;
  padding: 14px 16px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  font-size: 12.5px;
  line-height: 1.6;
}
.example code { padding: 0; background: none; font-size: inherit; }

.op {
  margin: 0 0 28px;
  padding: 20px 22px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  scroll-margin-top: calc(var(--head-height) + 8px);
}
.op h3 { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.op h3 code { background: none; padding: 0; font-size: 14px; overflow-wrap: anywhere; }
.op-title { margin: 6px 0 0; font-size: 17px !important; font-weight: 600; color: var(--text) !important; }
.op h4 {
  margin: 20px 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.method {
  display: inline-block;
  min-width: 3.6em;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  background: var(--accent-soft);
  color: var(--accent);
}
.method-get { background: var(--surface-sunken); color: var(--text-muted); }
.docs-toc .method { min-width: 3.4em; margin-right: 4px; font-size: 10px; }

.fields { width: 100%; margin: 0 0 16px; border-collapse: collapse; font-size: 13.5px; }
.fields td { padding: 8px 10px 8px 0; border-top: 1px solid var(--border); vertical-align: top; color: var(--text-muted); }
.fields td:first-child { white-space: nowrap; color: var(--text); }
.fields .type { font-family: var(--mono); font-size: 12px; color: var(--text-faint); }
.req {
  margin-left: 6px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 860px) {
  /* minmax(0, 1fr), not 1fr: a plain 1fr won't shrink below its widest code
     block, and the whole page scrolled sideways on a phone. */
  .docs { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px 16px 48px; }
  /* Stacked above the content, it is no longer a column beside anything, so
     it scrolls with the page like everything else. One link per line made it
     three screens before any content: each group's links wrap as chips
     instead, and the nine tool names (all under "Tools") are left out. */
  .docs-toc { position: static; max-height: none; overflow-y: visible; }
  .docs-toc > ul { gap: var(--space-2); }
  .docs-toc ul ul { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-1) 0 0; }
  .docs-toc ul ul a { background: var(--surface-sunken); }
  .docs-toc li:has(> a > code) { display: none; }
  /* landing.css centres every <main> with auto margins; on a grid item those
     size it to its content (780px) instead of its column. */
  .docs-main { margin-inline: 0; }
  /* Long identifiers and paths wrap rather than widen the page; code blocks
     (.example) already scroll on their own. */
  .docs-main :not(pre) > code, .fields td { overflow-wrap: anywhere; }
  .fields td:first-child { white-space: normal; }
}

/* Sub-headings within a section (How Rove works, Workflows). */
.docs-main > h3 { margin: 26px 0 8px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }

/* A tool's own description, verbatim: what the agent is told about it. */
.agent-sees {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-sunken);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.agent-sees span {
  display: block;
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.docs-toc li code { font-size: 12px; background: none; padding: 0; color: inherit; }

/* Tabs from radio buttons (no script, so nothing new under the CSP): the
   agents under Connect, and the prompts. Inputs are visually hidden but stay
   focusable, so the tabs work from the keyboard. */
.tabs { margin: 0 0 12px; }
.tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.tabs > label {
  display: inline-block;
  margin: 0 4px 10px 0;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.tabs > label:hover { color: var(--text); border-color: var(--border-strong); }
.tabs > input:checked + label { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.tabs > input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.tabs > label code { background: none; padding: 0; color: inherit; font-size: 12.5px; }

/* Every panel shares one grid cell and only the chosen one is visible: the box
   is as tall as the tallest, so switching never moves what's below. CSS can't
   be generated per tab under the CSP, so each tab is listed here. */
.tab-panels {
  display: grid;
  padding: 14px 16px 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.tab-panel { grid-area: 1 / 1; visibility: hidden; min-width: 0; }
.tab-panel > p:first-child { margin-top: 0; }
.tab-panel .example { margin-bottom: 12px; }
#agent-claude:checked ~ .tab-panels [data-tab="claude"],
#agent-codex:checked ~ .tab-panels [data-tab="codex"],
#agent-vscode:checked ~ .tab-panels [data-tab="vscode"],
#agent-other:checked ~ .tab-panels [data-tab="other"],
#prompt-check_in:checked ~ .tab-panels [data-tab="check_in"],
#prompt-resume:checked ~ .tab-panels [data-tab="resume"] { visibility: visible; }

/* An expandable preview: a prompt's full text, or a sample of the resource. */
.preview { margin: 4px 0 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken); }
.preview > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
}
.preview > summary::-webkit-details-marker { display: none; }
.preview > summary::after { content: "Show"; font-size: 12px; color: var(--accent); }
.preview[open] > summary::after { content: "Hide"; }
.preview > summary:hover { background: var(--surface); border-radius: var(--radius); }
.preview pre {
  margin: 0;
  max-height: 420px;
  overflow: auto;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--border);
  white-space: pre-wrap;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}
.preview-meta { margin: 0 0 8px; font-size: 12.5px !important; color: var(--text-faint) !important; }