/* Custom overrides on top of Tailwind CDN. Keep minimal — most styling is utility classes inline in HTML. */ html { scroll-padding-top: 4rem; } /* overflow-x MUST stay on body only — adding it to creates a new scroll container and silently breaks position:sticky on every element in the page */ body { overflow-x: hidden; } /* ── Install / Update / Uninstall cards: prevent code blocks pushing out ── */ .install-card, .update-card, .uninstall-card { min-width: 0; } .install-card pre, .update-card pre, .uninstall-card pre { min-width: 0; max-width: 100%; } .install-card pre code, .update-card pre code, .uninstall-card pre code { word-break: break-all; white-space: pre-wrap; word-wrap: break-word; } /* Markdown rendering (guideline.html / changelog.html) */ .prose-content { max-width: 64rem; margin: 0 auto; padding: 2rem 1rem; } .prose-content h1 { font-size: 2rem; font-weight: 700; margin: 1.5rem 0 1rem; line-height: 1.2; } .prose-content h2 { font-size: 1.5rem; font-weight: 600; margin: 2rem 0 .75rem; padding-top: .5rem; border-top: 1px solid #e2e8f0; } .prose-content h3 { font-size: 1.2rem; font-weight: 600; margin: 1.25rem 0 .5rem; } .prose-content p, .prose-content li { line-height: 1.65; color: #334155; } .prose-content ul, .prose-content ol { padding-left: 1.5rem; margin: .75rem 0; } .prose-content ul li { list-style: disc; } .prose-content ol li { list-style: decimal; } .prose-content code { background: #f1f5f9; padding: .1rem .35rem; border-radius: .25rem; font-size: .9em; color: #0f172a; } .prose-content pre, .prose-content pre[class*="language-"] { background: #0f172a; color: #e2e8f0; padding: 1rem; border-radius: .5rem; overflow-x: auto; max-width: 100%; min-width: 0; font-size: .85rem; line-height: 1.5; margin: 1rem 0; white-space: pre-wrap; word-break: break-all; word-wrap: break-word; } .prose-content pre code, .prose-content pre[class*="language-"] code { background: transparent; color: inherit; padding: 0; display: block; white-space: pre-wrap; word-break: break-all; word-wrap: break-word; } .prose-content a { color: #4338ca; text-decoration: underline; text-decoration-color: #c7d2fe; overflow-wrap: break-word; } .prose-content a:hover { text-decoration-color: #4338ca; } .prose-content p, .prose-content li { overflow-wrap: break-word; } .prose-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9rem; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .prose-content thead, .prose-content tbody, .prose-content tfoot { display: table; width: 100%; table-layout: fixed; } .prose-content tr { display: table-row; } .prose-content th, .prose-content td { border: 1px solid #e2e8f0; padding: .5rem .75rem; text-align: left; } .prose-content th { background: #f8fafc; font-weight: 600; } .prose-content blockquote { border-left: 4px solid #cbd5e1; padding-left: 1rem; margin: 1rem 0; color: #64748b; font-style: italic; } @media (max-width: 640px) { .prose-content h1 { font-size: 1.5rem; } .prose-content h2 { font-size: 1.25rem; } .prose-content pre { font-size: .75rem; padding: .75rem; } } /* Doc layout: stacked on mobile, side-by-side on desktop */ .doc-layout { display: flex; flex-direction: column; max-width: 80rem; margin: 0 auto; } .doc-layout .prose-content { max-width: none; margin: 0; flex: 1; min-width: 0; } /* ── TOC — mobile: sticky collapsible strip ── */ #toc-sidebar { position: sticky; top: 3.5rem; z-index: 20; background: #fff; border-bottom: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,.06); } /* Toggle button (mobile only) */ .toc-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.65rem 1rem; background: none; border: none; cursor: pointer; font-size: 0.8rem; font-weight: 600; color: #475569; text-align: left; } .toc-toggle:hover { background: #f8fafc; } .toc-toggle-label { display: flex; align-items: center; gap: 0.4rem; } .toc-toggle-label::before { content: ''; display: inline-block; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: #4338ca; flex-shrink: 0; } .toc-chevron { width: 1rem; height: 1rem; color: #94a3b8; transition: transform 0.2s ease; flex-shrink: 0; } #toc-sidebar.toc-open .toc-chevron { transform: rotate(180deg); } /* Collapsible body */ .toc-body { overflow: hidden; max-height: 0; transition: max-height 0.25s ease; } #toc-sidebar.toc-open .toc-body { max-height: 55vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; } /* Hidden on mobile; desktop block set inside @media (min-width: 1024px) */ .toc-desktop-title { display: none; } /* TOC search input */ .toc-search { position: relative; padding: 0.4rem 0.75rem; } .toc-search-input { width: 100%; padding: 0.3rem 1.5rem 0.3rem 0.6rem; font-size: 0.78rem; border: 1px solid #e2e8f0; border-radius: 0.375rem; background: #f8fafc; color: #1e293b; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .toc-search-input::placeholder { color: #94a3b8; } .toc-search-input:focus { border-color: #818cf8; box-shadow: 0 0 0 2px rgba(129,140,248,0.2); background: #fff; } .toc-search-clear { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: #94a3b8; cursor: pointer; padding: 0.15rem; line-height: 1; border-radius: 0.25rem; } .toc-search-clear:hover { color: #64748b; background: #f1f5f9; } .toc-no-results { padding: 0.4rem 1rem; font-size: 0.75rem; color: #94a3b8; font-style: italic; } /* TOC list (shared mobile + desktop) */ .toc-list { list-style: none; padding: 0.5rem 0; margin: 0; } .toc-list li { margin: 0; } .toc-link { display: block; padding: 0.3rem 1rem; color: #64748b; text-decoration: none; font-size: 0.82rem; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.1s, background 0.1s; border-radius: 0; } .toc-h3 { padding-left: 1.75rem; font-size: 0.77rem; color: #94a3b8; } .toc-link:hover { color: #1e293b; background: #f1f5f9; } .toc-active { color: #4338ca !important; background: #eef2ff !important; font-weight: 500; } /* ── TOC — desktop: sticky left sidebar ── */ @media (min-width: 1024px) { html { scroll-padding-top: 4rem; } /* restore — sidebar layout needs no extra offset */ .doc-layout { flex-direction: row; align-items: flex-start; } #toc-sidebar { width: 15rem; flex-shrink: 0; position: sticky; top: 3.5rem; max-height: calc(100vh - 3.5rem); overflow-y: auto; overscroll-behavior: contain; border-bottom: none; border-right: 1px solid #e2e8f0; box-shadow: none; background: transparent; padding: 2rem 0.75rem 2rem 1rem; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; } /* Hide the mobile toggle; always show the body */ .toc-toggle { display: none; } .toc-body { max-height: none !important; overflow: visible !important; transition: none; } /* Desktop list tweaks: tighter padding, border-radius */ .toc-link { padding: 0.22rem 0.5rem; border-radius: 0.25rem; font-size: 0.78rem; } .toc-h3 { padding-left: 1rem; font-size: 0.73rem; } /* Label: hidden on mobile, shown on desktop sidebar */ .toc-desktop-title { display: block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; margin-bottom: 0.6rem; padding-left: 0.5rem; } .toc-search { padding: 0 0 0.4rem 0; } .toc-search-clear { right: 0.35rem; } } /* Mobile doc pages: account for sticky header (56px) + collapsed TOC strip (~42px) */ @media (max-width: 1023px) { .doc-layout ~ * { scroll-padding-top: 6.5rem; } html:has(.doc-layout) { scroll-padding-top: 6.5rem; } }