/* ── Doc Content (markdown rendering) ── */
.doc-content h1 { font-family: var(--font-display); font-size: 28px; letter-spacing: 1.5px; margin: 0 0 16px 0; color: var(--yt-text); }
.doc-content h2 { font-family: var(--font-display); font-size: 22px; letter-spacing: 1px; margin: 32px 0 12px 0; color: var(--yt-text); padding-bottom: 8px; border-bottom: 1px solid var(--yt-border); }
.doc-content h3 { font-family: var(--font-body); font-size: 16px; font-weight: 700; margin: 24px 0 8px 0; color: var(--yt-text); }
.doc-content h4 { font-family: var(--font-body); font-size: 14px; font-weight: 600; margin: 20px 0 6px 0; color: var(--yt-text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.doc-content p { font-size: 14px; line-height: 1.7; color: var(--yt-text-muted); margin: 0 0 12px 0; }
.doc-content a { color: var(--yt-blue); text-decoration: none; }
.doc-content a:hover { text-decoration: underline; }
.doc-content strong { color: var(--yt-text); }
.doc-content em { font-style: italic; }
.doc-content hr { border: none; border-top: 1px solid var(--yt-border); margin: 24px 0; }

/* Tables */
.doc-content table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; }
.doc-content th { text-align: left; padding: 10px 14px; font-size: 12px; font-weight: 600; color: var(--yt-text-muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--yt-border); }
.doc-content td { padding: 10px 14px; border-bottom: 1px solid var(--yt-border); color: var(--yt-text-muted); }
.doc-content tr:hover td { background: var(--yt-hover); }

/* Inline code */
.doc-content code { font-family: 'SF Mono', 'Menlo', 'Consolas', monospace; font-size: 12px; background: rgba(56, 139, 253, 0.1); color: var(--yt-blue); padding: 2px 6px; border-radius: 4px; }

/* Fenced code blocks */
.doc-content pre.highlight { background: #0d1117; border: 1px solid var(--yt-border); border-radius: 8px; padding: 16px; margin: 16px 0; overflow-x: auto; }
.doc-content pre.highlight code { background: transparent; color: #e6edf3; padding: 0; font-size: 13px; line-height: 1.6; }

/* Rouge syntax highlighting (GitHub dark theme) */
.doc-content .highlight .k, .doc-content .highlight .kd, .doc-content .highlight .kn, .doc-content .highlight .kp, .doc-content .highlight .kr { color: #ff7b72; }
.doc-content .highlight .n, .doc-content .highlight .nb { color: #e6edf3; }
.doc-content .highlight .nc, .doc-content .highlight .no { color: #ffa657; }
.doc-content .highlight .nf, .doc-content .highlight .ni { color: #d2a8ff; }
.doc-content .highlight .s, .doc-content .highlight .s1, .doc-content .highlight .s2, .doc-content .highlight .se { color: #a5d6ff; }
.doc-content .highlight .ss { color: #a5d6ff; }
.doc-content .highlight .si { color: #a5d6ff; }
.doc-content .highlight .c, .doc-content .highlight .c1, .doc-content .highlight .cm, .doc-content .highlight .cp { color: #8b949e; font-style: italic; }
.doc-content .highlight .mi, .doc-content .highlight .mf, .doc-content .highlight .mh { color: #79c0ff; }
.doc-content .highlight .o, .doc-content .highlight .p { color: #e6edf3; }
.doc-content .highlight .nt { color: #7ee787; }
.doc-content .highlight .na { color: #79c0ff; }
.doc-content .highlight .vi, .doc-content .highlight .vc, .doc-content .highlight .vg { color: #ffa657; }

/* Lists */
.doc-content ul, .doc-content ol { margin: 8px 0 16px 0; padding-left: 24px; }
.doc-content li { font-size: 14px; line-height: 1.7; color: var(--yt-text-muted); margin-bottom: 4px; }
.doc-content li code { font-size: 12px; }

/* Blockquotes */
.doc-content blockquote { border-left: 3px solid var(--yt-red); margin: 16px 0; padding: 8px 16px; background: var(--yt-hover); border-radius: 0 8px 8px 0; }
.doc-content blockquote p { margin: 0; color: var(--yt-text-muted); }

/* ── Code Tabs ── */
.code-tabs { margin: 16px 0; border: 1px solid var(--yt-border); border-radius: 8px; overflow: hidden; }
.code-tabs-bar { display: flex; background: #161b22; border-bottom: 1px solid var(--yt-border); overflow-x: auto; }
.code-tab { padding: 8px 16px; font-size: 12px; font-weight: 600; font-family: var(--font-body); color: var(--yt-text-muted); background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: all 0.15s; text-transform: capitalize; }
.code-tab:hover { color: var(--yt-text); background: rgba(255,255,255,0.04); }
.code-tab--active { color: white; border-bottom-color: var(--yt-blue); }
.code-tabs-panel pre.highlight { margin: 0; border: none; border-radius: 0; }
.code-tabs-panel .code-block { position: relative; }
.code-tabs-panel .code-block pre.highlight { margin: 0; border: none; border-radius: 0; }

/* ── Code Copy Button ── */
.code-block { position: relative; }
.code-copy { position: absolute; top: 8px; right: 8px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: var(--yt-text-muted); cursor: pointer; opacity: 0; transition: all 0.15s; }
.code-block:hover .code-copy { opacity: 1; }
.code-copy:hover { background: rgba(255,255,255,0.12); color: var(--yt-text); border-color: rgba(255,255,255,0.2); }
.code-copy--copied { opacity: 1; color: var(--yt-green, #2ba640); border-color: var(--yt-green, #2ba640); }

/* ── Light Theme: darker doc side nav + body text ── */
html[data-theme="light"] .docs-sidebar-link { color: #374151; }
html[data-theme="light"] .docs-sidebar-link:hover { color: #1f2328; }
html[data-theme="light"] .docs-sidebar-link--active { color: #1f2328; }

/* Darker doc body text */
html[data-theme="light"] .doc-content p,
html[data-theme="light"] .doc-content li,
html[data-theme="light"] .doc-content td,
html[data-theme="light"] .doc-content blockquote p { color: #1f2328; }

/* ── Light Theme: keep code blocks dark ── */
html[data-theme="light"] .doc-content code { background: rgba(31,35,40,0.06); color: #0550ae; }
html[data-theme="light"] .doc-content pre.highlight { border-color: #30363d; }
html[data-theme="light"] .doc-content pre.highlight code { background: transparent; color: #e6edf3; }

html[data-theme="light"] .code-copy { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: #8b949e; }
html[data-theme="light"] .code-copy:hover { background: rgba(255,255,255,0.12); color: #e6edf3; border-color: rgba(255,255,255,0.2); }

html[data-theme="light"] .code-tabs-bar { background: #161b22; border-bottom-color: #30363d; }
html[data-theme="light"] .code-tab { color: #8b949e; }
html[data-theme="light"] .code-tab:hover { color: #e6edf3; background: rgba(255,255,255,0.04); }
html[data-theme="light"] .code-tab--active { color: #ffffff; }

html[data-theme="light"] .docs-base-url { background: #0d1117; color: #58a6ff; border-color: #30363d; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .doc-content h1 { font-size: 22px; }
  .doc-content h2 { font-size: 18px; margin: 24px 0 10px 0; }
  .doc-content h3 { font-size: 15px; }
  .doc-content pre.highlight { padding: 12px; font-size: 12px; }
  .doc-content pre.highlight code { font-size: 12px; }
  .doc-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .code-copy { opacity: 1; }
  .code-tab { padding: 6px 10px; font-size: 11px; }
}