/* docs.css — layout and prose for the documentation pages. Tailwind (CDN) does the rest. */
.docs-nav details { border-radius: 0.75rem; }
.docs-nav summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: 0.55rem 0.75rem; border-radius: 0.6rem; font-weight: 600; color: #e2e8f0; }
.docs-nav summary::-webkit-details-marker { display: none; }
.docs-nav summary:hover { background: rgba(255,255,255,.06); }
.docs-nav details.is-current > summary { color: #c7d2fe; }
.docs-chevron { width: .5rem; height: .5rem; border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8;
  transform: rotate(-45deg); transition: transform .15s ease; margin-right: .25rem; }
.docs-nav details[open] > summary .docs-chevron { transform: rotate(45deg); }
.docs-pages { margin: .15rem 0 .5rem; padding-left: .5rem; border-left: 1px solid rgba(255,255,255,.08); }
.docs-pages a { display: block; padding: .35rem .75rem; border-radius: .5rem; color: #94a3b8; font-size: .875rem; }
.docs-pages a:hover { color: #fff; background: rgba(255,255,255,.05); }
.docs-pages a.is-active { color: #fff; background: rgba(99,102,241,.18); }

.docs-toc-title { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #64748b; margin-bottom: .5rem; }
#docs-toc ul { display: grid; gap: .3rem; }
#docs-toc a { display: block; font-size: .8125rem; color: #94a3b8; padding-left: .75rem; border-left: 1px solid rgba(255,255,255,.08); }
#docs-toc a:hover { color: #fff; border-color: #a5b4fc; }

/* Prose: the content column reads like a manual, not a marketing page. */
.docs-prose { max-width: 48rem; }
.docs-prose h1 { font-size: 2rem; line-height: 1.15; font-weight: 700; color: #fff; margin-bottom: .75rem; }
.docs-prose .lead { font-size: 1.05rem; color: #cbd5e1; margin-bottom: 2rem; }
.docs-prose h2 { font-size: 1.35rem; font-weight: 600; color: #fff; margin: 2.5rem 0 .75rem; scroll-margin-top: 5rem; }
.docs-prose h3 { font-size: 1.05rem; font-weight: 600; color: #e2e8f0; margin: 1.75rem 0 .5rem; scroll-margin-top: 5rem; }
.docs-prose p, .docs-prose li { color: #cbd5e1; line-height: 1.7; }
.docs-prose p { margin: .75rem 0; }
.docs-prose ul { list-style: disc; padding-left: 1.5rem; margin: .75rem 0; }
.docs-prose ol { list-style: decimal; padding-left: 1.5rem; margin: .75rem 0; }
.docs-prose li { margin: .3rem 0; }
.docs-prose a { color: #a5b4fc; text-decoration: underline; text-underline-offset: 3px; }
.docs-prose a:hover { color: #c7d2fe; }
.docs-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875em;
  background: rgba(255,255,255,.08); padding: .1rem .35rem; border-radius: .3rem; color: #e2e8f0; }
.docs-prose pre { position: relative; margin: 1rem 0; padding: 1rem 1.1rem; border-radius: .75rem;
  border: 1px solid rgba(255,255,255,.08); background: #0b1020 !important; overflow-x: auto; font-size: .85rem; line-height: 1.6; }
.docs-prose pre code { background: transparent; padding: 0; font-size: inherit; color: #e2e8f0; }
.docs-copy { position: absolute; top: .5rem; right: .5rem; font-size: .7rem; font-weight: 600; color: #cbd5e1;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: .4rem; padding: .2rem .5rem; }
.docs-copy:hover { background: rgba(255,255,255,.16); color: #fff; }
.docs-prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .875rem; }
.docs-prose th, .docs-prose td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid rgba(255,255,255,.08); vertical-align: top; }
.docs-prose th { color: #e2e8f0; font-weight: 600; }
.docs-prose td { color: #cbd5e1; }
.docs-prose .note { border-left: 3px solid #818cf8; background: rgba(99,102,241,.08); padding: .75rem 1rem; border-radius: 0 .6rem .6rem 0; margin: 1rem 0; }
.docs-prose .note p { margin: .25rem 0; }
.docs-prose .warn { border-left-color: #f59e0b; background: rgba(245,158,11,.08); }
.docs-prose .cards { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 1rem 0; }
.docs-prose .cards a { display: block; padding: 1rem; border-radius: .75rem; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04); text-decoration: none; }
.docs-prose .cards a:hover { border-color: rgba(165,180,252,.5); background: rgba(255,255,255,.06); }
.docs-prose .cards strong { display: block; color: #fff; margin-bottom: .25rem; }
.docs-prose .cards span { color: #94a3b8; font-size: .875rem; }
#docs-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.08); }
#docs-pager a { display: flex; flex-direction: column; gap: .2rem; color: #e2e8f0; text-decoration: none; font-weight: 600; }
#docs-pager a:hover { color: #c7d2fe; }
#docs-pager .docs-pager-next { margin-left: auto; text-align: right; }
.docs-pager-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #64748b; font-weight: 500; }