jekyll-theme-docsteer 1.0.0

data/_sass/docsteer/_reset.scss

@@ -0,0 +1,57 @@
+// ── Modern reset ─────────────────────────────────────────────
+*, *::before, *::after { box-sizing: border-box; }
+* { margin: 0; }
+
+html {
+  font-size: var(--fs-root);
+  -webkit-text-size-adjust: 100%;
+  scroll-behavior: smooth;
+  scroll-padding-top: calc(var(--nav-h) + var(--sp-4));
+}
+
+body {
+  min-height: 100vh;
+  font-family: var(--font-sans);
+  font-size: var(--fs-base);
+  line-height: var(--lh-body);
+  color: var(--text);
+  background: var(--bg);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-synthesis-weight: none;
+  text-rendering: optimizeLegibility;
+}
+
+img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; }
+input, button, textarea, select { font: inherit; color: inherit; }
+button { background: none; border: 0; cursor: pointer; }
+a { color: var(--link); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+ul[class], ol[class] { list-style: none; padding: 0; }
+
+:target { scroll-margin-top: calc(var(--nav-h) + var(--sp-5)); }
+
+::selection { background: var(--selection); }
+
+:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-radius: var(--r-sm);
+}
+
+.skip-link {
+  position: fixed;
+  top: var(--sp-2);
+  left: var(--sp-2);
+  z-index: 200;
+  padding: var(--sp-2) var(--sp-4);
+  background: var(--brand);
+  color: var(--brand-contrast);
+  border-radius: var(--r-sm);
+  transform: translateY(-160%);
+  transition: transform var(--dur) var(--ease);
+}
+.skip-link:focus { transform: translateY(0); text-decoration: none; }
+
+[hidden] { display: none !important; }

data/_sass/docsteer/_responsive.scss

@@ -0,0 +1,31 @@
+// ── Extra responsive polish ─────────────────────────────────
+@media (max-width: 1400px) {
+  :root { --sidebar-w: 264px; --toc-w: 220px; }
+}
+
+@media (max-width: 1180px) {
+  :root { --content-max: 76ch; }
+}
+
+@media (max-width: 960px) {
+  :root { --content-max: 100%; --measure: 100%; }
+  .home { padding-inline: var(--sp-4); }
+}
+
+@media (max-width: 560px) {
+  :root { --sp-9: 72px; --sp-8: 48px; }
+}
+
+@media (max-width: 480px) {
+  :root { --fs-root: 15.5px; }
+  .page-main { padding-inline: var(--sp-4); }
+  .hero__actions .btn { width: 100%; }
+  .to-top { right: var(--sp-3); bottom: var(--sp-3); }
+  .code-wrap__bar { padding-left: var(--sp-3); }
+  .prose pre { padding-inline: var(--sp-4); }
+}
+
+// Large screens: let content breathe without going past a readable measure
+@media (min-width: 1600px) {
+  :root { --content-max: 80ch; }
+}

data/_sass/docsteer/_search.scss

@@ -0,0 +1,98 @@
+// ── Live search modal ───────────────────────────────────────
+.search-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 120;
+  display: none;
+  padding: clamp(var(--sp-4), 10vh, 120px) var(--sp-4) var(--sp-4);
+}
+.search-modal.is-open { display: block; }
+.search-modal__backdrop {
+  position: absolute;
+  inset: 0;
+  background: hsl(220 40% 6% / .55);
+  backdrop-filter: blur(3px);
+  animation: fade .16s var(--ease);
+}
+.search-modal__panel {
+  position: relative;
+  max-width: 620px;
+  margin-inline: auto;
+  background: var(--bg-elev);
+  border: 1px solid var(--border);
+  border-radius: var(--r-lg);
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+  animation: pop .16s var(--ease);
+}
+@keyframes fade { from { opacity: 0; } }
+@keyframes pop { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
+
+.search-modal__bar {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  padding: var(--sp-4) var(--sp-5);
+  border-bottom: 1px solid var(--border);
+}
+.search-modal__bar > i { color: var(--text-faint); }
+.search-modal__input {
+  flex: 1;
+  border: 0;
+  background: none;
+  font-size: 1rem;
+  outline: none;
+}
+.search-modal__input::placeholder { color: var(--text-faint); }
+.search-modal__esc { color: var(--text-faint); }
+
+.search-modal__body { max-height: min(60vh, 520px); overflow-y: auto; padding: var(--sp-2); }
+
+.search-results { display: grid; gap: 2px; }
+.search-result {
+  display: block;
+  padding: var(--sp-3) var(--sp-4);
+  border-radius: var(--r-md);
+  color: var(--text);
+}
+.search-result:hover, .search-result.is-active {
+  background: var(--brand-soft);
+  text-decoration: none;
+}
+.search-result__crumb {
+  font-size: .72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: .04em;
+  color: var(--brand);
+}
+.search-result__title { font-weight: 600; margin-top: 2px; }
+.search-result__excerpt {
+  margin-top: 3px;
+  font-size: .84rem;
+  color: var(--text-soft);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.search-result mark {
+  background: hsl(var(--brand-h) var(--brand-s) 55% / .22);
+  color: inherit;
+  border-radius: 3px;
+  padding: 0 1px;
+}
+
+.search-modal__empty, .search-modal__hint {
+  padding: var(--sp-4) var(--sp-5);
+  font-size: .84rem;
+  color: var(--text-faint);
+  text-align: center;
+}
+.search-modal__hint kbd { margin: 0 2px; }
+
+@media (max-width: 520px) {
+  .search-modal { padding-top: 0; }
+  .search-modal__panel { border-radius: 0; min-height: 100%; }
+  .search-modal__body { max-height: calc(100vh - 66px); }
+}

data/_sass/docsteer/_sidebar.scss

@@ -0,0 +1,159 @@
+// ── Left sidebar ─────────────────────────────────────────────
+.sidebar {
+  border-right: 1px solid var(--border);
+  background: var(--bg);
+  // .page-shell is align-items:start, which would shrink this grid item to its
+  // content height — leaving the sticky __inner no room to travel, so sticky
+  // would silently do nothing. Stretching to the full row gives it that room
+  // (and runs the border the whole height of the page, which looks better).
+  align-self: stretch;
+}
+.sidebar.is-sticky .sidebar__inner {
+  position: sticky;
+  top: var(--nav-h);
+  max-height: calc(100vh - var(--nav-h));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.sidebar__inner {
+  padding: var(--sp-5) var(--sp-4) var(--sp-8);
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-strong) transparent;
+}
+.sidebar__inner::-webkit-scrollbar { width: 10px; }
+.sidebar__inner::-webkit-scrollbar-track { background: transparent; }
+.sidebar__inner::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+  border: 3px solid var(--bg);
+  border-radius: 5px;
+}
+
+// ── Search trigger ───────────────────────────────────────────
+.sidebar__search {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  width: 100%;
+  height: 38px;
+  margin-bottom: var(--sp-6);
+  padding-inline: var(--sp-3);
+  border: 1px solid var(--border);
+  border-radius: var(--r-md);
+  background: var(--bg-sunken);
+  color: var(--text-faint);
+  font-size: var(--fs-sm);
+  text-align: left;
+  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
+    background var(--dur) var(--ease);
+}
+.sidebar__search:hover {
+  border-color: var(--border-strong);
+  color: var(--text-soft);
+  background: var(--bg-elev);
+}
+.sidebar__search i { font-size: .85em; }
+
+// ── Groups ───────────────────────────────────────────────────
+.sidebar__nav { display: grid; gap: var(--sp-1); }
+
+.sidebar__group + .sidebar__group { margin-top: var(--sp-4); }
+
+.sidebar__group-title {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  width: 100%;
+  padding: var(--sp-2) var(--sp-3);
+  border-radius: var(--r-sm);
+  font-size: var(--fs-xs);
+  font-weight: 650;
+  text-transform: uppercase;
+  letter-spacing: var(--tr-wide);
+  color: var(--text-faint);
+  text-align: left;
+  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
+}
+.sidebar__group-title:hover { color: var(--text-soft); background: var(--surface-2); }
+.sidebar__group-title > i:first-child { font-size: .95em; color: var(--brand); opacity: .85; }
+.sidebar__group-title > span { flex: 1; }
+.sidebar__chev {
+  font-size: .62rem;
+  opacity: .6;
+  transition: transform var(--dur) var(--ease);
+}
+.sidebar__group:not(.is-collapsed) .sidebar__chev { transform: rotate(90deg); }
+
+// ── Links ────────────────────────────────────────────────────
+.sidebar__list {
+  display: grid;
+  gap: 1px;
+  margin-top: var(--sp-1);
+  margin-left: calc(var(--sp-3) + 7px);
+  padding-left: var(--sp-3);
+  border-left: 1px solid var(--border);
+}
+.sidebar__group.is-collapsed .sidebar__list { display: none; }
+
+.sidebar__link {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  min-height: 32px;
+  padding: 5px var(--sp-3);
+  border-radius: var(--r-sm);
+  font-size: var(--fs-sm);
+  line-height: 1.4;
+  color: var(--text-soft);
+  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
+}
+.sidebar__link:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
+.sidebar__link.is-active {
+  color: var(--brand);
+  background: var(--brand-soft);
+  font-weight: 600;
+}
+// The active marker sits on the group's rail, not inside the pill
+.sidebar__link.is-active::before {
+  content: "";
+  position: absolute;
+  left: calc((var(--sp-3) + 1px) * -1);
+  top: 6px; bottom: 6px;
+  width: 2px;
+  border-radius: 2px;
+  background: var(--brand);
+}
+.sidebar__link .badge { margin-left: auto; }
+
+.sidebar__coffee {
+  margin-top: var(--sp-7);
+  padding-top: var(--sp-5);
+  border-top: 1px solid var(--border);
+}
+
+// ── Mobile drawer ────────────────────────────────────────────
+.sidebar-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 88;
+  background: hsl(220 30% 6% / .5);
+  backdrop-filter: blur(2px);
+  animation: fade .16s var(--ease);
+}
+
+@media (max-width: 960px) {
+  .sidebar {
+    position: fixed;
+    top: 0; bottom: 0; left: 0;
+    z-index: 89;
+    width: min(88vw, var(--sidebar-w));
+    background: var(--bg-elev);
+    transform: translateX(-100%);
+    transition: transform var(--dur-lg) var(--ease-out);
+    box-shadow: var(--shadow-lg);
+  }
+  .sidebar.is-open { transform: translateX(0); }
+  .sidebar.is-sticky .sidebar__inner { position: static; max-height: none; }
+  .sidebar__inner { padding-top: calc(var(--nav-h) + var(--sp-4)); height: 100%; }
+  .sidebar__link { min-height: 38px; }
+}

data/_sass/docsteer/_skins.scss

@@ -0,0 +1,193 @@
+@use "sass:list";
+@use "sass:map";
+
+// ── Colour skins ─────────────────────────────────────────────
+// Six curated palettes. Pick one in _config.yml:
+//   docsteer: { skin: aqua|violet|mint|ember|graphite|clay }
+//
+// Every value below becomes a CSS custom property, so nothing else in
+// the codebase references a raw colour — edit a map, restyle the theme.
+//
+//   aqua      azure → cyan       the safe default: product & API docs
+//   violet    violet → fuchsia   creative, design-system & SDK docs
+//   mint      teal → spring      fresh and technical: developer docs
+//   ember     rose → amber       warm: help centres & support portals
+//   graphite  monochrome ink     minimal and premium: internal wikis
+//   clay      warm paper + terracotta   editorial, long-form reading
+//
+// Contrast: every `brand` clears 4.5:1 against its own `bg`, so links
+// in body copy are AA-legible. Keep that in mind if you retune one.
+
+$skins: (
+  // ───────────── AQUA — azure → cyan ─────────────
+  aqua: (
+    ring: (218, 92%),
+    light: (
+      bg:#ffffff, bg-elev:#ffffff, bg-sunken:#f6f8fb, surface-2:#eef2f7,
+      text:#101828, text-soft:#51607a, text-faint:#7b8798,
+      border:#e6ebf2, border-strong:#d3dbe6,
+      brand:#1668f0, brand-strong:#0d51cc, brand-contrast:#ffffff, brand-soft:#e8f0fe,
+      link:#1668f0, accent:#00b4d8,
+      code-bg:#f7f9fc, shadow-color:218 45% 20%, selection:#cfe0ff,
+    ),
+    dark: (
+      bg:#0b0f16, bg-elev:#111722, bg-sunken:#080b11, surface-2:#17202e,
+      text:#e8eef7, text-soft:#a0adbe, text-faint:#6f7d90,
+      border:#1e2735, border-strong:#2c3746,
+      brand:#5fa3ff, brand-strong:#85baff, brand-contrast:#071022, brand-soft:#10243f,
+      link:#5fa3ff, accent:#3ad2ea,
+      code-bg:#0e141d, shadow-color:216 70% 2%, selection:#1c4a86,
+    ),
+  ),
+
+  // ───────────── VIOLET — violet → fuchsia ─────────────
+  violet: (
+    ring: (258, 90%),
+    light: (
+      bg:#ffffff, bg-elev:#ffffff, bg-sunken:#f8f6fd, surface-2:#f1ecfb,
+      text:#191428, text-soft:#565070, text-faint:#8a83a3,
+      border:#ebe5f7, border-strong:#dbd2ef,
+      brand:#6d3bf5, brand-strong:#5726df, brand-contrast:#ffffff, brand-soft:#efe9fe,
+      link:#6d3bf5, accent:#d946ef,
+      code-bg:#f8f6fd, shadow-color:258 45% 24%, selection:#ddd0ff,
+    ),
+    dark: (
+      bg:#100d1a, bg-elev:#171327, bg-sunken:#0b0914, surface-2:#201a33,
+      text:#ece8f8, text-soft:#aba3c6, text-faint:#7c7399,
+      border:#272040, border-strong:#362d55,
+      brand:#a98bff, brand-strong:#c0a8ff, brand-contrast:#120b26, brand-soft:#241b40,
+      link:#a98bff, accent:#e879f9,
+      code-bg:#151124, shadow-color:258 65% 3%, selection:#45308f,
+    ),
+  ),
+
+  // ───────────── MINT — teal → spring ─────────────
+  mint: (
+    ring: (170, 82%),
+    light: (
+      bg:#ffffff, bg-elev:#ffffff, bg-sunken:#f3faf8, surface-2:#e7f5f1,
+      text:#0e201c, text-soft:#46605a, text-faint:#7a938c,
+      border:#dcefe9, border-strong:#c5e3da,
+      brand:#0b8069, brand-strong:#086355, brand-contrast:#ffffff, brand-soft:#e0f5f0,
+      link:#0b8069, accent:#21c8a8,
+      code-bg:#f5faf9, shadow-color:170 40% 18%, selection:#b9ece1,
+    ),
+    dark: (
+      bg:#08130f, bg-elev:#0e1c18, bg-sunken:#050d0a, surface-2:#13251f,
+      text:#e0f2ec, text-soft:#9ab5ad, text-faint:#67827a,
+      border:#1a2d27, border-strong:#274038,
+      brand:#34e0bb, brand-strong:#5cebcb, brand-contrast:#04150f, brand-soft:#0c2e27,
+      link:#34e0bb, accent:#22d3ee,
+      code-bg:#0b1814, shadow-color:170 65% 2%, selection:#14584a,
+    ),
+  ),
+
+  // ───────────── EMBER — rose → amber ─────────────
+  ember: (
+    ring: (346, 82%),
+    light: (
+      bg:#ffffff, bg-elev:#ffffff, bg-sunken:#fdf6f5, surface-2:#fbeceb,
+      text:#26161a, text-soft:#6a5057, text-faint:#9c7d85,
+      border:#f5e3e2, border-strong:#eed0ce,
+      brand:#d81b45, brand-strong:#b41339, brand-contrast:#ffffff, brand-soft:#fde8ec,
+      link:#d81b45, accent:#f59e0b,
+      code-bg:#fdf7f6, shadow-color:346 45% 22%, selection:#ffd3dc,
+    ),
+    dark: (
+      bg:#150e11, bg-elev:#1e1418, bg-sunken:#0e090b, surface-2:#281b20,
+      text:#f6e9ec, text-soft:#c3a6ad, text-faint:#8f757c,
+      border:#2e2027, border-strong:#432f37,
+      brand:#ff6b8a, brand-strong:#ff90a6, brand-contrast:#1a0710, brand-soft:#3a1723,
+      link:#ff6b8a, accent:#fbbf24,
+      code-bg:#1a1216, shadow-color:346 60% 3%, selection:#7d2440,
+    ),
+  ),
+
+  // ───────────── GRAPHITE — monochrome ink ─────────────
+  graphite: (
+    ring: (215, 16%),
+    light: (
+      bg:#ffffff, bg-elev:#ffffff, bg-sunken:#f6f7f9, surface-2:#eef0f3,
+      text:#0c0f14, text-soft:#4d5560, text-faint:#7d8593,
+      border:#e4e7ec, border-strong:#d0d5dd,
+      brand:#0c0f14, brand-strong:#000000, brand-contrast:#ffffff, brand-soft:#e8ebf0,
+      link:#0c0f14, accent:#64748b,
+      code-bg:#f6f7f9, shadow-color:215 25% 16%, selection:#dfe3e9,
+    ),
+    dark: (
+      bg:#0a0b0d, bg-elev:#101215, bg-sunken:#070809, surface-2:#181b20,
+      text:#f2f4f7, text-soft:#a2aab6, text-faint:#6f7783,
+      border:#1e2126, border-strong:#2c3138,
+      brand:#f2f4f7, brand-strong:#ffffff, brand-contrast:#0a0b0d, brand-soft:#1c2026,
+      link:#f2f4f7, accent:#94a3b8,
+      code-bg:#0e1013, shadow-color:215 30% 1%, selection:#2b3138,
+    ),
+  ),
+
+  // ───────────── CLAY — warm paper + terracotta ─────────────
+  clay: (
+    ring: (18, 62%),
+    light: (
+      bg:#fdfaf6, bg-elev:#ffffff, bg-sunken:#f5efe7, surface-2:#efe7dc,
+      text:#1f1a15, text-soft:#5f5449, text-faint:#8d8175,
+      border:#ece3d8, border-strong:#ddd0c0,
+      brand:#b04a26, brand-strong:#8f3a1c, brand-contrast:#ffffff, brand-soft:#f8ebe2,
+      link:#b04a26, accent:#c98a3f,
+      code-bg:#f7f1e9, shadow-color:26 35% 20%, selection:#f2d9c4,
+    ),
+    dark: (
+      bg:#14100d, bg-elev:#1c1713, bg-sunken:#0d0a08, surface-2:#261f19,
+      text:#f2ebe2, text-soft:#b9aa9a, text-faint:#8a7b6c,
+      border:#2b2219, border-strong:#3e3227,
+      brand:#e0865c, brand-strong:#eda37e, brand-contrast:#180c06, brand-soft:#332015,
+      link:#e0865c, accent:#d9a55f,
+      code-bg:#191410, shadow-color:26 55% 2%, selection:#6b3a1f,
+    ),
+  ),
+);
+
+// Shared status colours (same across skins, tuned for contrast)
+:root {
+  --success:#15803d; --success-bg:#eaf6ee;
+  --warning:#a16207; --warning-bg:#fdf4e3;
+  --danger:#c02626;  --danger-bg:#fdecec;
+  --info:#1d4ed8;    --info-bg:#eaf0fd;
+}
+:root[data-mode="dark"], :root:not([data-mode="light"]) {
+  @media (prefers-color-scheme: dark) {
+    --success:#4ade80; --success-bg:#0f2016;
+    --warning:#fbbf24; --warning-bg:#221a0c;
+    --danger:#fb7185;  --danger-bg:#241014;
+    --info:#7dabff;    --info-bg:#101c33;
+  }
+}
+:root[data-mode="dark"] {
+  --success:#4ade80; --success-bg:#0f2016;
+  --warning:#fbbf24; --warning-bg:#221a0c;
+  --danger:#fb7185;  --danger-bg:#241014;
+  --info:#7dabff;    --info-bg:#101c33;
+}
+
+@mixin emit-vars($map) {
+  @each $key, $val in $map {
+    --#{$key}: #{$val};
+  }
+}
+
+@each $name, $data in $skins {
+  $ring: map.get($data, ring);
+  $light: map.get($data, light);
+  $dark: map.get($data, dark);
+  $sel: "" + $name;
+
+  [data-skin="#{$sel}"] {
+    @include emit-vars($light);
+    --brand-h: #{list.nth($ring, 1)};
+    --brand-s: #{list.nth($ring, 2)};
+
+    @media (prefers-color-scheme: dark) {
+      &:not([data-mode="light"]) { @include emit-vars($dark); }
+    }
+    &[data-mode="dark"] { @include emit-vars($dark); }
+  }
+}

data/_sass/docsteer/_syntax.scss

@@ -0,0 +1,72 @@
+// ── Rouge syntax highlighting (theme-aware) ──────────────────
+:root {
+  --tok-comment:#8a919c;
+  --tok-keyword:#cf222e;
+  --tok-string:#0a7d33;
+  --tok-number:#0550ae;
+  --tok-function:#8250df;
+  --tok-variable:#953800;
+  --tok-type:#0550ae;
+  --tok-tag:#116329;
+  --tok-attr:#0550ae;
+  --tok-operator:#0f172a;
+  --tok-deleted-bg:#fbe9e7;
+  --tok-inserted-bg:#e6ffec;
+}
+:root[data-mode="dark"], :root:not([data-mode="light"]) {
+  @media (prefers-color-scheme: dark) {
+    --tok-comment:#7a828e;
+    --tok-keyword:#ff7b72;
+    --tok-string:#7ee787;
+    --tok-number:#79c0ff;
+    --tok-function:#d2a8ff;
+    --tok-variable:#ffa657;
+    --tok-type:#79c0ff;
+    --tok-tag:#7ee787;
+    --tok-attr:#79c0ff;
+    --tok-operator:#e6edf3;
+    --tok-deleted-bg:#3c1618;
+    --tok-inserted-bg:#12261e;
+  }
+}
+:root[data-mode="dark"] {
+  --tok-comment:#7a828e;
+  --tok-keyword:#ff7b72;
+  --tok-string:#7ee787;
+  --tok-number:#79c0ff;
+  --tok-function:#d2a8ff;
+  --tok-variable:#ffa657;
+  --tok-type:#79c0ff;
+  --tok-tag:#7ee787;
+  --tok-attr:#79c0ff;
+  --tok-operator:#e6edf3;
+  --tok-deleted-bg:#3c1618;
+  --tok-inserted-bg:#12261e;
+}
+
+.highlight, .highlight code { color: var(--text); background: transparent; }
+.highlight .c, .highlight .c1, .highlight .cm, .highlight .cp, .highlight .cs { color: var(--tok-comment); font-style: italic; }
+.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kc { color: var(--tok-keyword); }
+.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .se, .highlight .sh, .highlight .si, .highlight .sx, .highlight .sr, .highlight .ss { color: var(--tok-string); }
+.highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .mo, .highlight .il { color: var(--tok-number); }
+.highlight .nf, .highlight .fm { color: var(--tok-function); }
+.highlight .nb, .highlight .bp { color: var(--tok-function); }
+.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi { color: var(--tok-variable); }
+.highlight .nc, .highlight .nn, .highlight .no { color: var(--tok-type); }
+.highlight .nt { color: var(--tok-tag); }
+.highlight .na { color: var(--tok-attr); }
+.highlight .o, .highlight .ow, .highlight .p { color: var(--tok-operator); }
+.highlight .gd { background: var(--tok-deleted-bg); }
+.highlight .gi { background: var(--tok-inserted-bg); }
+.highlight .gh, .highlight .gu { color: var(--tok-number); font-weight: 700; }
+.highlight .err { color: var(--danger); }
+
+// Rouge line-numbers table
+.highlight .lineno {
+  color: var(--text-faint);
+  user-select: none;
+  -webkit-user-select: none;
+  padding-right: var(--sp-4);
+  border-right: 1px solid var(--border);
+  margin-right: var(--sp-4);
+}

data/_sass/docsteer/_toc.scss

@@ -0,0 +1,46 @@
+// ── Right "On this page" TOC ─────────────────────────────────
+.toc {
+  position: sticky;
+  top: calc(var(--nav-h) + var(--sp-6));
+  align-self: start;
+  max-height: calc(100vh - var(--nav-h) - var(--sp-8));
+  overflow-y: auto;
+  font-size: var(--fs-sm);
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-strong) transparent;
+}
+.toc::-webkit-scrollbar { width: 6px; }
+.toc::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
+
+.toc__title {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  margin-bottom: var(--sp-3);
+  padding-left: var(--sp-3);
+  font-size: var(--fs-xs);
+  font-weight: 650;
+  text-transform: uppercase;
+  letter-spacing: var(--tr-wide);
+  color: var(--text-faint);
+}
+.toc__title i { font-size: .9em; opacity: .7; }
+
+.toc__nav { display: grid; }
+.toc__nav a {
+  display: block;
+  padding: 5px var(--sp-3);
+  border-left: 2px solid var(--border);
+  color: var(--text-soft);
+  line-height: 1.45;
+  text-wrap: pretty;
+  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
+}
+.toc__nav a:hover { color: var(--text); border-left-color: var(--border-strong); text-decoration: none; }
+.toc__nav a.lvl-3 { padding-left: var(--sp-6); font-size: .95em; }
+.toc__nav a.is-active {
+  color: var(--brand);
+  border-left-color: var(--brand);
+  font-weight: 600;
+}
+.toc__coffee { margin-top: var(--sp-6); padding-left: var(--sp-3); }