tinymoon 0.3.0__tar.gz → 0.4.0__tar.gz

{tinymoon-0.3.0 → tinymoon-0.4.0}/.gitignore

@@ -11,6 +11,9 @@ __pycache__/
 .DS_Store
 coverage/
 target/
+test-results/
+playwright-report/
+.playwright/
 .rlsbl-notes-*.tmp
 .rlsbl/lock
 .rlsbl-monorepo/lock

tinymoon-0.4.0/PKG-INFO

@@ -0,0 +1,209 @@
+Metadata-Version: 2.4
+Name: tinymoon
+Version: 0.4.0
+Summary: Zero-dependency vanilla JS/CSS UI framework with a conformance checker CLI
+Project-URL: Homepage, https://github.com/smm-h/tinymoon
+Project-URL: Repository, https://github.com/smm-h/tinymoon
+Author-email: smm-h <smmh72@gmail.com>
+License-Expression: MIT
+License-File: LICENSE
+Keywords: css,framework,rlsbl,ui,vanilla-js,zero-dependency
+Classifier: Development Status :: 4 - Beta
+Classifier: License :: OSI Approved :: MIT License
+Classifier: Programming Language :: Python :: 3
+Classifier: Programming Language :: Python :: 3.12
+Classifier: Programming Language :: Python :: 3.13
+Classifier: Programming Language :: Python :: 3.14
+Classifier: Programming Language :: Python :: Implementation :: CPython
+Requires-Python: >=3.12
+Requires-Dist: strictcli
+Description-Content-Type: text/markdown
+
+# tinymoon
+
+A content-first web framework: you bring plain, semantic content and small view objects; tinymoon brings the app -- shell, typography, widgets, motion. Everything ships as native ES modules and plain CSS with zero dependencies, zero build steps, and zero network loads.
+
+tinymoon's palette is its identity. Consumer CSS must not redefine framework tokens.
+
+## Install
+
+npm (core + extras):
+
+```
+npm install tinymoon
+```
+
+The npm package exports two barrels: `"tinymoon"` (core primitives) and `"tinymoon/extras"` (wiki, networking, settings). Assets are available at `"tinymoon/assets/*"`.
+
+PyPI (assets + conformance checker CLI):
+
+```
+pip install tinymoon
+```
+
+`tinymoon.assets_path()` returns the directory containing `css/`, `js/`, and `fonts/`.
+
+Go (embedded filesystem):
+
+```go
+import "github.com/smm-h/tinymoon"
+
+// tinymoon.Assets  — embed.FS rooted at the repo root
+// tinymoon.FS()    — fs.FS rooted at the assets directory
+// tinymoon.Handler() — http.Handler serving the assets
+```
+
+## Quick start
+
+Link the four CSS layers (tokens first) and import the ES modules -- no build step, no bundler:
+
+```html
+<link rel="stylesheet" href="assets/css/tokens.css">
+<link rel="stylesheet" href="assets/css/base.css">
+<link rel="stylesheet" href="assets/css/shell.css">
+<link rel="stylesheet" href="assets/css/primitives.css">
+
+<script type="module">
+import { mountShell, toast } from "./assets/js/index.js";
+import { createSettings } from "./assets/js/extras.js";
+
+const settings = createSettings({
+  storageKey: "my-app",
+  defaults: { theme: "dark" },
+});
+settings.load();
+settings.applyTheme();
+
+const shell = mountShell({
+  root: document.body,
+  brand: {
+    name: "myapp",
+    logoHTML: '<div class="wordmark">my<b>app</b></div>',
+  },
+  routes: {
+    home: {
+      title: "Home",
+      icon: "library",
+      view: () => HomeView,
+    },
+  },
+  defaultRoute: "home",
+});
+</script>
+```
+
+With npm, use bare specifiers by adding an import map:
+
+```html
+<script type="importmap">
+{ "imports": { "tinymoon": "./node_modules/tinymoon/assets/js/index.js",
+               "tinymoon/extras": "./node_modules/tinymoon/assets/js/extras.js" } }
+</script>
+```
+
+## Primitives
+
+### Core (`tinymoon`)
+
+**Shell and DOM:**
+
+- `mountShell(opts)` -- mount the app shell with sidebar, topbar, router, and footer slot
+- `el(tag, cls?, text?)` -- element factory
+- `$(sel, root?)` -- querySelector shorthand
+- `$$(sel, root?)` -- querySelectorAll (returns array)
+
+**Controls:**
+
+- `createSwitch(opts)` -- role="switch" toggle button (not form-participating)
+- `createCheckbox(opts)` -- hidden-native checkbox facade (form-participating)
+- `createRadio(opts)` -- hidden-native radio facade (form-participating)
+- `createFileInput(opts)` -- hidden-native file input facade (form-participating)
+- `createSegmented(opts)` -- segmented control with hidden radios (form-participating)
+- `createTabs(opts)` -- tab bar (not form-participating)
+- `createSelect(opts)` -- custom dropdown select
+- `createDatePicker(opts)` -- calendar date picker
+- `copyButton(getText, tip?)` -- one-click clipboard copy button
+- `kebabButton(itemsFn, tip?)` -- three-dot menu button
+
+**Overlays:**
+
+- `toast(msg, level?, opts?)` -- toast notification ("ok", "err", or plain)
+- `setToastErrorHook(fn)` -- mirror error toasts into a custom hook
+- `openModal(opts)` -- modal dialog (returns close function)
+- `openPopover(anchor, builder)` / `closePopover()` -- positioned popover
+- `registerCtx(key, provider)` / `registerCtxFooter(fn)` -- context menu regions
+- `showCtxMenu(x, y, items, anchor?)` / `hideCtxMenu()` -- programmatic context menu
+- `ensureTooltip(el, text)` / `hideTip()` -- tooltip lifecycle
+- `ensureHovercard(el, md)` / `hideHovercard()` -- rich hovercard with markdown
+
+**Data and utilities:**
+
+- `ICONS` -- built-in icon set (26 icons)
+- `icon(name)` -- render an icon as an SVG string
+- `registerIcons(map)` -- merge consumer icons (collisions are hard errors)
+- `renderMiniMd(text)` -- inline markdown to DOM fragment (bold, code, links)
+- `cssVar(name)` -- read a computed CSS custom property value
+- `ensureRoot()` -- ensure the root element exists
+- `placeBelow(anchor, el)` -- position an element below an anchor
+- `registerCopyable(el, fn)` / `unregisterCopyable(el)` -- register elements for the copy system
+- `getCopyData(el)` -- retrieve copy data from a registered element
+
+### Extras (`tinymoon/extras`)
+
+- `api(path)` -- GET JSON from a same-origin path
+- `post(path, body, onError?)` -- POST JSON to a same-origin path
+- `createSettings(opts)` -- localStorage-backed settings store with schema validation
+- `createWikiView(opts)` -- wiki view factory with table of contents and deep-linkable sections
+- `renderDocMd(md)` -- block-level markdown to DOM (paragraphs, subheadings, lists)
+
+## Identity
+
+The visual identity is enforced by constraint, not offered as options:
+
+- **Sharp corners everywhere** -- `border-radius` is 0; no exceptions.
+- **Three-font system** -- brand headings (Space Grotesk), UI body (IBM Plex Sans), monospace for data (IBM Plex Mono). All vendored, no network loads.
+- **Glow language** -- accent glows on active cards, focused inputs, and modals. Restrained and consistent.
+- **Grain** -- a subtle SVG noise overlay on the background.
+- **Motion timing** -- all transitions are 100--180ms one-shot eases. The spinner is the only continuous animation.
+- **No native browser controls** -- checkbox, radio, select, file input, and date picker are all custom-drawn with hidden native elements for form participation and accessibility.
+- **AA contrast** -- every text-on-background token pair passes WCAG AA 4.5:1. Enforced by CI.
+- **Reduced motion** -- `prefers-reduced-motion: reduce` suppresses all animation and transition durations to near-zero. Enforced by E2E tests.
+
+Design tokens let you re-theme and re-accent; they do not let you opt out of the identity.
+
+## Conformance checker
+
+`tinymoon check` scans `.html`, `.css`, and `.js` files and enforces the framework's non-negotiables as hard errors:
+
+- **external-url** -- no network loads (no `http://`, `https://`, or `//host` URLs in HTML, CSS, or JS)
+- **native-control** -- no native `<select>`, `<dialog>`, or `<input type=checkbox|radio|file>`
+- **title-attr** -- no `title=` attributes (use the tooltip primitive)
+- **border-radius** -- no `border-radius` other than `0`/`0px`
+- **raw-color** -- no color literals outside `:root`/`html[data-theme]` token definitions
+
+```
+uvx tinymoon check --dir ./web
+```
+
+One line per violation, exit non-zero on any finding. No `--skip`, `--ignore`, or warning mode. Exempt specific URLs by adding them to `tinymoon-allowlist.txt` at the scanned directory root.
+
+## App model
+
+**Copy system.** `registerCopyable(el, fn)` marks any element as copyable -- clicking it copies the value returned by `fn()` to the clipboard, with a toast confirmation. The `copyButton` helper wires a standalone copy button. `getCopyData(el)` retrieves registered copy data programmatically.
+
+**Selection model.** Elements declare tooltips via `data-tooltip` (plain text) and hovercards via `data-hovercard` (markdown with bold, code, links). The framework manages hover intent, positioning, and the hover bridge automatically.
+
+**View contract.** Routes map to view objects `{root, built, build(), refresh(), setSub?}`. The shell's router owns the lifecycle: `build()` constructs the DOM once (idempotent), `refresh()` runs on every visit, `setSub(sub)` receives deep-link tails. A string value instead of a view factory activates the content-first path -- plain HTML styled automatically with zero framework classes.
+
+## Gallery
+
+The gallery is a complete tinymoon app that documents every design token and primitive. Serve the repo root with a static server and open `/gallery/`:
+
+```
+python3 -m http.server
+# open http://localhost:8000/gallery/
+```
+
+## License
+
+MIT

tinymoon-0.4.0/README.md

@@ -0,0 +1,188 @@
+# tinymoon
+
+A content-first web framework: you bring plain, semantic content and small view objects; tinymoon brings the app -- shell, typography, widgets, motion. Everything ships as native ES modules and plain CSS with zero dependencies, zero build steps, and zero network loads.
+
+tinymoon's palette is its identity. Consumer CSS must not redefine framework tokens.
+
+## Install
+
+npm (core + extras):
+
+```
+npm install tinymoon
+```
+
+The npm package exports two barrels: `"tinymoon"` (core primitives) and `"tinymoon/extras"` (wiki, networking, settings). Assets are available at `"tinymoon/assets/*"`.
+
+PyPI (assets + conformance checker CLI):
+
+```
+pip install tinymoon
+```
+
+`tinymoon.assets_path()` returns the directory containing `css/`, `js/`, and `fonts/`.
+
+Go (embedded filesystem):
+
+```go
+import "github.com/smm-h/tinymoon"
+
+// tinymoon.Assets  — embed.FS rooted at the repo root
+// tinymoon.FS()    — fs.FS rooted at the assets directory
+// tinymoon.Handler() — http.Handler serving the assets
+```
+
+## Quick start
+
+Link the four CSS layers (tokens first) and import the ES modules -- no build step, no bundler:
+
+```html
+<link rel="stylesheet" href="assets/css/tokens.css">
+<link rel="stylesheet" href="assets/css/base.css">
+<link rel="stylesheet" href="assets/css/shell.css">
+<link rel="stylesheet" href="assets/css/primitives.css">
+
+<script type="module">
+import { mountShell, toast } from "./assets/js/index.js";
+import { createSettings } from "./assets/js/extras.js";
+
+const settings = createSettings({
+  storageKey: "my-app",
+  defaults: { theme: "dark" },
+});
+settings.load();
+settings.applyTheme();
+
+const shell = mountShell({
+  root: document.body,
+  brand: {
+    name: "myapp",
+    logoHTML: '<div class="wordmark">my<b>app</b></div>',
+  },
+  routes: {
+    home: {
+      title: "Home",
+      icon: "library",
+      view: () => HomeView,
+    },
+  },
+  defaultRoute: "home",
+});
+</script>
+```
+
+With npm, use bare specifiers by adding an import map:
+
+```html
+<script type="importmap">
+{ "imports": { "tinymoon": "./node_modules/tinymoon/assets/js/index.js",
+               "tinymoon/extras": "./node_modules/tinymoon/assets/js/extras.js" } }
+</script>
+```
+
+## Primitives
+
+### Core (`tinymoon`)
+
+**Shell and DOM:**
+
+- `mountShell(opts)` -- mount the app shell with sidebar, topbar, router, and footer slot
+- `el(tag, cls?, text?)` -- element factory
+- `$(sel, root?)` -- querySelector shorthand
+- `$$(sel, root?)` -- querySelectorAll (returns array)
+
+**Controls:**
+
+- `createSwitch(opts)` -- role="switch" toggle button (not form-participating)
+- `createCheckbox(opts)` -- hidden-native checkbox facade (form-participating)
+- `createRadio(opts)` -- hidden-native radio facade (form-participating)
+- `createFileInput(opts)` -- hidden-native file input facade (form-participating)
+- `createSegmented(opts)` -- segmented control with hidden radios (form-participating)
+- `createTabs(opts)` -- tab bar (not form-participating)
+- `createSelect(opts)` -- custom dropdown select
+- `createDatePicker(opts)` -- calendar date picker
+- `copyButton(getText, tip?)` -- one-click clipboard copy button
+- `kebabButton(itemsFn, tip?)` -- three-dot menu button
+
+**Overlays:**
+
+- `toast(msg, level?, opts?)` -- toast notification ("ok", "err", or plain)
+- `setToastErrorHook(fn)` -- mirror error toasts into a custom hook
+- `openModal(opts)` -- modal dialog (returns close function)
+- `openPopover(anchor, builder)` / `closePopover()` -- positioned popover
+- `registerCtx(key, provider)` / `registerCtxFooter(fn)` -- context menu regions
+- `showCtxMenu(x, y, items, anchor?)` / `hideCtxMenu()` -- programmatic context menu
+- `ensureTooltip(el, text)` / `hideTip()` -- tooltip lifecycle
+- `ensureHovercard(el, md)` / `hideHovercard()` -- rich hovercard with markdown
+
+**Data and utilities:**
+
+- `ICONS` -- built-in icon set (26 icons)
+- `icon(name)` -- render an icon as an SVG string
+- `registerIcons(map)` -- merge consumer icons (collisions are hard errors)
+- `renderMiniMd(text)` -- inline markdown to DOM fragment (bold, code, links)
+- `cssVar(name)` -- read a computed CSS custom property value
+- `ensureRoot()` -- ensure the root element exists
+- `placeBelow(anchor, el)` -- position an element below an anchor
+- `registerCopyable(el, fn)` / `unregisterCopyable(el)` -- register elements for the copy system
+- `getCopyData(el)` -- retrieve copy data from a registered element
+
+### Extras (`tinymoon/extras`)
+
+- `api(path)` -- GET JSON from a same-origin path
+- `post(path, body, onError?)` -- POST JSON to a same-origin path
+- `createSettings(opts)` -- localStorage-backed settings store with schema validation
+- `createWikiView(opts)` -- wiki view factory with table of contents and deep-linkable sections
+- `renderDocMd(md)` -- block-level markdown to DOM (paragraphs, subheadings, lists)
+
+## Identity
+
+The visual identity is enforced by constraint, not offered as options:
+
+- **Sharp corners everywhere** -- `border-radius` is 0; no exceptions.
+- **Three-font system** -- brand headings (Space Grotesk), UI body (IBM Plex Sans), monospace for data (IBM Plex Mono). All vendored, no network loads.
+- **Glow language** -- accent glows on active cards, focused inputs, and modals. Restrained and consistent.
+- **Grain** -- a subtle SVG noise overlay on the background.
+- **Motion timing** -- all transitions are 100--180ms one-shot eases. The spinner is the only continuous animation.
+- **No native browser controls** -- checkbox, radio, select, file input, and date picker are all custom-drawn with hidden native elements for form participation and accessibility.
+- **AA contrast** -- every text-on-background token pair passes WCAG AA 4.5:1. Enforced by CI.
+- **Reduced motion** -- `prefers-reduced-motion: reduce` suppresses all animation and transition durations to near-zero. Enforced by E2E tests.
+
+Design tokens let you re-theme and re-accent; they do not let you opt out of the identity.
+
+## Conformance checker
+
+`tinymoon check` scans `.html`, `.css`, and `.js` files and enforces the framework's non-negotiables as hard errors:
+
+- **external-url** -- no network loads (no `http://`, `https://`, or `//host` URLs in HTML, CSS, or JS)
+- **native-control** -- no native `<select>`, `<dialog>`, or `<input type=checkbox|radio|file>`
+- **title-attr** -- no `title=` attributes (use the tooltip primitive)
+- **border-radius** -- no `border-radius` other than `0`/`0px`
+- **raw-color** -- no color literals outside `:root`/`html[data-theme]` token definitions
+
+```
+uvx tinymoon check --dir ./web
+```
+
+One line per violation, exit non-zero on any finding. No `--skip`, `--ignore`, or warning mode. Exempt specific URLs by adding them to `tinymoon-allowlist.txt` at the scanned directory root.
+
+## App model
+
+**Copy system.** `registerCopyable(el, fn)` marks any element as copyable -- clicking it copies the value returned by `fn()` to the clipboard, with a toast confirmation. The `copyButton` helper wires a standalone copy button. `getCopyData(el)` retrieves registered copy data programmatically.
+
+**Selection model.** Elements declare tooltips via `data-tooltip` (plain text) and hovercards via `data-hovercard` (markdown with bold, code, links). The framework manages hover intent, positioning, and the hover bridge automatically.
+
+**View contract.** Routes map to view objects `{root, built, build(), refresh(), setSub?}`. The shell's router owns the lifecycle: `build()` constructs the DOM once (idempotent), `refresh()` runs on every visit, `setSub(sub)` receives deep-link tails. A string value instead of a view factory activates the content-first path -- plain HTML styled automatically with zero framework classes.
+
+## Gallery
+
+The gallery is a complete tinymoon app that documents every design token and primitive. Serve the repo root with a static server and open `/gallery/`:
+
+```
+python3 -m http.server
+# open http://localhost:8000/gallery/
+```
+
+## License
+
+MIT

tinymoon-0.4.0/assets/css/base.css

@@ -0,0 +1,280 @@
+/* tinymoon — fonts and base element styles: the sharp-corner reset,
+   native-control elimination, grain overlay, custom scrollbars, and focus
+   rings. All fonts are vendored: IBM Plex Sans (UI), IBM Plex Mono (data),
+   Space Grotesk (brand/headings). Requires tokens.css. */
+
+/* ---------- fonts ---------- */
+
+@font-face {
+  font-family: "Plex";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Plex Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Plex Mono";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("../fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Grotesk";
+  font-style: normal;
+  font-weight: 300 700;
+  font-display: swap;
+  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
+}
+
+/* ---------- base ---------- */
+
+* { box-sizing: border-box; border-radius: 0 !important; }
+
+/* Structural native-UI elimination: every form control drops its OS/browser
+   appearance and is rebuilt by the design system. Native checkboxes, radios,
+   selects, file inputs, and dialogs are banned outright — custom widgets
+   (toggleWidget, Select, segmented) replace them. */
+button, input, textarea, select {
+  appearance: none;
+  -webkit-appearance: none;
+  border-radius: 0;
+  font-family: inherit;
+}
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+input::-webkit-search-decoration,
+input::-webkit-search-cancel-button { -webkit-appearance: none; }
+input::-webkit-calendar-picker-indicator { display: none; }
+input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 100px var(--input-bg) inset;
+  -webkit-text-fill-color: var(--text);
+}
+textarea {
+  background: var(--input-bg);
+  border: 1px solid var(--border-2);
+  color: var(--text);
+  font-weight: var(--weight-normal);
+  font-size: var(--text-xs);
+  font-family: var(--font-ui);
+  padding: var(--space-10);
+  resize: vertical;
+  user-select: text;
+}
+textarea:hover { border-color: var(--hover-border); }
+textarea:focus { border-color: var(--accent); box-shadow: 0 0 10px var(--accent-a18); }
+textarea::placeholder { color: var(--text-faint); }
+html, body { height: 100%; }
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-weight: var(--weight-normal);
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  font-family: var(--font-ui);
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+  user-select: none;
+}
+/* Wiki/doc prose is the one content carve-out: selectable text so users can
+   highlight and copy passages. Everything else (chrome, nav, controls) stays
+   unselectable via body's user-select: none. */
+.doc-body { user-select: text; }
+::selection { background: var(--accent-soft); color: var(--text); }
+.mono { font-family: var(--font-mono); }
+.hidden { display: none !important; }
+h1, h2, h3 { font-family: var(--font-brand); font-weight: var(--weight-medium); margin: 0; }
+h4 { font-family: var(--font-brand); font-weight: var(--weight-medium); font-size: var(--text-base); margin: 0; }
+h5 { font-family: var(--font-brand); font-weight: var(--weight-medium); font-size: var(--text-sm); margin: 0; }
+h6 { font-family: var(--font-brand); font-weight: var(--weight-medium); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; margin: 0; }
+
+a { color: var(--accent-hi); text-decoration: none; transition: color var(--dur-base) ease; }
+a:hover { color: var(--accent); }
+
+/* ---------- semantic prose elements ---------- */
+
+ul, ol {
+  margin: var(--space-10) 0;
+  padding-inline-start: var(--space-24);
+  color: var(--text-dim);
+  font-size: var(--text-xs);
+  line-height: var(--leading-relaxed);
+}
+ul ul, ul ol, ol ul, ol ol { margin: var(--space-4) 0; }
+li { margin-bottom: var(--space-4); }
+
+blockquote {
+  margin: var(--space-16) 0;
+  padding: var(--space-12) var(--space-20);
+  border-inline-start: 2px solid var(--accent);
+  background: var(--surface);
+  color: var(--text-dim);
+  font-size: var(--text-xs);
+  line-height: var(--leading-relaxed);
+}
+
+pre {
+  margin: var(--space-12) 0;
+  padding: var(--space-14);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  overflow-x: auto;
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  line-height: var(--leading-relaxed);
+  color: var(--text);
+}
+pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: inherit;
+}
+code {
+  font-family: var(--font-mono);
+  font-size: var(--text-3xs);
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  padding: var(--space-1) var(--space-4);
+  color: var(--text);
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: var(--text-xs);
+  line-height: var(--leading-normal);
+  margin: var(--space-12) 0;
+}
+table th {
+  text-align: start;
+  font-weight: var(--weight-medium);
+  font-size: var(--text-2xs);
+  color: var(--text);
+  padding: var(--space-8) var(--space-10);
+  border-bottom: 1px solid var(--border-2);
+}
+table td {
+  padding: var(--space-6) var(--space-10);
+  border-bottom: 1px solid var(--border);
+  color: var(--text-dim);
+}
+
+dl { margin: var(--space-12) 0; }
+dt {
+  font-weight: var(--weight-medium);
+  font-size: var(--text-xs);
+  color: var(--text);
+  margin-top: var(--space-10);
+}
+dd {
+  margin: var(--space-4) 0 0 var(--space-24);
+  font-size: var(--text-xs);
+  color: var(--text-dim);
+  line-height: var(--leading-relaxed);
+}
+
+hr {
+  border: none;
+  border-top: 1px solid var(--border-2);
+  margin: var(--space-24) 0;
+}
+
+figure {
+  margin: var(--space-16) 0;
+  padding: 0;
+}
+figcaption {
+  margin-top: var(--space-8);
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  color: var(--text-faint);
+}
+
+/* grain overlay */
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-grain);
+  pointer-events: none;
+  opacity: var(--grain-opacity);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
+}
+
+/* custom scrollbars */
+* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
+*::-webkit-scrollbar { width: 8px; height: 8px; }
+*::-webkit-scrollbar-track { background: transparent; }
+*::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 2px solid var(--bg); }
+*::-webkit-scrollbar-thumb:hover { background: var(--accent); }
+
+/* focus rings */
+:focus { outline: none; }
+:focus-visible {
+  outline: 1px solid var(--accent);
+  outline-offset: 2px;
+  box-shadow: 0 0 12px var(--accent-glow);
+}
+
+/* ---------- reduced motion ---------- */
+/* Blanket motion suppression: near-instant durations disable visible
+   animation/transition without breaking layout-dependent transforms.
+   The spinner (.spin) keeps rotating but completes instantly per cycle. */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+  /* The spinner must still rotate continuously (infinite), but with no
+     visible motion: near-instant duration + restored iteration. */
+  .spin {
+    animation-iteration-count: infinite !important;
+  }
+  #tm-content {
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ---------- print ---------- */
+/* Counters the Firefox first-page-only bug with overflow:hidden shells:
+   everything becomes static and visible so the full content area prints.
+   Sidebar, topbar, and footer are hidden — only the main content prints. */
+@media print {
+  body {
+    overflow: visible !important;
+    user-select: text !important;
+  }
+  #tm-content {
+    overflow: visible !important;
+    height: auto !important;
+    max-height: none !important;
+    position: static !important;
+  }
+  #tm-sidebar,
+  #tm-topbar,
+  .gallery-footer,
+  #tm-toast-root,
+  #tm-ctx-root {
+    display: none !important;
+  }
+  /* Remove fixed/absolute positioning from shell chrome so content flows */
+  #tm-app {
+    display: block !important;
+    height: auto !important;
+    overflow: visible !important;
+  }
+  /* Grain overlay must not print */
+  body::after {
+    display: none !important;
+  }
+}