/* ReadyCMS API Docs — small overrides on top of Tailwind Play CDN.
   Keep this lean; prefer Tailwind utility classes in markup. */

:root { color-scheme: light dark; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Anchored headings clear the sticky top bar */
[id] { scroll-margin-top: 5.5rem; }

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---- Prose (guide body) ---- */
.doc-prose { max-width: 48rem; }
.doc-prose h2 { font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size: 1.5rem; line-height: 2rem; margin-top: 2.75rem; margin-bottom: 1rem; scroll-margin-top: 5.5rem; }
.doc-prose h3 { font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size: 1.15rem; line-height: 1.75rem; margin-top: 2rem; margin-bottom: .75rem; scroll-margin-top: 5.5rem; }
.doc-prose p, .doc-prose ul, .doc-prose ol { margin-bottom: 1rem; line-height: 1.75; }
.doc-prose ul { list-style: disc; padding-left: 1.35rem; }
.doc-prose ol { list-style: decimal; padding-left: 1.35rem; }
.doc-prose li { margin-bottom: .35rem; }
.doc-prose li > ul { margin-top: .35rem; margin-bottom: .35rem; }
.doc-prose a { color: #267ae9; text-decoration: none; font-weight: 500; }
.doc-prose a:hover { text-decoration: underline; }
.dark .doc-prose a { color: #389fff; }
.doc-prose strong { font-weight: 700; }
.doc-prose code:not(pre code) {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85em; padding: .12em .38em; border-radius: .3rem;
  background: rgba(38,122,233,.10); color: #071c4d; white-space: nowrap;
}
.dark .doc-prose code:not(pre code) { background: rgba(56,159,255,.14); color: #cbe2ff; }
.doc-prose h2 + p, .doc-prose h3 + p { margin-top: 0; }

/* Tables in prose */
.doc-prose table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .9rem; display: block; overflow-x: auto; }
.doc-prose thead th { text-align: left; font-weight: 600; padding: .55rem .7rem; border-bottom: 2px solid rgba(11,22,63,.12); white-space: nowrap; }
.dark .doc-prose thead th { border-color: rgba(203,226,255,.16); }
.doc-prose tbody td { padding: .55rem .7rem; border-bottom: 1px solid rgba(11,22,63,.08); vertical-align: top; }
.dark .doc-prose tbody td { border-color: rgba(203,226,255,.08); }
.doc-prose tbody tr:hover { background: rgba(38,122,233,.04); }

/* ---- Code blocks ----
   Panel bg must differ from BOTH the white (light) and #010e2b (dark) page
   backgrounds, so it reads as a distinct surface in either theme. */
pre.code { background: #0d1730; color: #e6edff; border: 1px solid rgba(148,163,184,.14); border-radius: .6rem; padding: 1rem 1.1rem; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; line-height: 1.6; }
.dark pre.code { background: #0b1a3a; border-color: rgba(148,163,184,.18); }
pre.code .tok-str { color: #7ee787; }
pre.code .tok-key { color: #79c0ff; }
pre.code .tok-num { color: #f2cc60; }
pre.code .tok-punc { color: #8b98b8; }
pre.code .tok-comment { color: #6b7a99; font-style: italic; }
pre.code .tok-prop { color: #a5d6ff; }

/* Copy button on code */
.code-wrap { position: relative; }
.code-wrap .copy-btn { position: absolute; top: .5rem; right: .5rem; opacity: 0; transition: opacity .15s; }
.code-wrap:hover .copy-btn { opacity: 1; }

/* Sidebar scroll + active */
.sidebar-scroll { scrollbar-width: thin; }
.sidebar-scroll::-webkit-scrollbar { width: 8px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(120,140,180,.35); border-radius: 4px; }

.nav-link.active { color: #267ae9; background: rgba(38,122,233,.09); font-weight: 600; }
.dark .nav-link.active { color: #7fbaff; background: rgba(56,159,255,.12); }

.toc-link.active { color: #267ae9; font-weight: 600; }
.dark .toc-link.active { color: #7fbaff; }

/* Fade-in for injected chrome to avoid flash */
[data-chrome] { opacity: 0; transition: opacity .2s ease; }
[data-chrome].ready { opacity: 1; }