/* docs.css — /docs and /extension. Extends page.css + lab-page.css: adds the
   page motif banner, the anchored docs rail, code blocks with a copy
   affordance, and numbered install steps. One accent per page, set by
   --page-accent on <main>. */

.dp--extension { --page-accent: var(--page-imports); }
.dp--docs { --page-accent: var(--page-library); }

.section-label--page { color: var(--page-accent); }

/* ---------------------------- the motif banner --------------------------- */
.page-motif {
  margin: 4px 0 44px;
  border: 1px solid var(--hairline);
  background: var(--void);
  overflow: hidden;
}
.page-motif img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------------------------- prose ------------------------------------- */
.doc-p {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--dim);
  line-height: 1.62;
  max-width: 62ch;
  margin-bottom: 14px;
}
.doc-p:last-child { margin-bottom: 0; }
.doc-p strong { color: var(--ink); font-weight: 600; }
.doc-p a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border);
}
.doc-p a:hover { text-decoration-color: var(--ink); }

.inline-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--dim);
}

.doc-note {
  margin: 20px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--page-accent);
  background: var(--panel);
  font-size: var(--fs-small);
  color: var(--dim);
  line-height: 1.6;
  max-width: 760px;
}
.doc-note strong { color: var(--ink); font-weight: 600; }

.doc-flag {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--yellow);
  border: 1px solid color-mix(in srgb, var(--yellow) 40%, var(--border));
  vertical-align: middle;
}

/* ---------------------------- code blocks -------------------------------- */
.cb {
  position: relative;
  margin: 20px 0;
  border: 1px solid var(--hairline);
  background: var(--panel);
}
.cb-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--faint);
  border-bottom: 1px solid var(--hairline);
}
.cb pre {
  overflow-x: auto;
  padding: 14px 16px;
  -webkit-overflow-scrolling: touch;
}
.cb code {
  display: block;
  white-space: pre;
  font-family: var(--font-mono);
  font-size: var(--fs-code);
  line-height: var(--lh-code);
  color: var(--code-plain);
}
.cb .c { color: var(--code-comment); }
.cb .s { color: var(--code-str); }
.cb .k { color: var(--code-kw); }

.cb-copy {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 5px 9px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  background: var(--bg);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: color var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out);
}
.cb-copy:hover { color: var(--ink); }
.cb-copy[data-copied="true"] {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 45%, var(--border));
}
.cb--titled .cb-copy { top: 5px; }

/* ---------------------------- numbered steps ----------------------------- */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 8px 0 0;
  border: 1px solid var(--hairline);
}
.steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0 16px;
  padding: 22px 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}
.steps > li:last-child { border-bottom: 0; }
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--page-accent);
  padding-top: 2px;
}
.step-body { min-width: 0; }
.step-body .doc-p { max-width: 58ch; }
.step-body .cb { margin-bottom: 0; }

@media (max-width: 620px) {
  .steps > li { grid-template-columns: 30px 1fr; gap: 0 10px; padding: 20px 14px; }
}

/* ---------------------------- docs layout -------------------------------- */
.docs-layout {
  display: grid;
  gap: 32px;
  align-items: start;
}
/* grid items default to min-width:auto, which lets a wide code block push the
   column past the viewport instead of scrolling inside itself */
.docs-layout > * { min-width: 0; }
@media (min-width: 940px) {
  .docs-layout {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 64px;
  }
  .docs-rail {
    position: sticky;
    top: 104px;
  }
}

.docs-rail ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
}
@media (min-width: 940px) {
  .docs-rail ol { display: block; }
}
.docs-rail a {
  display: block;
  padding: 7px 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--faint);
  border-left: 1px solid var(--hairline);
  transition: color var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out);
}
.docs-rail a:hover { color: var(--ink); }
.docs-rail a.is-current {
  color: var(--ink);
  border-left-color: var(--page-accent);
}

.doc-sec {
  padding-top: 72px;
  scroll-margin-top: 84px;
}
.doc-sec:first-child { padding-top: 0; }
.doc-sec .section-title { margin-bottom: 14px; }

.doc-sub {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 34px 0 12px;
}

/* the feature rows from page.css, narrowed for the docs column */
.doc-sec .feature-row { padding: 22px 20px; }
@media (min-width: 700px) {
  .doc-sec .feature-row { grid-template-columns: 170px 1fr; gap: 24px; }
}

.doc-close { padding-top: 72px; }