/* ===== DOCUMENTATION LAYOUT =====
   Everything here is scoped to body.doc-page (docs, capture, capabilities,
   hosting, connect-your-app, api, cli). The homepage, legal pages, models and
   releases keep the marketing layout. Loaded last so it can tighten the
   section rules above it.

   Structure: one continuous cream reading surface, hairline dividers instead
   of alternating bands, left-aligned headings, and, from 1100px up, the
   "On this page" list pinned in a left column beside the content. */

/* ----- Spacing and surface ----- */
body.doc-page > section:not(.docs-hero) {
  padding: 44px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--cream-dark);
}

body.doc-page > .docs-hero + section { border-top: 0; }

body.doc-page .docs-hero {
  padding: 104px 0 28px;
  border-bottom: 0;
}

body.doc-page > section[id] { scroll-margin-top: 64px; }

@media (prefers-reduced-motion: no-preference) {
  html:has(body.doc-page) { scroll-behavior: smooth; }
}

/* ----- Left-aligned headings ----- */
body.doc-page .section-header {
  text-align: left;
  margin-bottom: 22px;
}

body.doc-page .section-label { margin-bottom: 8px; }

body.doc-page .section-title {
  font-size: 1.8rem;
  line-height: 1.25;
}

body.doc-page .section-subtitle {
  text-align: left;
  margin: 8px 0 0;
  max-width: 62ch;
  font-size: 1rem;
}

/* ----- Cards only where they present separate choices -----
   Endpoint and command entries are reference items, not choices: they become
   flat entries separated by a hairline. Concept grids (how/priority/privacy/
   trust/limit cards) stay as cards but get tighter padding. */
body.doc-page .endpoint-card,
body.doc-page .cmd-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--cream-dark);
  border-radius: 0;
  padding: 24px 0 0;
  margin-bottom: 24px;
}

body.doc-page .section-header + .endpoint-card,
body.doc-page .section-header + .cmd-card {
  border-top: 0;
  padding-top: 0;
}

body.doc-page .endpoint-card:last-child,
body.doc-page .cmd-card:last-child { margin-bottom: 0; }

body.doc-page .how-card,
body.doc-page .priority-card,
body.doc-page .privacy-card,
body.doc-page .path-card { padding: 22px 22px; }

body.doc-page .how-card:hover { transform: none; box-shadow: none; }

body.doc-page .how-grid,
body.doc-page .priority-grid,
body.doc-page .trust-grid { gap: 16px; }

body.doc-page .trust-grid { margin-bottom: 20px; }

body.doc-page .config-layout {
  grid-template-columns: 1fr;
  gap: 8px;
}

body.doc-page .config-code-area .code-block { position: relative; top: auto; }
body.doc-page .config-step { margin-bottom: 20px; }

body.doc-page .faq-list { max-width: none; margin: 0; }

/* ----- On this page ----- */
body:is(.doc-page, .legal-page) .docs-toc { margin-top: 20px; padding-top: 18px; }

body:is(.doc-page, .legal-page) .docs-toc a:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (min-width: 1100px) {
  body.doc-page > section .container,
  body.legal-page > section.docs-hero .container,
  body.legal-page > section.container { padding-left: 256px; }

  body:is(.doc-page, .legal-page) .docs-toc {
    position: fixed;
    z-index: 10;
    top: 96px;
    left: max(24px, calc(50% - 536px));
    width: 208px;
    max-height: calc(100vh - 128px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 0;
    animation: none;
    opacity: 1;
    transform: none;
  }

  body:is(.doc-page, .legal-page) .docs-toc::before {
    content: "On this page";
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--moss);
    margin: 0 0 8px 12px;
  }

  body:is(.doc-page, .legal-page) .docs-toc a {
    display: block;
    padding: 5px 8px 5px 12px;
    border-left: 2px solid var(--cream-dark);
    font-size: 0.86rem;
    line-height: 1.35;
    font-weight: 400;
  }

  body:is(.doc-page, .legal-page) .docs-toc a:hover { border-left-color: var(--forest-pale); }

  body:is(.doc-page, .legal-page) .docs-toc a.is-active {
    border-left-color: var(--forest);
    color: var(--forest);
    font-weight: 600;
  }

  /* The footer is a solid band and must cover the pinned list at the bottom. */
  body:is(.doc-page, .legal-page) footer { position: relative; z-index: 20; }
}

@media (max-width: 900px) {
  body.doc-page > section:not(.docs-hero) { padding: 32px 0; }
  body.doc-page .docs-hero { padding: 92px 0 20px; }
  body.doc-page .section-title { font-size: 1.55rem; }
}

/* A notice that sits directly above the content it qualifies. */
body.doc-page .trust-card.doc-notice {
  margin-bottom: 24px;
  padding: 20px 22px;
}

body.doc-page .doc-notice ul li { font-size: 0.92rem; }

/* Inline code on documentation pages: one style everywhere. */
body.doc-page :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--cream-dark);
  padding: 1px 6px;
  border-radius: 4px;
}

body.doc-page :is(h1, h2, h3, h4) > code {
  background: none;
  padding: 0;
  font-size: 0.92em;
}

body.doc-page .compare-table-wrap {
  max-width: none;
  margin: 24px 0 0;
}

body.doc-page .trust-links { text-align: left; }

body.doc-page .doc-notice code { white-space: nowrap; }

/* Dark formula strip: keep its own colours, not the inline-code chip. */
body.doc-page .priority-formula code {
  background: none;
  padding: 0;
  font-size: 0.9rem;
}

/* ===== LEGAL PAGES (privacy, terms) =====
   The policy pages keep their own reading column but borrow the pinned
   "On this page" list. Below 1100px the pinned list is hidden and a compact
   jump list sits under the page title instead. */
body.legal-page .legal-content h2[id] { scroll-margin-top: 80px; }

@media (prefers-reduced-motion: no-preference) {
  html:has(body.legal-page) { scroll-behavior: smooth; }
}

body.legal-page .legal-jump {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--cream-dark);
  font-size: 0.92rem;
}

body.legal-page .legal-jump-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 10px;
}

body.legal-page .legal-jump-quick span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--moss);
  align-self: center;
}

body.legal-page .legal-jump a {
  color: var(--bark-light);
  font-weight: 500;
  text-decoration: none;
}

body.legal-page .legal-jump a:hover { color: var(--forest); }

body.legal-page .legal-jump summary {
  cursor: pointer;
  color: var(--forest);
  font-weight: 600;
}

body.legal-page .legal-jump ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  columns: 2 220px;
  column-gap: 24px;
}

body.legal-page .legal-jump li { padding: 3px 0; break-inside: avoid; }

body.legal-page .legal-jump a:focus-visible,
body.legal-page .legal-jump summary:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (min-width: 1100px) {
  body.legal-page .legal-jump { display: none; }
  /* The pinned list runs down past the hero, so drop the hairline it would cross. */
  body.legal-page .docs-hero { border-bottom: 0; }
  /* Prose keeps its 780px measure; the container is 816px here. */
  body.legal-page .legal-content { max-width: none; margin: 0; }
  body.legal-page .legal-content > :not(table) { max-width: 780px; }
}

@media (max-width: 1099px) {
  body.legal-page .docs-toc { display: none; }
}

/* ===== WIDE REFERENCE TABLES =====
   Prose stays at its own measure; tables with three or more columns may run
   past it to the right, up to 240px, but never closer than 32px to the
   viewport edge (the pinned list sits to the LEFT, so nothing slides under
   it). Below 1280px the tables keep the column width and, on phones, scroll
   inside themselves (responsive.css). */
/* Narrow screens: policy tables scroll inside themselves instead of widening
   the page, and long inline code and grid children wrap or shrink rather than
   push the page sideways. */
@media (max-width: 900px) {
  body.legal-page .legal-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.doc-page :not(pre) > code { overflow-wrap: anywhere; }
  body.doc-page .config-layout > *,
  body.doc-page .config-steps,
  body.doc-page .config-step,
  body.doc-page .config-step > * { min-width: 0; }
  body.doc-page .file-desc { overflow-wrap: anywhere; }
}

@media (min-width: 1280px) {
  body:is(.doc-page, .legal-page) :is(.param-table, .flag-table, .event-table, .error-table, .env-table, .legal-content > table):has(thead th:nth-child(3)) {
    width: calc(100% + clamp(0px, 50vw - 568px, 240px));
    max-width: none;
  }
}

/* Collapsed technical detail inside a doc page */
.doc-details > summary {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--forest);
  cursor: pointer;
  padding: 12px 0;
}
.doc-details > summary:hover { color: var(--bark); }
.doc-details > summary:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.doc-details[open] > summary { margin-bottom: 12px; }