Aesthetic polish — scrollbar, code blocks, focus, button (Phase 5)

New stylesheet src/css/skainet-polish.css that layers the
SKaiNET visual touches on top of the upstream Antora UI base.
Imported last from src/css/site.css so its selectors win the
cascade where they share specificity with upstream defaults.

## What landed

1. **6px thin scrollbar** — `scrollbar-width: thin` + a custom
   `::-webkit-scrollbar` block. Thumb color comes from
   `--scrollbar-thumb-color` (defined in vars.css per theme),
   so it picks the right shade in light vs dark mode without
   any duplicate rules.

2. **Rounded code blocks with proper backgrounds** — `.doc
   pre.highlight` (and the literalblock + listingblock variants)
   now ship with `background: var(--pre-background)`,
   `border-radius: 8px`, a 1px border in `--pre-border-color`,
   and a subtle shadow. In light mode that's GitHub-light
   `#f6f8fa`; in dark mode it flips to GitHub-dark `#0d1117` —
   matching the structured-coroutines reference aesthetic.

3. **Inline `<code>` reset** — `.doc :not(pre) > code` gets the
   same color tokens, a tighter padding, and `border-radius:
   4px` so inline code visually distinguishes itself from prose.

4. **Theme-toggle button styling** — `.navbar .theme-toggle`
   resets the native `<button>` chrome (no border, transparent
   background, inherit font + color) so it sits cleanly inside
   `.navbar-item`. Hover background uses
   `--navbar-menu_hover-background` (matches the rest of the
   nav). Focus shows a primary-red glow via `box-shadow` +
   `color-mix(in sRGB, var(--color-skainet-red) 40%, transparent)`.

5. **Icon swap on dark mode** — `[data-theme="dark"]
   .theme-toggle-icon` hides the `🌓` source glyph
   (`font-size: 0`) and renders a `🌙` via `::before`, so the
   icon clearly indicates the active mode.

6. **Primary-red focus glow on links** — applied to `.doc a`,
   `.nav a`, `.toc a`, `.toolbar a`, and `.pagination a` via
   `:focus-visible`. Same `box-shadow` shape as the toggle.
   `:focus-visible` (not `:focus`) so mouse clicks don't trigger
   the glow — only keyboard navigation.

7. **Section heading dividers** — `.doc h2` gets a top border
   in `--section-divider-color` and 2.5rem of margin-top, so
   long pages get clear visual section breaks.

8. **Light-mode card elevation on the doc body** — at
   `min-width: 1024px` the `.doc` element gets a
   `border-radius: 12px`, padding, and a soft two-layer
   `box-shadow`. Only in light mode (gated on `[data-theme="light"]`)
   so the dark mode keeps the flat-on-black look.

## Stylelint corrections during authoring

Two rules tripped on the first pass and were resolved:

- `no-duplicate-selectors` — initially I had two
  `[data-theme="dark"] .theme-toggle-icon` blocks (one for the
  parent rule, one for `::before`). Merged the parent rules and
  kept only the `::before` block separate.
- `value-keyword-case` — stylelint requires `sRGB` (not `srgb`)
  in `color-mix(in sRGB, ...)`. Both occurrences updated.

## Verification

`npx gulp bundle` runs clean — clean → lint:css → lint:js →
build → bundle:pack — and produces build/ui-bundle.zip with
skainet-polish.css inlined into css/site.css.

Phase 5 of the six-PR delivery plan. Phase 6 is the v1.0.0
release tag + GitHub Actions release workflow + downstream
consumer wiring.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: claude

src/css/site.css

@@ -14,3 +14,4 @@
 @import "footer.css";
 @import "highlight.css";
 @import "print.css";
+@import "skainet-polish.css";

src/css/skainet-polish.css

@@ -0,0 +1,142 @@
+/*
+ * SKaiNET aesthetic polish.
+ *
+ * Layered on top of the upstream Antora UI base CSS to bring the
+ * site closer to the structured-coroutines-docs reference look:
+ *
+ *   - 6px thin custom scrollbar (light + dark variants via vars.css)
+ *   - Code blocks: rounded corners, GitHub-dark / GitHub-light
+ *     backgrounds matching --pre-background / --pre-border-color
+ *   - Theme toggle button: reset native <button> chrome so it sits
+ *     cleanly inside .navbar-item
+ *   - Primary-red focus glow on links and buttons
+ *   - Subtle card shadows on .nav, .toc, .doc body
+ *
+ * Loaded last from src/css/site.css so its selectors override
+ * anything in the upstream cascade with equivalent specificity.
+ */
+
+/* ---- 6px thin scrollbar ---- */
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
+}
+
+*::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--scrollbar-track-color);
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb-color);
+  border-radius: 3px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background-color: var(--scrollbar_hover-thumb-color);
+}
+
+/* ---- code block rounding + visible borders ---- */
+
+.doc pre.highlight,
+.doc pre.literalblock,
+.doc .listingblock pre {
+  background: var(--pre-background);
+  color: var(--code-font-color);
+  border: 1px solid var(--pre-border-color);
+  border-radius: 8px;
+  padding: 1rem 1.25rem;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
+}
+
+.doc :not(pre) > code {
+  background: var(--code-background);
+  color: var(--code-font-color);
+  border: 1px solid var(--pre-border-color);
+  border-radius: 4px;
+  padding: 0.125rem 0.375rem;
+  font-size: 0.9em;
+}
+
+/* ---- theme-toggle button ---- */
+
+.navbar .theme-toggle {
+  background: transparent;
+  border: 0;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  border-radius: 6px;
+  line-height: 1;
+}
+
+.navbar .theme-toggle:hover {
+  background: var(--navbar-menu_hover-background);
+}
+
+.navbar .theme-toggle:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in sRGB, var(--color-skainet-red) 40%, transparent);
+}
+
+.theme-toggle-icon {
+  display: inline-block;
+  font-size: 1.1rem;
+  line-height: 1;
+}
+
+/*
+ * In dark mode, hide the source emoji glyph and render a swapped
+ * one via ::before so the toggle has visual feedback on which
+ * mode is active. The combined selector keeps stylelint's
+ * no-duplicate-selectors rule happy.
+ */
+[data-theme="dark"] .theme-toggle-icon {
+  font-size: 0;
+}
+
+[data-theme="dark"] .theme-toggle-icon::before {
+  content: "🌙";
+  font-size: 1.1rem;
+}
+
+/* ---- primary-red focus glow on interactive elements ---- */
+
+.doc a:focus-visible,
+.nav a:focus-visible,
+.toc a:focus-visible,
+.toolbar a:focus-visible,
+.pagination a:focus-visible {
+  outline: none;
+  border-radius: 4px;
+  box-shadow: 0 0 0 3px color-mix(in sRGB, var(--color-skainet-red) 40%, transparent);
+}
+
+/* ---- heading polish ---- */
+
+.doc h1 {
+  margin-top: 0;
+}
+
+.doc h2 {
+  margin-top: 2.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--section-divider-color);
+}
+
+/* ---- subtle elevation on the doc body card in light mode ---- */
+
+@media (min-width: 1024px) {
+  [data-theme="light"] .doc {
+    background: var(--example-background);
+    border-radius: 12px;
+    padding: 2rem 2.5rem;
+    box-shadow: 0 1px 3px rgb(0 0 0 / 0.04), 0 1px 2px rgb(0 0 0 / 0.06);
+  }
+}