@erclx/canon 4.8.0 → 4.9.0

package/docs/zshrc-aliases.md

@@ -12,6 +12,8 @@ Claude Code auto-discovers the toolkit plugin from `claude/.claude-plugin/plugin
 
 `bun run bootstrap` installs this block. It owns the canonical copy in `scripts/core/bootstrap.sh`, appends it to `~/.zshrc` wrapped in the two marker comments below, and sets `TOOLKIT` to the cloned path. The markers are how a re-run recognizes its own block and skips.
 
+Skipping means a re-run never updates a block already installed, so a shell that ran the bootstrap before the canonical block grew keeps whatever it got that day. To pick up an alias added since, delete the marked block and re-run the bootstrap, or paste the new lines into the block by hand.
+
 A block installed by hand before the managed one has no markers. Bootstrap detects that case through the `alias clp=` line instead, warns, and leaves the block untouched rather than appending a second copy. To switch over, delete the hand-rolled block and re-run the bootstrap.
 
 ```zsh
@@ -27,26 +29,34 @@ alias cls='cl --model sonnet'
 alias clp='claude --plugin-dir $TOOLKIT/claude'
 alias clpc='clp -c'
 alias clps='clp --model sonnet'
+alias clpa='clp agents'
+alias clpac='clpa --cwd .'
 # <<< canon aliases <<<
 ```
 
-The block sits after any `PATH` mutations and the `claude` CLI install. Zsh expands aliases recursively on the first word, so `clr`, `clc`, `clw`, and `cls` inherit their base through `cl`, and `clpc` and `clps` inherit `--plugin-dir` through `clp`. `$TOOLKIT` expands at invocation time, so updating the variable and re-sourcing reroutes all `clp` calls without touching the alias definitions.
+The block sits after any `PATH` mutations and the `claude` CLI install. Zsh expands aliases recursively on the first word, so `clr`, `clc`, `clw`, and `cls` inherit their base through `cl`, and `clpc`, `clps`, and `clpa` inherit `--plugin-dir` through `clp`. `clpac` inherits it one level further, through `clpa`. `$TOOLKIT` expands at invocation time, so updating the variable and re-sourcing reroutes all `clp` calls without touching the alias definitions.
+
+To opt out, delete the block between the two markers. Bootstrap re-adds it on the next run, so skip that step by running `bun install` and `bun link` yourself instead.
 
 ## What each one does
 
-`cl` through `cls` carry no explicit plugin dir. Use them inside the toolkit repository, where Claude Code auto-discovers the plugin from `claude/.claude-plugin/plugin.json`. Loading `--plugin-dir` on top of auto-discovery registers every skill twice and produces duplicate entries in the slash command list.
+`cl`, `clw`, and `cls` carry no explicit plugin dir and start a fresh session. Use them inside the toolkit repository, where Claude Code auto-discovers the plugin from `claude/.claude-plugin/plugin.json`. Loading `--plugin-dir` on top of auto-discovery registers every skill twice and produces duplicate entries in the slash command list.
+
+`clr` and `clc` resume a session rather than launching one, so auto-discovery never fires for them. A resume restores whatever plugin registration the session started with and recomputes nothing, which a bare `claude --resume` demonstrated by holding a stale registration through a full process restart until `--plugin-dir` was passed on the resume itself.
 
 - `cl`: plain session in the current directory
-- `clr`: opens the `/resume` picker scoped to the current directory. Trailing arguments filter by name. `clr auth` limits results to sessions containing "auth".
-- `clc`: jumps straight into the most recent session for the current directory. No picker. Faster than `clr` when the terminal closed and you want back into the same session.
+- `clr`: opens the `/resume` picker scoped to the current directory. Trailing arguments filter by name. `clr auth` limits results to sessions containing "auth". Resuming does not reload the plugin, so reach for `clpc` when the session needs it.
+- `clc`: jumps straight into the most recent session for the current directory. No picker. Faster than `clr` when the terminal closed and you want back into the same session. Resuming does not reload the plugin here either.
 - `clw`: creates a worktree under `.claude/worktrees/<name>/` on a fresh branch and starts a Claude Code session in it. Pass the worktree name as the trailing arg: `clw feat-auth`.
 - `cls`: pins the session to Sonnet instead of the default Opus. Use for routine work where Opus cost is not justified.
 
-`clp`, `clpc`, and `clps` bake in `--plugin-dir`. Use them outside the toolkit repository, where auto-discovery does not fire.
+The `clp` family bakes in `--plugin-dir`. Use it outside the toolkit repository, where auto-discovery does not fire, and for any resume that needs the plugin.
 
 - `clp`: session with the toolkit plugin loaded explicitly
-- `clpc`: jumps straight into the most recent session for the current directory with the plugin loaded. The `clp` mirror of `clc`.
+- `clpc`: jumps straight into the most recent session for the current directory with the plugin loaded. The `clp` mirror of `clc`, and the one resume that carries the plugin.
 - `clps`: `clp` pinned to Sonnet
+- `clpa`: opens the agent view with the plugin loaded, covering background sessions from every directory
+- `clpac`: the same view filtered to background sessions started under the current directory
 
 ## When to use which
 
@@ -58,7 +68,9 @@ Use `cls` or `clps` to save Opus usage on routine sessions. Switch mid-session w
 
 Use `clw <name>` for features that will take more than one session. A worktree isolates the branch, the transcripts, and the `/resume` history. See [Claude Code and git worktrees](../wiki/claude/claude-worktrees.md) for fan-out rules.
 
-Use `clc` to resume the last session without a picker. Use `clr` when you have several sessions and need to pick by name or recency. Outside the toolkit repo, `clpc` is the same shortcut as `clc` with the plugin loaded.
+Use `clc` to resume the last session without a picker. Use `clr` when you have several sessions and need to pick by name or recency. Reach for `clpc` over `clc` wherever the resumed session needs the plugin, inside the toolkit repository as well as outside it, since neither resume re-runs discovery.
+
+Use `clpa` to see what is running across every directory, and `clpac` when only the current project matters.
 
 ## Why not a function
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@erclx/canon",
   "type": "module",
-  "version": "4.8.0",
+  "version": "4.9.0",
   "description": "Infrastructure and quality tooling for developer workflows",
   "license": "MIT",
   "bin": {

package/scripts/core/bootstrap.sh

@@ -36,12 +36,16 @@ alias cls='cl --model sonnet'
 alias clp='claude --plugin-dir \$TOOLKIT/claude'
 alias clpc='clp -c'
 alias clps='clp --model sonnet'
+alias clpa='clp agents'
+alias clpac='clpa --cwd .'
 $MARKER_CLOSE
 EOF
 }
 
 install_aliases() {
   log_step "Installing Claude Code shell aliases"
+  log_info "This step manages a marked alias block in $ZSHRC, the only file outside the repo this script writes."
+  log_info "Delete the block and its two marker comments to remove the aliases. Re-running never adds a second copy."
 
   if [ -f "$ZSHRC" ] && grep -qF "$MARKER_OPEN" "$ZSHRC"; then
     log_info "Aliases already present in $ZSHRC, skipping"

package/src/commands/design.ts

@@ -1,14 +1,80 @@
-import { existsSync } from 'node:fs'
-import { resolve } from 'node:path'
+import { copyFileSync, existsSync, mkdirSync } from 'node:fs'
+import { basename, join, relative, resolve } from 'node:path'
 import type { Command } from 'commander'
-import { creationRel } from '@/record-root'
+import {
+  createDesignAdapter,
+  DESIGN_INSTALL_DIR,
+  DESIGN_PROJECT_SUBDIR,
+} from '@/design/adapter'
+import { buildDesignCss } from '@/design/css'
 import { renderDesignDoc } from '@/design/render'
-import { palette } from '@/ui'
+import { DESIGN_BASE_CSS, DESIGN_DOCUMENT, regenDesign } from '@/design/regen'
+import { PROJECT_ROOT } from '@/project-root'
+import { creationRel } from '@/record-root'
+import { recordStamp, runDomainSync } from '@/sync/engine'
+import { resolveTarget } from '@/target'
+import { intro, logAdd, logError, logInfo, outro, palette } from '@/ui'
 
 export function register(program: Command): void {
   const design = program
     .command('design')
-    .description('Design system commands (render)')
+    .description('Design system commands (regen, css, render, install, sync)')
+
+  design
+    .command('regen')
+    .description(
+      'Rewrite .claude/DESIGN.md and the base stylesheet from src/design/tokens.ts',
+    )
+    .addHelpText(
+      'after',
+      [
+        '',
+        'Unlike install and sync, this runs against the toolkit checkout rather',
+        'than a target. It rewrites the record and the base stylesheet from the',
+        'token module and refuses where the record is absent, which is what the',
+        'CLI installed into a project as a dependency looks like.',
+        '',
+      ].join('\n'),
+    )
+    .action(() => {
+      const { GREEN, GREY, NC, RED, WHITE } = palette(process.stderr)
+
+      // Both outputs resolve from `PROJECT_ROOT`, which is the installed
+      // package directory when the CLI runs out of a target's `node_modules`.
+      // The record is the one output that is already committed here and ships
+      // with no package, so its absence is what separates the two.
+      if (!existsSync(join(PROJECT_ROOT, DESIGN_DOCUMENT))) {
+        process.stderr.write(
+          `${GREY}┌${NC}\n${GREY}│${NC} ${RED}✗${NC} No ${DESIGN_DOCUMENT} at ${PROJECT_ROOT}. Regen runs in the toolkit checkout, not against a target.\n${GREY}└${NC}\n`,
+        )
+        process.exitCode = 1
+        return
+      }
+
+      process.stderr.write(
+        `${GREY}┌${NC}\n${GREY}│${NC} ${WHITE}Regenerate design source${NC}\n`,
+      )
+      const result = regenDesign(PROJECT_ROOT)
+      for (const path of [result.documentPath, result.cssPath]) {
+        process.stderr.write(
+          `${GREY}│${NC} ${GREEN}✓${NC} ${relative(PROJECT_ROOT, path)}\n`,
+        )
+      }
+      process.stderr.write(`${GREY}└${NC}\n`)
+    })
+
+  design
+    .command('css')
+    .description('Emit the design tokens and components as CSS on stdout')
+    .option(
+      '--no-components',
+      'Custom properties only, without the component rules',
+    )
+    .action((opts: { components: boolean }) => {
+      process.stdout.write(
+        buildDesignCss(undefined, { components: opts.components }),
+      )
+    })
 
   design
     .command('render')
@@ -38,4 +104,80 @@ export function register(program: Command): void {
         `${GREY}│${NC} ${GREEN}✓${NC} ${result.htmlPath}\n${GREY}│${NC} ${GREEN}✓${NC} ${result.cssPath}\n${GREY}└${NC}\n`,
       )
     })
+
+  design
+    .command('install')
+    .description('Install the base stylesheet into a project')
+    .argument('[target]', 'Target directory', '.')
+    .helpOption('-h, --help', 'Show this help message')
+    .addHelpText(
+      'after',
+      [
+        '',
+        'Installs one toolkit-owned file and creates no override. A project',
+        `overrides a value by writing ${join(DESIGN_INSTALL_DIR, DESIGN_PROJECT_SUBDIR)}/`,
+        'itself, which sync never touches. Nothing arrives on a project that',
+        'has not run this, so a design value reaches a target on an install',
+        'rather than on the next sync.',
+        '',
+      ].join('\n'),
+    )
+    .action(async (target: string) => {
+      process.exitCode = await runInstall(target)
+    })
+
+  design
+    .command('sync')
+    .description(
+      'Update the base stylesheet already installed under .claude/design/',
+    )
+    .argument('[target]', 'Target directory', '.')
+    .helpOption('-h, --help', 'Show this help message')
+    .action(async (target: string) => {
+      process.exitCode = await runDomainSync(
+        createDesignAdapter(PROJECT_ROOT),
+        target,
+        { protectedRoot: PROJECT_ROOT },
+      )
+    })
+}
+
+/**
+ * Copies the base and stops. The override folder is deliberately not created:
+ * an empty override is a file the project did not ask for and did not write,
+ * the three-way merge already handles a missing side, and an empty file invites
+ * a target to fill it before it has an opinion.
+ */
+async function runInstall(target: string): Promise<number> {
+  intro('canon design install')
+
+  const resolved = resolveTarget(target, PROJECT_ROOT)
+  if (typeof resolved === 'number') {
+    outro()
+    return resolved
+  }
+
+  const source = join(PROJECT_ROOT, DESIGN_BASE_CSS)
+  if (!existsSync(source)) {
+    logError(
+      `No base stylesheet at ${DESIGN_BASE_CSS}. Run canon design regen.`,
+    )
+    outro()
+    return 1
+  }
+
+  const dir = join(resolved, DESIGN_INSTALL_DIR)
+  mkdirSync(dir, { recursive: true })
+
+  const dest = join(dir, basename(source))
+  copyFileSync(source, dest)
+  logAdd(relative(resolved, dest))
+
+  await recordStamp(createDesignAdapter(PROJECT_ROOT), resolved, new Date())
+
+  logInfo(
+    `Override a value in ${join(DESIGN_INSTALL_DIR, DESIGN_PROJECT_SUBDIR)}/, which sync leaves alone.`,
+  )
+  outro()
+  return 0
 }

package/src/commands/sync.ts

@@ -7,7 +7,7 @@ import {
   buildCheckReport,
   type CheckReport,
   hasDrift,
-  SCANNED_DOMAINS,
+  uncoveredDomains,
 } from '@/sync/check'
 import { createGitRunner, createPullRequestOpener, hasGh } from '@/sync/git'
 import {
@@ -35,6 +35,7 @@ import { describeSkew } from '@/version/skew'
 
 const SYNC_ARGS: Record<SyncDomain, readonly string[]> = {
   governance: ['gov', 'sync'],
+  design: ['design', 'sync'],
   claude: ['claude', 'sync'],
 }
 
@@ -195,10 +196,7 @@ function renderCheck(report: CheckReport): void {
   // naming it here repeats what that section already said under a second
   // remedy, where a scanned domain nobody installed has no section at all and
   // this line is the only place it appears.
-  const unmigrated = report.unmigrated.map((entry) => entry.domain)
-  const uncovered = SCANNED_DOMAINS.filter(
-    (domain) => !report.covers.includes(domain) && !unmigrated.includes(domain),
-  )
+  const uncovered = uncoveredDomains(report)
   if (uncovered.length === 0) return
 
   const { GREY, NC } = palette(process.stderr)

package/src/commands/tasks.ts

@@ -81,7 +81,9 @@ export function register(program: Command): void {
 
   tasks
     .command('archive')
-    .description('Move a shipped task out of the board and clear its ordering')
+    .description(
+      'Move a shipped task and its plan out of the board and clear its ordering',
+    )
     .argument('[task]', 'Task filename stem, as in v28.1-trigger-escalation')
     .helpOption('-h, --help', 'Show this help message')
     .option(
@@ -93,6 +95,10 @@ export function register(program: Command): void {
     .addHelpText(
       'after',
       [
+        '',
+        'The task carries its plan with it when no other live task cites that',
+        'plan, and the archived task keeps a working Plan: pointer at the new',
+        'path. A plan several tasks share stays where it is.',
         '',
         'Exit codes:',
         '  0  the task was archived',
@@ -812,6 +818,11 @@ function report(
   logStep('Archived')
   logRemove(relative(root, outcome.from))
   logAdd(relative(root, outcome.to))
+  if (outcome.plan) {
+    logRemove(relative(root, outcome.plan.from))
+    logAdd(relative(root, outcome.plan.to))
+    logInfo('retargeted the Plan: line')
+  }
   if (outcome.priorityRowRemoved) logInfo('cleared the ordering row')
   if (outcome.indexRegenerated) logInfo('regenerated index.md')
   outro()
@@ -839,5 +850,11 @@ function recordFor(
     to: relative(root, outcome.to),
     priorityRowRemoved: outcome.priorityRowRemoved,
     indexRegenerated: outcome.indexRegenerated,
+    plan: outcome.plan
+      ? {
+          from: relative(root, outcome.plan.from),
+          to: relative(root, outcome.plan.to),
+        }
+      : null,
   }
 }

package/src/commands/teach.ts

@@ -16,6 +16,7 @@ import {
   type Term,
   type TermOutcome,
   type WorkspaceSummary,
+  writeStylesheet,
 } from '@/teach/workspace'
 import {
   intro,
@@ -276,6 +277,77 @@ export function register(program: Command): void {
     .action(async (topic: string, opts: LessonCommandOptions) => {
       process.exitCode = await runLesson(topic, opts)
     })
+
+  teach
+    .command('stylesheet')
+    .description('Seed a workspace stylesheet from the design source')
+    .argument('<topic>', 'Workspace folder or topic, as in regular-expressions')
+    .helpOption('-h, --help', 'Show this help message')
+    .option('--force', 'Rewrite a stylesheet the workspace already carries')
+    .option('--json', 'Emit a machine-readable record on stdout')
+    .option('--root <path>', 'Teach root, defaulting to the main worktree')
+    .addHelpText(
+      'after',
+      [
+        '',
+        'Exit codes:',
+        '  0  the workspace carries a stylesheet, written now or already there',
+        '  1  refused, with the reason on stderr or in the JSON record',
+        '',
+        'The file it writes carries the design tokens as custom properties and',
+        'the component rules built on them, so a workspace renders in the same',
+        'system every other surface does. Add lesson rules under the seed and',
+        'read a value through its property rather than restating the hex.',
+        '',
+        'An existing stylesheet is left alone, since a workspace adds to this',
+        'file as it goes. Pass --force to take the seed back over it.',
+        '',
+        'Examples:',
+        '  canon teach stylesheet regular-expressions --json',
+        '',
+      ].join('\n'),
+    )
+    .action(async (topic: string, opts: StylesheetCommandOptions) => {
+      process.exitCode = await runStylesheet(topic, opts)
+    })
+}
+
+interface StylesheetCommandOptions {
+  readonly force?: boolean
+  readonly json?: boolean
+  readonly root?: string
+}
+
+async function runStylesheet(
+  topic: string,
+  opts: StylesheetCommandOptions,
+): Promise<number> {
+  const emitJson = opts.json ?? false
+  const root = await rootFor(opts.root)
+  const outcome = await writeStylesheet(root, topic, opts.force ?? false)
+
+  if (!outcome.ok) {
+    return reportRefusal('canon teach stylesheet', outcome, emitJson, root)
+  }
+
+  if (emitJson) {
+    process.stdout.write(
+      `${JSON.stringify({
+        ok: true,
+        root,
+        slug: outcome.slug,
+        path: outcome.path,
+        written: outcome.written,
+      })}\n`,
+    )
+    return 0
+  }
+
+  intro('canon teach stylesheet')
+  logStep(outcome.written ? 'Written' : 'Already present, left alone')
+  logInfo(outcome.path)
+  outro()
+  return 0
 }
 
 function collect(value: string, previous: string[]): string[] {

package/src/design/adapter.ts

@@ -0,0 +1,59 @@
+import { basename, join } from 'node:path'
+import { DESIGN_BASE_CSS } from '@/design/regen'
+import type { InstalledFile, SyncAdapter } from '@/sync/engine'
+
+/**
+ * The channel a design value reaches a target on.
+ *
+ * Base plus a target-owned override, reconciled by the three-way merge the sync
+ * engine already implements. Overwrite was dropped before this was built and
+ * the reason is a measurement rather than an argument: a headless sync in
+ * another domain deleted a deploy job, replaced a screenshot harness, and
+ * reverted a shipped fix, because naming a stack was read as consent to lose an
+ * edit inside it.
+ *
+ * Layering is what bounds what the merge has to arbitrate. Nothing a project
+ * wrote lives in the base, so the base changes freely, and the merge shrinks to
+ * the properties a target actually overrode.
+ */
+
+/** The folder a design install writes into, under the target's `.claude/`. */
+export const DESIGN_INSTALL_DIR = join('.claude', 'design')
+
+/**
+ * Where a target's own values go. `projectSubdir` makes every file here
+ * project-authored by location rather than by the name inference, so an
+ * override named `base.css` is still the target's and never overwritten.
+ *
+ * It ships absent rather than empty. An empty override is a file a project did
+ * not ask for and did not write, the merge already handles a missing side, and
+ * an empty file invites a target to fill it before it has an opinion.
+ */
+export const DESIGN_PROJECT_SUBDIR = 'project'
+
+export function designSourceDir(root: string): string {
+  return join(root, 'src', 'design')
+}
+
+export function createDesignAdapter(root: string): SyncAdapter {
+  const base = join(root, DESIGN_BASE_CSS)
+
+  return {
+    banner: 'canon design sync',
+    label: 'design',
+    missingMessage:
+      "No design surface found in target. Run 'canon design install' first.",
+    unit: 'changes',
+    installPattern: '**/*.css',
+    installedRoot: (target: string) => join(target, DESIGN_INSTALL_DIR),
+    /**
+     * One shipped file, matched by name the way the gov adapter matches a rule,
+     * so a base that moved inside the toolkit still syncs into the place the
+     * target already holds it.
+     */
+    locateSource: (file: InstalledFile) =>
+      basename(file.path) === basename(base) ? base : undefined,
+    projectSubdir: DESIGN_PROJECT_SUBDIR,
+    stamp: { domain: 'design', toolkitRoot: root },
+  }
+}

package/src/design/base.css

@@ -0,0 +1,123 @@
+/* Generated by `canon design regen` from src/design/tokens.ts. Do not edit.
+   This is the base half of a design install. A target overrides a value in
+   .claude/design/project/, which the three-way merge leaves alone, so this
+   file changes freely and nothing a project wrote lives in it. */
+
+:root {
+  --color-background: #191512;
+  --color-surface: #211c19;
+  --color-border: #2f2823;
+  --color-text: #f4efe9;
+  --color-text-body: #c9c0b7;
+  --color-text-secondary: #a79d94;
+  --color-muted: #948a81;
+  --color-accent: #e0724b;
+  --color-light-background: #faf7f2;
+  --color-light-surface: #f4efe6;
+  --color-light-text: #1a1815;
+  --color-light-muted: #726b62;
+  --color-light-accent: #a4471c;
+  --color-light-border: #e4dcd0;
+  --space-xs: 6px;
+  --space-sm: 12px;
+  --space-md: 18px;
+  --space-lg: 24px;
+  --space-xl: 30px;
+  --space-frame-top: 44px;
+  --space-frame-inline: 52px;
+  --space-frame-bottom: 38px;
+  --type-display-size: 34px;
+  --type-display-lh: 1.3;
+  --type-heading-size: 19px;
+  --type-heading-lh: 1.3;
+  --type-body-size: 16px;
+  --type-body-lh: 1.65;
+  --type-label-size: 12px;
+  --type-label-lh: 1.45;
+  --type-code-size: 14.5px;
+  --type-code-lh: 1.3;
+  --radius-frame: 12px;
+  --radius-panel: 10px;
+  --radius-action: 7px;
+  --radius-pill: 999px;
+  --radius-marker: 999px;
+}
+
+/* The record declares no light counterpart for text-body, text-secondary, so
+   a light-ground surface using one is reading a dark value. Declare the
+   counterpart in src/design/tokens.ts rather than overriding it here. */
+[data-theme='light'] {
+  --color-background: var(--color-light-background);
+  --color-surface: var(--color-light-surface);
+  --color-text: var(--color-light-text);
+  --color-muted: var(--color-light-muted);
+  --color-accent: var(--color-light-accent);
+  --color-border: var(--color-light-border);
+}
+
+/* status
+   A dot and a word, not a pill. A bordered uppercase chip is a second
+   vocabulary for a fact the dot already carries, so the marker is the only
+   status shape and `.is-done` is the only variant. */
+
+.status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.42rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--color-muted);
+  white-space: nowrap;
+}
+
+.status::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  flex: none;
+  border-radius: var(--radius-marker);
+  background: var(--color-border);
+}
+
+.status.is-done::before {
+  background: var(--color-accent);
+}
+
+/* scrollbar
+   Every scrolling region takes the same bar, the page included. Scoping it
+   to one component leaves its neighbors on the browser default, which is
+   what reads as two designs on one page. `scrollbar-color` covers Firefox
+   and the `::-webkit-` rules cover the rest, both from the same two tokens
+   so the two engines cannot drift apart. */
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  border-radius: var(--radius-marker);
+  background: var(--color-border);
+  /* Inset by painting a border in the page color, which is what keeps the
+     thumb off the edges without a second element. */
+  border: 3px solid var(--color-background);
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--color-muted);
+}
+
+*::-webkit-scrollbar-corner {
+  background: transparent;
+}