cosmos-docusaurus-theme 1.2.5 → 2.0.0

package/CHANGELOG.md

@@ -7,6 +7,46 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ---
 
+## [2.0.0] — 2026-03-10
+
+### Added — Native Docusaurus component coverage
+
+1. **Color mode toggle icons** — sun (amber `#fbbf24`) in dark mode, moon (brand indigo `#7592ff`) in light mode via CSS `filter` colorization
+2. **TOCCollapsible** — mobile table-of-contents styled as bordered card with uppercase monospace label, matching sidebar section labels
+3. **DocCard / DocCardList** — auto-generated category index cards follow Void/Slate palette with hover lift
+4. **Announcement bar close button** — `×` styled with opacity + hover bg tint
+5. **Tag pages** — `/docs/tags/...` pages use pill tags with brand hover state
+6. **Mobile search** — search input collapses to `2rem` icon-only on ≤576px, expands on focus with smooth width transition
+7. **prefers-reduced-motion** — all transitions and animations disabled when the OS accessibility setting is active
+
+### Fixed
+
+- **Docker GHCR push timeout** — `provenance: false` + `sbom: false` on `docker/build-push-action` eliminates attestation overhead that caused network timeouts; `timeout-minutes: 30` on job; `docker/setup-buildx-action` added explicitly
+- **CSS comments** — removed stale TailAdmin references, fixed redundant inline color-name comments
+
+## [1.2.6] — 2026-03-10
+
+### Added
+
+- **Sidebar icons** — category icon system via `className: 'sidebar-cat-*'` in `sidebars.js`.
+  10 Lucide-style SVG icons (rocket, monitor, pencil, puzzle, sliders, folder, server,
+  database, layers, grid, code). CSS-only with dark-mode `filter:invert(1)`.
+- **Sidebar sub-menu vertical line** — Rackscope-style left border on nested items.
+  Sub-items: slightly smaller font, muted color, left padding.
+- **Sidebar version badge** — always pinned at the very bottom of the sidebar viewport
+  (`[class*="sidebarViewport"]` flex-column + `::after` outside scroll area).
+  Hardcoded backgrounds (#fff / #111827) to always cover scrolled content.
+- **Ctrl+K hint redesign** — ghost style: transparent chips with hairline border,
+  `+` separator via `::before`, opacity 0.7 at rest, 0.9 on input focus.
+  Preserves plugin positioning (only kbd elements restyled).
+
+### Changed
+
+- Search input: `min-width` 220px → 300px; font-family → `var(--ifm-font-family-base)` (Outfit)
+- Demo `docusaurus.config.js`: `{ type:'search' }` positioned before external links;
+  `searchBarShortcutHint: true`
+- Dockerfile: copies full project so `file:..` resolves during local dev
+
 ## [1.2.5] — 2026-03-10
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cosmos-docusaurus-theme",
-  "version": "1.2.5",
+  "version": "2.0.0",
   "description": "A clean, dark-first Docusaurus CSS theme based on TailAdmin design system with Outfit typography",
   "keywords": [
     "docusaurus",

package/src/css/theme.css

@@ -10,8 +10,7 @@
  * Font:  Outfit + JetBrains Mono for code
  *
  * Usage:
- *   In docusaurus.config.js → theme.customCss:
- *   require.resolve('cosmos-docusaurus-theme')
+ *   themes: ['cosmos-docusaurus-theme']
  *
  * @see https://github.com/SckyzO/cosmos-docusaurus-theme
  * @license MIT
@@ -22,16 +21,16 @@
 
 /* ── Light mode ──────────────────────────────────────────────────────────── */
 :root {
-  /* Primary brand colors — TailAdmin brand-* palette */
-  --ifm-color-primary:         #465fff;  /* brand-500 */
-  --ifm-color-primary-dark:    #3641f5;  /* brand-600 */
-  --ifm-color-primary-darker:  #2a31d8;  /* brand-700 */
-  --ifm-color-primary-darkest: #252dae;  /* brand-800 */
-  --ifm-color-primary-light:   #7592ff;  /* brand-400 */
-  --ifm-color-primary-lighter: #9cb9ff;  /* brand-300 */
-  --ifm-color-primary-lightest:#dde9ff;  /* brand-100 */
-
-  /* Typography — TailAdmin uses Outfit as the primary typeface */
+  /* Brand palette (indigo) — matches Rackscope accent color */
+  --ifm-color-primary:         #465fff;
+  --ifm-color-primary-dark:    #3641f5;
+  --ifm-color-primary-darker:  #2a31d8;
+  --ifm-color-primary-darkest: #252dae;
+  --ifm-color-primary-light:   #7592ff;
+  --ifm-color-primary-lighter: #9cb9ff;
+  --ifm-color-primary-lightest:#dde9ff;
+
+  /* Typography — Outfit + JetBrains Mono, same as Rackscope app */
   --ifm-font-family-base:      'Outfit', system-ui, -apple-system, sans-serif;
   --ifm-font-family-monospace: 'JetBrains Mono', 'Fira Code', monospace;
   --ifm-font-size-base:        16.5px;
@@ -43,8 +42,8 @@
   --ifm-h3-font-size:          1.25rem;
 
   /* Background — Slate: Tailwind gray-50 / white */
-  --ifm-background-color:          #f9fafb;  /* gray-50 */
-  --ifm-background-surface-color:  #fff;     /* white */
+  --ifm-background-color:          #f9fafb;
+  --ifm-background-surface-color:  #fff;     
 
   /* Text — Slate: warm brown tones (not cold blue-gray) */
   --ifm-font-color-base:      #1a1714;  /* warm near-black */
@@ -55,14 +54,14 @@
   --ifm-navbar-background-color:    #fff;
   --ifm-navbar-shadow:              0px 1px 3px 0px rgb(16,24,40,0.10), 0px 1px 2px 0px rgb(16,24,40,0.06);
   --ifm-navbar-link-color:          #2c2822;  /* warm dark text */
-  --ifm-navbar-link-hover-color:    #465fff;  /* brand-500 */
+  --ifm-navbar-link-hover-color:    #465fff;
   --ifm-navbar-link-active-color:   #465fff;
 
   /* Sidebar */
   --ifm-sidebar-width:         280px;
   --doc-sidebar-width:         280px;
   --ifm-sidebar-padding:       16px;
-  --docusaurus-collapse-button-bg-hover-color: #f3f4f6; /* gray-100 */
+  --docusaurus-collapse-button-bg-hover-color: #f3f4f6; 
 
   /* Links */
   --ifm-link-color:        #465fff;
@@ -95,20 +94,20 @@
 /* ── Dark mode ───────────────────────────────────────────────────────────── */
 [data-theme='dark'] {
   /* Primary — lighter variant for readability on dark backgrounds */
-  --ifm-color-primary:         #7592ff;  /* brand-400 */
-  --ifm-color-primary-dark:    #465fff;  /* brand-500 */
-  --ifm-color-primary-darker:  #3641f5;  /* brand-600 */
-  --ifm-color-primary-darkest: #2a31d8;  /* brand-700 */
-  --ifm-color-primary-light:   #9cb9ff;  /* brand-300 */
-  --ifm-color-primary-lighter: #c2d6ff;  /* brand-200 */
-  --ifm-color-primary-lightest:#dde9ff;  /* brand-100 */
+  --ifm-color-primary:         #7592ff;
+  --ifm-color-primary-dark:    #465fff;
+  --ifm-color-primary-darker:  #3641f5;
+  --ifm-color-primary-darkest: #2a31d8;
+  --ifm-color-primary-light:   #9cb9ff;
+  --ifm-color-primary-lighter: #c2d6ff;
+  --ifm-color-primary-lightest:#dde9ff;
   --docusaurus-highlighted-code-line-bg: rgb(117, 146, 255, 0.15);
 
   /* Background — Void: Tailwind gray-950 / gray-900 neutral blacks */
   --ifm-background-color:         #030712;  /* gray-950 — deepest background */
   --ifm-background-surface-color: #111827;  /* gray-900 — cards, sidebar, panels */
-  --ifm-navbar-background-color:  #111827;  /* gray-900 */
-  --ifm-footer-background-color:  #030712;  /* gray-950 */
+  --ifm-navbar-background-color:  #111827;
+  --ifm-footer-background-color:  #030712;
 
   /* Text — neutral grays, no blue tint */
   --ifm-font-color-base:      #e5e5e5;  /* neutral light */
@@ -133,7 +132,7 @@
   --ifm-navbar-shadow: 0px 1px 0px 0px #1f2937;
 
   /* Code */
-  --ifm-code-background: #1f2937;  /* gray-800 */
+  --ifm-code-background: #1f2937;
 
   /* Sidebar collapse button */
   --docusaurus-collapse-button-bg-hover-color: rgb(255,255,255,0.05);
@@ -304,21 +303,21 @@ button[aria-label*="dark and light mode"]:hover::before {
   transition: background 0.12s, color 0.12s;
 }
 
-/* Active sidebar link — TailAdmin: bg-brand-50 + text-brand-500 */
+/* Active sidebar link — brand tint bg + brand color text */
 .menu__link--active,
 .menu__link--active:hover {
-  background: #ecf3ff;  /* brand-50 */
-  color: #465fff;       /* brand-500 */
+  background: #ecf3ff;
+  color: #465fff;       
   font-weight: 600;
 }
 
 [data-theme='dark'] .menu__link--active,
 [data-theme='dark'] .menu__link--active:hover {
   background: rgb(70, 95, 255, 0.12);
-  color: #7592ff;  /* brand-400 */
+  color: #7592ff;
 }
 
-/* Sidebar collapsible category */
+/* Sidebar category toggle */
 .menu__list-item-collapsible {
   border-radius: 8px;
 }
@@ -939,33 +938,31 @@ details > :not(summary) {
    > input.navbar__search-input.searchInput_xxx (CSS module).
    We need !important on background/color to beat the CSS module specificity.  */
 
+/* Search input — wider, Outfit font, consistent with Rackscope AppSearch */
 .navbar__search-input {
   height: 38px !important;
-  min-width: 220px !important;
+  min-width: 300px !important;
   border-radius: 8px !important;
   border: 1px solid var(--ifm-toc-border-color) !important;
+  font-family: var(--ifm-font-family-base) !important;
   font-size: 0.875rem !important;
-  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s !important;
-}
-
-/* Light (Slate): bg-gray-100 */
-.navbar__search-input {
   background-color: #f3f4f6 !important;
   color: #1a1714 !important;
+  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s !important;
 }
 
 .navbar__search-input::placeholder {
   color: #8a8479 !important;
+  font-family: var(--ifm-font-family-base) !important;
 }
 
-/* Dark (Void): bg-gray-800 */
 [data-theme='dark'] .navbar__search-input {
   background-color: #1f2937 !important;
   color: #e5e5e5 !important;
 }
 
 [data-theme='dark'] .navbar__search-input::placeholder {
-  color: #71717a !important;
+  color: #6b7280 !important;
 }
 
 .navbar__search-input:focus {
@@ -980,34 +977,50 @@ details > :not(summary) {
   box-shadow: 0 0 0 3px rgb(117, 146, 255, 0.12) !important;
 }
 
-/* ── Ctrl+K keyboard shortcut — compact pill style ───────────────────────── */
-/* Replaces the default split kbd elements with a unified minimal appearance  */
-[class*="searchHintContainer"] {
-  gap: 2px !important;
-}
+/* Ctrl+K hint — ghost style: transparent, blends into the input surface.
+   Uses currentColor border so it adapts to both Void and Slate automatically. */
 
-[class*="searchHint"] {
+/* Inner hint wrapper: flex row for the two keys */
+[class*="searchHint"]:not([class*="Container"]) {
   display: inline-flex !important;
   align-items: center !important;
-  gap: 1px !important;
+  gap: 0 !important;
+}
+
+/* Each key: ghost chip, no fill, hairline border */
+[class*="searchHintContainer"] kbd {
   background: transparent !important;
   border: 1px solid var(--ifm-toc-border-color) !important;
-  border-radius: 5px !important;
+  border-radius: 4px !important;
+  color: var(--ifm-font-color-secondary) !important;
+  font-family: var(--ifm-font-family-monospace) !important;
+  font-size: 0.6rem !important;
+  font-weight: 400 !important;
+  letter-spacing: 0.02em !important;
   padding: 1px 5px !important;
+  line-height: 1.6 !important;
   box-shadow: none !important;
+  opacity: 0.7 !important;
 }
 
-/* Individual kbd keys inside the hint */
-[class*="searchHint"] kbd {
-  background: transparent !important;
-  border: none !important;
-  border-radius: 0 !important;
-  color: var(--ifm-font-color-secondary) !important;
-  font-size: 0.68rem !important;
+/* "+" separator between the two kbd elements */
+[class*="searchHintContainer"] kbd + kbd {
+  margin-left: 2px !important;
+}
+
+[class*="searchHintContainer"] kbd + kbd::before {
+  content: '+';
   font-family: var(--ifm-font-family-monospace) !important;
-  padding: 0 !important;
-  box-shadow: none !important;
-  line-height: 1.4 !important;
+  font-size: 0.6rem !important;
+  color: var(--ifm-font-color-secondary) !important;
+  opacity: 0.5 !important;
+  margin-right: 2px !important;
+}
+
+/* Whole hint brightens on input focus — discovery moment */
+.navbar__search-input:focus ~ [class*="searchHintContainer"],
+.navbar__search-input:focus + [class*="searchHintContainer"] {
+  opacity: 0.9 !important;
 }
 
 /* ── Right-side navbar order: Search | GitHub/npm | Theme ────────────────── */
@@ -1097,6 +1110,345 @@ details > :not(summary) {
   background: #475467;
 }
 
+/* =============================================================================
+   SIDEBAR — RACKSCOPE STYLE
+   Vertical line for nested items + icon system via className + version footer.
+   ============================================================================= */
+
+/* ── Nested items — vertical left border ─────────────────────────────────── */
+/* Like Rackscope: [Category Title]                                           */
+/*                   │ sub item                                                */
+/*                   │ sub item                                                */
+
+.theme-doc-sidebar-menu .menu__list .menu__list {
+  margin-left: 8px;
+  padding-left: 12px;
+  border-left: 1.5px solid var(--ifm-toc-border-color);
+}
+
+[data-theme='dark'] .theme-doc-sidebar-menu .menu__list .menu__list {
+  border-left-color: #374151;  /* Void gray-700 — slightly more visible */
+}
+
+/* Sub-items: slightly smaller + muted when inactive */
+.menu__list .menu__list > .menu__list-item > .menu__link {
+  font-size: 0.8375rem;
+  padding-left: 12px;
+}
+
+.menu__list .menu__list > .menu__list-item > .menu__link:not(.menu__link--active) {
+  color: var(--ifm-font-color-secondary);
+}
+
+[data-theme='dark'] .menu__list .menu__list > .menu__list-item > .menu__link:not(.menu__link--active) {
+  color: #71717a;
+}
+
+/* ── Category icons — via className in sidebars.js ───────────────────────── */
+/* Usage: { type: 'category', label: '...', className: 'sidebar-cat-rocket'} */
+/* Icon = black SVG via ::before — inverted in dark mode with filter:invert   */
+
+[class*="sidebar-cat-"] > .menu__list-item-collapsible > .menu__link {
+  display: flex;
+  align-items: center;
+}
+
+[class*="sidebar-cat-"] > .menu__list-item-collapsible > .menu__link::before {
+  content: '';
+  display: inline-block;
+  flex-shrink: 0;
+  width: 15px;
+  height: 15px;
+  margin-right: 8px;
+  background-size: 15px 15px;
+  background-repeat: no-repeat;
+  background-position: center;
+  opacity: 0.6;
+  transition: opacity 0.12s;
+}
+
+/* Dark mode — invert the black SVG to white */
+[data-theme='dark'] [class*="sidebar-cat-"] > .menu__list-item-collapsible > .menu__link::before {
+  filter: invert(1);
+}
+
+/* Hover + active state — full opacity */
+[class*="sidebar-cat-"] > .menu__list-item-collapsible > .menu__link--active::before,
+[class*="sidebar-cat-"] > .menu__list-item-collapsible:hover > .menu__link::before {
+  opacity: 1;
+}
+
+/* ── Icon definitions (Lucide-style SVG, black stroke, 24×24) ───────────── */
+
+/* Rocket — Getting Started, Deployment */
+.sidebar-cat-rocket > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
+}
+
+/* Monitor — Views */
+.sidebar-cat-monitor > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E");
+}
+
+/* Pencil — Editors */
+.sidebar-cat-pencil > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5z'/%3E%3C/svg%3E");
+}
+
+/* Puzzle — Plugins & Features */
+.sidebar-cat-puzzle > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h4a2 2 0 0 1 2 2v1a2 2 0 0 0 4 0v-1a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M14 2v4a2 2 0 0 1-2 2h-1a2 2 0 0 0 0 4h1a2 2 0 0 1 2 2v4'/%3E%3C/svg%3E");
+}
+
+/* SlidersHorizontal — Interface, Core, Settings */
+.sidebar-cat-sliders > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' y1='4' x2='14' y2='4'/%3E%3Cline x1='10' y1='4' x2='3' y2='4'/%3E%3Ccircle cx='12' cy='4' r='2'/%3E%3Cline x1='21' y1='12' x2='12' y2='12'/%3E%3Cline x1='8' y1='12' x2='3' y2='12'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Cline x1='21' y1='20' x2='16' y2='20'/%3E%3Cline x1='12' y1='20' x2='3' y2='20'/%3E%3Ccircle cx='14' cy='20' r='2'/%3E%3C/svg%3E");
+}
+
+/* FolderOpen — Configuration */
+.sidebar-cat-folder > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
+}
+
+/* Server — Infrastructure */
+.sidebar-cat-server > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='8' rx='2' ry='2'/%3E%3Crect x='2' y='14' width='20' height='8' rx='2' ry='2'/%3E%3Cline x1='6' y1='6' x2='6.01' y2='6'/%3E%3Cline x1='6' y1='18' x2='6.01' y2='18'/%3E%3C/svg%3E");
+}
+
+/* Database — Data & Plugins */
+.sidebar-cat-database > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M21 12c0 1.66-4 3-9 3s-9-1.34-9-3'/%3E%3Cpath d='M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5'/%3E%3C/svg%3E");
+}
+
+/* Layers — Component Reference */
+.sidebar-cat-layers > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z'/%3E%3Cpath d='M22 17.65l-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/%3E%3Cpath d='M22 12.65l-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E");
+}
+
+/* Grid2x2 — Showcase */
+.sidebar-cat-grid > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");
+}
+
+/* Code2 — API, Development, Architecture features */
+.sidebar-cat-code > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
+}
+
+/* ── Sidebar version badge — always at the very bottom ───────────────────── */
+/* Architecture: .theme-doc-sidebar is the sticky viewport with fixed height.
+   Converting it to flex-column + making the scrollable nav flex:1 means the
+   ::after pseudo-element is a flex-child OUTSIDE the scroll area — always
+   pinned to the bottom regardless of content height or scroll position. */
+:root {
+  --cosmos-version: "cosmos v1.2.6";
+}
+
+/* Sidebar viewport — flex column so version badge is always pinned at the bottom.
+   Targets the CSS-module class via attribute substring match (Docusaurus 3). */
+[class*="sidebarViewport"] {
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+/* The scrollable menu fills the available space */
+[class*="sidebarViewport"] > .menu {
+  flex: 1 !important;
+  min-height: 0 !important;
+}
+
+/* Version badge — flex child OUTSIDE the scroll area, always at the very bottom */
+[class*="sidebarViewport"]::after {
+  content: var(--cosmos-version);
+  flex-shrink: 0;
+  display: block;
+  padding: 8px 0 12px;
+  text-align: center;
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.58rem;
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #9ca3af;
+  background: #fff;
+  border-top: 1px solid #e5e7eb;
+}
+
+[data-theme='dark'] [class*="sidebarViewport"]::after {
+  color: #374151;
+  background: #111827;
+  border-top-color: #1f2937;
+}
+
+/* =============================================================================
+   NATIVE DOCUSAURUS COMPONENTS
+   ============================================================================= */
+
+/* ── 1. Color mode toggle icons ──────────────────────────────────────────── */
+/* Sun = amber shown in dark mode (hints "switch to light").
+   Moon = brand indigo shown in light mode (hints "switch to dark").
+   Uses CSS filter to colorize since Docusaurus SVG paths use hardcoded fill. */
+
+/* Dark mode shows the sun icon */
+[data-theme='dark'] [class*="toggleButton"] [class*="lightToggleIcon"],
+[data-theme='dark'] [class*="toggleButton"] svg {
+  filter: drop-shadow(0 0 0 #fbbf24) sepia(1) saturate(4) hue-rotate(5deg) brightness(1.1);
+}
+
+/* Light mode shows the moon icon */
+[data-theme='light'] [class*="toggleButton"] [class*="darkToggleIcon"],
+[data-theme='light'] [class*="toggleButton"] svg {
+  filter: drop-shadow(0 0 0 #7592ff) sepia(1) saturate(6) hue-rotate(190deg) brightness(0.9);
+}
+
+/* ── 2. TOCCollapsible (mobile table of contents) ────────────────────────── */
+[class*="tocCollapsible"] {
+  border: 1px solid var(--ifm-toc-border-color);
+  border-radius: 10px;
+  margin-bottom: 1rem;
+  overflow: hidden;
+}
+
+[class*="tocCollapsibleButton"] {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 10px 14px;
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.68rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--ifm-font-color-secondary);
+  transition: color 0.12s, background 0.12s;
+}
+
+[class*="tocCollapsibleButton"]:hover {
+  color: var(--ifm-color-primary);
+  background: rgb(70, 95, 255, 0.04);
+}
+
+[class*="tocCollapsibleContent"] {
+  border-top: 1px solid var(--ifm-toc-border-color);
+  padding: 8px 0;
+}
+
+/* ── 3. DocCard / DocCardList (auto-generated category index pages) ─────── */
+[class*="cardContainer"] > article.card {
+  height: 100%;
+  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
+}
+
+[class*="cardContainer"] > article.card:hover {
+  transform: translateY(-2px);
+}
+
+[class*="cardContainer"] a {
+  text-decoration: none;
+}
+
+/* Category card title */
+[class*="cardContainer"] h2 {
+  font-size: 1rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+}
+
+/* Category card description */
+[class*="cardContainer"] p {
+  font-size: 0.875rem;
+  color: var(--ifm-font-color-secondary);
+  margin: 0;
+}
+
+/* ── 4. Announcement bar close button ────────────────────────────────────── */
+.announcement-close,
+[class*="announcementBarClose"] {
+  color: rgb(255, 255, 255, 0.65) !important;
+  border-radius: 6px !important;
+  padding: 4px 6px !important;
+  transition: color 0.15s, background 0.15s !important;
+}
+
+.announcement-close:hover,
+[class*="announcementBarClose"]:hover {
+  color: #fff !important;
+  background: rgb(255, 255, 255, 0.12) !important;
+}
+
+/* ── 5. Tag pages (/docs/tags/...) ───────────────────────────────────────── */
+[class*="tagList"] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+[class*="tagItem"] a,
+[class*="tag_"] {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--ifm-toc-border-color);
+  border-radius: 20px;
+  padding: 4px 14px;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--ifm-font-color-base);
+  text-decoration: none;
+  transition: border-color 0.15s, background 0.15s, color 0.15s;
+}
+
+[class*="tagItem"] a:hover,
+[class*="tag_"]:hover {
+  border-color: var(--ifm-color-primary);
+  background: rgb(70, 95, 255, 0.06);
+  color: var(--ifm-color-primary);
+}
+
+/* ── 7. Responsive search ─────────────────────────────────────────────────── */
+/* On mobile the input collapses — restore sizing on focus */
+@media (width <= 576px) {
+  .navbar__search-input {
+    min-width: 0 !important;
+    width: 2rem !important;
+    padding-left: 2rem !important;
+    transition: width 0.25s ease, background-color 0.15s !important;
+  }
+
+  .navbar__search-input:focus {
+    width: 220px !important;
+  }
+}
+
+/* ── 8. prefers-reduced-motion ───────────────────────────────────────────── */
+/* Respects the OS-level "reduce motion" accessibility setting by
+   disabling all transitions and animations. */
+@media (prefers-reduced-motion: reduce) {
+  .navbar,
+  .theme-doc-sidebar-container,
+  .menu__link,
+  .main-wrapper,
+  article,
+  .footer,
+  .table-of-contents__link,
+  .pagination-nav__link,
+  .prism-code,
+  .alert,
+  .card,
+  [class*="sidebar-cat-"] > .menu__list-item-collapsible > .menu__link,
+  [class*="toggleIcon"],
+  button[aria-label*="dark and light mode"] {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
 /* =============================================================================
    OPTIONAL UTILITY CLASSES
    The following classes are not required for the theme to work.