/* ox docs page (/docs). Loaded after styles.css, only on this page.
   The layout primitives (.docs-grid, .docs-nav, .prose, .doc-table, .code)
   live in styles.css; this file adds the hero, the grouped TOC, the section
   heading icons, the per-block copy button, and the scroll-spy state. */

/* ---------- Hero ---------- */
.docs-hero { padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 6vw, 72px); }
.docs-title { font: 600 clamp(44px, 5.4vw, 64px)/1.02 var(--display); letter-spacing: -0.03em; color: var(--ink); }
.docs-lede { margin-top: 20px; max-width: 560px; font-size: 18.5px; line-height: 1.55; color: var(--subtle); text-wrap: pretty; }
.docs-lede code { white-space: nowrap; }
.docs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.docs-actions .btn { height: 42px; padding: 0 16px; font-size: 15px; border-radius: 999px; }
.docs-actions .btn code { background: none; padding: 0; color: inherit; font-size: .92em; }
.docs-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; font-size: 14px; color: var(--subtle); }
.docs-meta span { display: inline-flex; align-items: center; gap: 7px; }
.docs-meta .ic { width: 15px; height: 15px; }

/* ---------- TOC groups ---------- */
.docs-nav-group-label { display: block; margin: 20px 0 7px; font: 500 12px/16px var(--sans); color: var(--subtle); letter-spacing: .02em; }
.docs-nav > .docs-nav-group-label:first-of-type { margin-top: 4px; }
.docs-nav-group a { display: flex !important; align-items: center; gap: 8px; }
.docs-nav-group a .ic { width: 15px; height: 15px; flex: none; color: var(--subtle); transition: color 150ms ease; }
.docs-nav-group a span { overflow-wrap: anywhere; }
.docs-nav-group a:hover .ic, .docs-nav-group a.is-here .ic { color: var(--ink); }
/* Scroll-spy: the section you're reading is marked. */
.docs-nav-group a.is-here { color: var(--ink); border-left-color: var(--ink); }

/* Mobile: the TOC is a single grid (styles.css), groups flatten into it. */
@media (max-width: 880px) {
  .docs-nav-group-label { grid-column: 1 / -1; margin: 14px 0 2px; }
  .docs-nav .docs-nav-label + .docs-nav-group-label { margin-top: 0; }
  .docs-nav-group { display: contents; }
  .docs-nav-group a { border: 0 !important; padding-left: 0 !important; }
}

/* ---------- Section heading icons ---------- */
.prose h2.docs-h, .prose h3[id] { display: flex; align-items: center; gap: 10px; }
.prose h2.docs-h .ic, .prose h3[id] .ic { width: 20px; height: 20px; flex: none; color: var(--ink); }

/* ---------- Per-block copy button ---------- */
.code figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.code-copy { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--night-line); border-radius: 6px; background: transparent; color: var(--night-subtle); font: 500 11.5px/1.4 var(--sans); cursor: pointer; transition: color 150ms ease, border-color 150ms ease; }
.code-copy:hover { color: #F5F5F3; border-color: #3A3A37; }
.code-copy .ic { width: 13px; height: 13px; }
.code-copy.is-copied { color: var(--ok-soft); border-color: var(--ok); }

/* ---------- Hero copy-skill button feedback ---------- */
#copy-ox-skill.is-copied { background: var(--ok); }
#copy-ox-skill:disabled { opacity: 1; cursor: default; }

/* Without JS the per-block buttons never render, and the scroll-spy just
   never activates: the page reads the same either way. */