@kabmo-labs/kabmo 0.0.0-stage → 0.0.1

package/src/client/tailwind.css

@@ -0,0 +1,578 @@
+@import "tailwindcss";
+@import "@xterm/xterm/css/xterm.css";
+
+@theme {
+  /* The UI font stack, with the Nerd Font families LAST.
+   *
+   * omp heads a session title with a card icon — a private-use glyph
+   * (`title.icons: nf+emoji`, the default) that no Latin face contains. The
+   * terminal already names a Nerd Font for exactly this reason
+   * (`XTERM_GLYPH_FALLBACKS` + `NERD_SYMBOLS_FAMILY` in
+   * `data/theme/terminal.ts`), but the UI stack did not, so a title card
+   * rendered only where the DEVICE happened to have a Nerd Font installed: on
+   * the developer's desktop Chromium fell back to one, and on a phone — which
+   * has none — every card icon was a hollow tofu box.
+   *
+   * The order is the whole point, and it is the terminal's: the installed
+   * families come FIRST, so a machine that already has one renders from it and
+   * never reaches the bundled face; `'Kabmo Nerd Symbols'` is LAST, so
+   * only a device with none fetches its bytes. Verified: with `FiraCode Nerd
+   * Font Mono` installed the glyph paints from that family and the bundled
+   * face stays unloaded; with no local family the face is fetched once and the
+   * card renders. Naming the bundled face WITHOUT the installed families ahead
+   * of it defeats this — Chromium prefers the named webfont over the system
+   * fallback and downloads it on every machine.
+   *
+   * The family names are literals here because Tailwind's `@theme` cannot
+   * import a TS constant; they must stay equal to `XTERM_GLYPH_FALLBACKS` and
+   * `NERD_SYMBOLS_FAMILY`, which `nerd-symbols.test.ts` asserts. */
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "FiraCode Nerd Font Mono", "FiraCode Nerd Font", "JetBrainsMono Nerd Font", "JetBrainsMono NF", "JetBrains Mono Nerd Font", "Hack Nerd Font", "MesloLGS NF", "MesloLGM Nerd Font", "CaskaydiaCove Nerd Font", "SauceCodePro Nerd Font", "Symbols Nerd Font Mono", "Symbols Nerd Font", "PowerlineSymbols", "Kabmo Nerd Symbols";
+  --color-ink: var(--theme-ink);
+  --color-paper: var(--theme-paper);
+  --color-canvas: var(--theme-canvas);
+  --color-error: var(--theme-error);
+  --color-success: var(--theme-success);
+  --color-meta: var(--theme-meta);
+  --color-info: var(--theme-info);
+  --color-info-hover: var(--theme-info-hover);
+  --color-warning: var(--theme-warning);
+  --color-warning-hover: var(--theme-warning-hover);
+  /* The brand mark's own colour, and deliberately NOT a theme token: the logo
+     is the same mark in every palette, so a theme flip must not repaint the
+     letter that carries it. This is the app icon's accent stroke — the orange
+     of the K's upper arm (`public/icon.svg`) — and it is the only chroma
+     outside the error red. */
+  --color-brand: #f26522;
+}
+
+@layer base {
+  /* The default palette. Every other theme's block is generated from the
+   * catalog in `src/shared/lib/theme/palettes/` and injected as
+   * `html[data-theme=…]` by the SSR shell (see `shared/lib/theme/css.ts`) —
+   * hand-writing them here would duplicate the same eight values the appearance
+   * cards render as chips. */
+  :root {
+    --theme-paper: #faf8f3;
+    --theme-canvas: #f4f1ea;
+    --theme-ink: #141310;
+    --theme-error: #c8321e;
+    --theme-success: #047857;
+    --theme-meta: #4f46e5;
+    --theme-info: #0284c7;
+    --theme-info-hover: color-mix(in srgb, var(--theme-info) 85%, var(--theme-ink));
+    --theme-warning: #c2410c;
+    --theme-warning-hover: color-mix(in srgb, var(--theme-warning) 85%, var(--theme-ink));
+    color-scheme: light;
+
+    --paper-bg: var(--theme-canvas);
+    --paper-raised: var(--theme-paper);
+    --paper-card: var(--theme-paper);
+    --ink-primary: var(--theme-ink);
+    --ink-secondary: color-mix(in srgb, var(--theme-ink) 62%, transparent);
+    --ink-muted: color-mix(in srgb, var(--theme-ink) 42%, transparent);
+    --ink-hairline: color-mix(in srgb, var(--theme-ink) 14%, transparent);
+    --signal-red: var(--theme-error);
+  }
+
+  body {
+    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    background-color: var(--theme-canvas);
+    color: var(--theme-ink);
+  }
+
+  .font-mono, code, pre, kbd, .tabular-nums {
+    font-family: 'Fira Code', monospace;
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+/* Dot grain texture for Hero production card */
+.dot-grain-texture {
+  background-image: radial-gradient(color-mix(in srgb, var(--theme-ink) 6%, transparent) 0.65px, transparent 0.65px);
+  background-size: 4px 4px;
+}
+
+/* ============================================================================
+ * Scrollbars — ONE size, ONE palette, ONE reveal rule, for every scroll
+ * container in the app (pages, panels, modals, dropdowns, the terminal).
+ *
+ * The three numbers below are the whole system. Nothing anywhere else in this
+ * file, or in a component, may restate a scrollbar width, radius or colour:
+ * that is what drifted — the global bar was 6px, the terminal's 8px, and three
+ * class variants carried their own ink percentages, so the same scrollbar
+ * looked like three different controls depending on where you were.
+ *
+ * Colour comes from `--theme-ink`, so every palette moves every bar, including
+ * one switched at runtime (the custom properties are inherited and re-resolved
+ * on the `[data-theme]` flip — verified by reading the computed
+ * `::-webkit-scrollbar-thumb` background back after a theme change).
+ *
+ * ## The reveal rule
+ *
+ * The thumb is TRANSPARENT by default and painted only while the user is
+ * scrolling that element. `installScrollbarActivity()` (see
+ * `src/client/lib/scrollbar-activity.ts`) puts `data-scrollbar-active` on the
+ * scroller itself for 10s after each of its own `scroll` events, and this
+ * stylesheet is the other half of that contract: a global `scroll` listener is
+ * one listener for every scroll container in the document, including ones that
+ * do not exist yet, which is why no component has to opt in.
+ *
+ * Hovering the thumb still reveals it (`:hover` is declared LAST, so it wins
+ * over the active state at equal specificity) — that is the only affordance a
+ * container gets before it has ever been scrolled, and the reason a hidden
+ * thumb is not a discoverability hole: the gutter is still there, and pointing
+ * at it paints the bar.
+ * ========================================================================== */
+:root {
+  --scrollbar-size: 8px;
+  --scrollbar-radius: 4px;
+  --scrollbar-thumb-idle: transparent;
+  --scrollbar-thumb: color-mix(in srgb, var(--theme-ink) 24%, transparent);
+  --scrollbar-thumb-hover: color-mix(in srgb, var(--theme-ink) 48%, transparent);
+}
+
+::-webkit-scrollbar {
+  width: var(--scrollbar-size);
+  height: var(--scrollbar-size);
+}
+
+/* Transparent, not `--theme-canvas`: the bar floats over whatever surface the
+ * container is on, and a track that paints a colour would draw a stripe across
+ * a dropdown or a modal card. */
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb-idle);
+  border-radius: var(--scrollbar-radius);
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* The element the user is scrolling right now. */
+[data-scrollbar-active]::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+}
+
+/* Declared last on purpose: equal specificity to the rule above, so the thumb
+ * under the pointer wins whichever state the container is in. */
+::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+}
+
+/* The app's shared scroll-surface marker. It carries the axis a container
+ * scrolls on (30 of the ~70 sites below rely on it alone for that) and it is
+ * the selector the tests and the e2e specs address a panel's scroller by.
+ *
+ * `overflow-y: overlay` used to be declared here to float the bar over the
+ * content. That value is not supported by Chrome any more — it computes to
+ * `auto` (measured on Chrome 150), so the declaration had already stopped
+ * doing anything; the fade it was written for is now the rule above and
+ * applies to every container, not only the ones carrying this class. */
+.scrollbar-overlay-container {
+  overflow-y: auto;
+}
+
+/* Reveal-on-hover controls are written `opacity-0 group-hover:opacity-100`
+ * (or `hidden group-hover:flex`), and Tailwind v4 emits every one of those
+ * variants inside `@media (hover: hover)` — verified in the emitted
+ * stylesheet, not assumed. A device with no pointing cursor reports
+ * `hover: none`, so the rule never applies and the control stays invisible:
+ * present in the DOM, unreachable by finger, and undiscoverable to anyone who
+ * does not already know it is there.
+ *
+ * The predicate is exactly "this device has no cursor", which is what the
+ * media query means — a desktop keeps its hover behaviour untouched, a
+ * touchscreen laptop whose primary pointer is a trackpad also keeps it (it has
+ * a cursor), and a phone or tablet draws every one of these controls outright.
+ *
+ * Three shapes cover every site in the app, and they are classes rather than
+ * utilities because they must sit OUTSIDE Tailwind's `utilities` layer: an
+ * unlayered rule wins over every layered one regardless of specificity, which
+ * is what lets `opacity: 1` beat the `opacity-0` these are paired with. A
+ * `@custom-variant` would emit a nested rule instead — and this pipeline has
+ * already proven Chrome drops those.
+ */
+@media (hover: none) {
+  /* The control itself: shown, and hit-testable. `pointer-events` rides along
+   * because a swapped-in control is commonly written `pointer-events-none`
+   * at rest (the sidebar's chevron), and revealing it without that would
+   * paint a button no finger could press. */
+  .touch-visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /* The other half of a swap: the glyph a hover would take away. */
+  .touch-hidden {
+    opacity: 0;
+  }
+
+  /* A control revealed by `hidden group-hover:flex`. */
+  .touch-shown-flex {
+    display: flex;
+  }
+}
+
+/* Horizontally scrollable strips (mobile tab bars) that pan without a visible
+ * scrollbar track eating vertical space. */
+.no-scrollbar {
+  scrollbar-width: none;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* The terminal keeps xterm's own `overflow-y: scroll` (its gutter is part of
+ * the grid's geometry), but it is deliberately NOT given its own scrollbar
+ * colours any more — it had 8px/22%/42% and a painted track while every other
+ * container had 6px/20%/40% and a transparent one, which is exactly the drift
+ * the block above exists to remove. It inherits the global rule, so the
+ * terminal's bar is the same bar as everywhere else, and follows the theme
+ * with it. The `touch-action`/momentum pair below is a separate concern. */
+.xterm .xterm-viewport {
+  touch-action: pan-y;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Markdown rendered output (marked) — mirrors the previous react-markdown
+ * component styling with semantic tags. */
+:root {
+  --markdown-body-line-height: 1.5rem;
+  --markdown-list-line-height: 1.375rem;
+  --markdown-code-block-line-height: 1rem;
+}
+
+.prose-content {
+  line-height: var(--markdown-body-line-height);
+  white-space: normal;
+}
+.prose-content > *:first-child { margin-top: 0; }
+.prose-content > *:last-child { margin-bottom: 0; }
+.prose-content p:not(:last-child) { margin: 0 0 0.75rem; line-height: inherit; overflow-wrap: break-word; }
+.prose-content h1 { font-size: 1rem; font-weight: 700; margin: 1em 0 0.5em; line-height: 1.25rem; }
+.prose-content h2 { font-size: 0.9375rem; font-weight: 700; margin: 0.875em 0 0.375em; line-height: 1.25rem; }
+.prose-content h3 { font-size: 0.875rem; font-weight: 600; margin: 0.75em 0 0.25em; line-height: 1.5rem; }
+.prose-content h4 { font-size: 0.8125rem; font-weight: 600; margin: 0.625em 0 0.25em; line-height: 1.5rem; }
+.prose-content h5 { font-size: 0.8125rem; font-weight: 600; margin: 0.625em 0 0.25em; line-height: 1.5rem; }
+.prose-content h6 { font-size: 0.8125rem; font-weight: 600; margin: 0.625em 0 0.25em; line-height: 1.5rem; }
+.prose-content ul { list-style: disc; padding-left: 2em; line-height: 1.375rem; margin: 0.5rem 0; position: relative; }
+.prose-content ol { list-style: decimal; padding-left: 2em; line-height: 1.375rem; margin: 0.5rem 0; position: relative; }
+.prose-content li { line-height: inherit; position: relative; }
+.prose-content li + li { margin-top: 0.375rem; }
+.prose-content li p { margin: 0.25rem 0; }
+/* Tailwind's preflight makes every `img` block-level. Markdown images are
+ * inline content: a README badge row is one `<p align="center">` of
+ * `<a><img></a>` links, and a block image stacks it one badge per line (and
+ * pushes an image off the text line it was written on). `inline-block` restores
+ * the line box GitHub renders; the preflight's `max-width: 100%` still applies,
+ * and `vertical-align: middle` keeps badges of different heights aligned. */
+.prose-content img { display: inline-block; vertical-align: middle; }
+.prose-content ul > li::before { content: ''; display: block; position: absolute; left: -1.25em; top: 0; }
+.prose-content blockquote {
+  border-left: 2px solid color-mix(in srgb, var(--theme-ink) 30%, transparent);
+  padding-left: 0.75rem; margin: 0.5rem 0; color: color-mix(in srgb, var(--theme-ink) 80%, transparent);
+  font-style: italic; line-height: inherit;
+}
+.prose-content a {
+  text-decoration: underline; text-underline-offset: 2px;
+  text-decoration-color: color-mix(in srgb, var(--theme-ink) 40%, transparent);
+  color: var(--theme-ink); font-weight: 500;
+}
+.prose-content hr { margin: 0.75rem 0; border-top: 1px solid color-mix(in srgb, var(--theme-ink) 15%, transparent); }
+.prose-content table { width: 100%; border-collapse: collapse; margin: 0.625rem 0; font-size: 0.75rem; border: 1px solid color-mix(in srgb, var(--theme-ink) 15%, transparent); }
+/* The scroll container `renderMarkdown` puts around every table. `width: 100%`
+ * on a table is a FLOOR, not a ceiling — an auto-layout table cannot be
+ * narrowed below its columns' min-content width, so one long unbreakable token
+ * (a path, a hash, a URL) makes the table wider than the message it sits in.
+ * The timeline scroller is `overflow-x-hidden`, so the right columns used to be
+ * cut off on desktop and phone alike; now the table scrolls inside this wrapper
+ * while its `width: 100%` look stays intact whenever it fits. */
+.prose-content .md-table-scroll {
+  margin: 0.625rem 0;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+}
+/* The wrapper's own margin is the block's spacing — a child's margin cannot
+ * collapse out of a scroll container (its overflow makes a BFC), so leaving the
+ * table's 0.625rem would draw it twice. */
+.prose-content .md-table-scroll > table { margin: 0; }
+.prose-content td, .prose-content th { line-height: inherit; overflow-wrap: break-word; }
+.prose-content th { background: color-mix(in srgb, var(--theme-ink) 5%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--theme-ink) 15%, transparent); padding: 0.375rem 0.75rem; font-weight: 600; }
+.prose-content td { border-bottom: 1px solid color-mix(in srgb, var(--theme-ink) 10%, transparent); padding: 0.375rem 0.75rem; }
+.prose-content code.inline-code {
+  font-family: 'Fira Code', monospace; font-size: 0.75rem;
+  padding: 0.0125rem 0.275rem; border-radius: 0.375rem;
+  background: color-mix(in srgb, var(--theme-ink) 8%, transparent);
+  color: var(--theme-ink);
+  overflow-wrap: break-word;
+}
+.prose-content .code-block {
+  margin: 0.5rem 0; border-radius: 0.5rem; border: 1px solid color-mix(in srgb, var(--theme-ink) 15%, transparent);
+  background: var(--theme-canvas); font-family: 'Fira Code', monospace; font-size: 0.75rem;
+  position: relative;
+}
+.prose-content .code-copy-float {
+  position: absolute; top: 0.375rem; right: 0.375rem;
+  display: flex; align-items: center; justify-content: center;
+  width: 1.5rem; height: 1.5rem; border-radius: 0.25rem;
+  color: color-mix(in srgb, var(--theme-ink) 50%, transparent);
+  background: color-mix(in srgb, var(--theme-ink) 5%, transparent);
+  border: 1px solid color-mix(in srgb, var(--theme-ink) 10%, transparent);
+  cursor: pointer; opacity: 0.7; transition: opacity 0.15s, color 0.15s, background 0.15s;
+}
+.prose-content .code-copy-float:hover { opacity: 1; color: var(--theme-ink); background: color-mix(in srgb, var(--theme-ink) 10%, transparent); }
+.prose-content .code-block pre { margin: 0; padding: 0.75rem; overflow-x: auto; line-height: var(--markdown-code-block-line-height); }
+.prose-content .code-block code { font-family: 'Fira Code', monospace; font-size: 0.75rem; line-height: var(--markdown-code-block-line-height); }
+.prose-content .code-block pre code { background: transparent; text-shadow: none; }
+/* Shiki dual-theme tokens: the highlighter emits BOTH palettes (one-light for
+ * light themes, one-dark-pro for dark themes) as CSS variables on every token
+ * span and no inline `color`, so the active [data-theme] selects the palette.
+ * Switching themes recolors code blocks with zero JS and no re-highlight.
+ * The selector keys off the variant attribute, not a list of theme ids. */
+.shiki span { color: var(--shiki-light); }
+html[data-theme-variant="dark"] .shiki span { color: var(--shiki-dark); }
+
+/* Find matches, painted inside the token spans the highlighter emits. An
+ * inline <mark> colours a background without moving a glyph, which is what
+ * keeps the transparent <textarea> above aligned with this layer — a block or
+ * a padding would shift the text under the caret. `color: inherit` is required:
+ * a <mark> would otherwise take the UA's own black-on-yellow, ignoring the
+ * dual-theme token colour it sits inside.
+ *
+ * No `border-radius`, and the current match is marked with TOP/BOTTOM borders
+ * rather than an outline: a match spanning several tokens (`const alpha` is
+ * three) is emitted as one <mark> per token, so any per-fragment decoration
+ * that draws vertical edges — radius, outline, left/right border — paints a
+ * seam in the middle of the match. Horizontal edges join seamlessly. */
+.shiki .find-match {
+  color: inherit;
+  background: color-mix(in srgb, var(--theme-warning) 32%, transparent);
+}
+/* An extra ⌘D selection: same geometry as a find match, different ink. The
+ * caret can only live in the primary range, so the two must not look alike —
+ * the user has to see where their keystrokes will land. */
+.shiki .find-match[data-occurrence] {
+  background: color-mix(in srgb, var(--theme-info) 30%, transparent);
+  border-top: 1px solid color-mix(in srgb, var(--theme-info) 55%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--theme-info) 55%, transparent);
+}
+.shiki .find-match[data-find-current] {
+  background: color-mix(in srgb, var(--theme-warning) 55%, transparent);
+  border-top: 1px solid color-mix(in srgb, var(--theme-warning) 75%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--theme-warning) 75%, transparent);
+}
+
+/* Search panel: a row's replace preview. The old text is struck through and the
+ * new text beside it, the way VS Code's search view shows a pending rewrite.
+ * Deliberately NOT the `.find-match` highlight: that one marks where a query
+ * matched, this one marks what the file would become — the two can appear in
+ * the same row and must not read alike. The removed run keeps its ink so the
+ * line stays legible; the inserted run takes the success colour, which is the
+ * only chroma the palette allows outside an error. */
+.search-replace-old {
+  text-decoration: line-through;
+  color: color-mix(in srgb, var(--theme-error) 85%, var(--theme-ink));
+  background: color-mix(in srgb, var(--theme-error) 14%, transparent);
+}
+.search-replace-new {
+  text-decoration: none;
+  color: color-mix(in srgb, var(--theme-success) 85%, var(--theme-ink));
+  background: color-mix(in srgb, var(--theme-success) 16%, transparent);
+}
+.prose-content .katex-display { overflow-x: auto; overflow-y: hidden; }
+
+/* Math placeholder: `marked.ts` emits a `.math-pending` span and KaTeX is
+ * fetched on demand (~522 kB async chunk), so the span is empty for one frame.
+ * Reserve display-math height so the message does not jump when the formula
+ * lands, and keep invalid/queued source faintly visible rather than blank. */
+.prose-content .math-pending::before {
+  content: '…';
+  opacity: 0.35;
+}
+.prose-content p:has(> .math-pending[data-math-display='1']) { min-height: 2.5rem; }
+
+/* Streaming placeholder: remend turns a half-received [text](url into this
+ * span; it becomes a real link once the URL arrives in a later frame. */
+.prose-content .md-incomplete-link {
+  opacity: 0.45;
+  text-decoration: underline dotted;
+  text-underline-offset: 2px;
+}
+
+/* Mermaid diagram blocks (```mermaid fences hydrated to SVG client-side). */
+.prose-content .mermaid-block { margin: 0.5rem 0; }
+.prose-content .mermaid-block[data-mermaid-state='pending'],
+.prose-content .mermaid-block[data-mermaid-state='rendering'] {
+  min-height: 4.5rem;
+}
+.prose-content .mermaid-block[data-mermaid-state='pending'] pre,
+.prose-content .mermaid-block[data-mermaid-state='rendering'] pre {
+  visibility: hidden;
+}
+.prose-content .mermaid-block[data-mermaid-state='done'] {
+  border: 1px solid color-mix(in srgb, var(--theme-ink) 15%, transparent);
+  border-radius: 0.5rem;
+  background: var(--theme-paper);
+  padding: 0.75rem;
+  /* `applySvg` swaps the `.code-block` shell (the positioned ancestor the copy
+     button relied on) for the SVG, so the block owns the anchor itself. */
+  position: relative;
+  /* The block is the door into the zoom/pan viewer. */
+  cursor: zoom-in;
+}
+.prose-content .mermaid-block > svg {
+  display: block;
+  margin: 0 auto;
+  max-width: min(100%, var(--mermaid-diagram-max, 100%));
+  height: auto;
+}
+.prose-content .mermaid-block .code-copy-float {
+  z-index: 1;
+}
+.prose-content .mermaid-block[data-mermaid-state='error'] pre {
+  color: var(--theme-error);
+}
+
+/* Full-screen mermaid viewer (`common/diagram-viewer/`): a chart opened from
+   the timeline. The stage is the fixed-size pan surface, the canvas child
+   carries the zoom/pan transform, so the SVG keeps its natural pixel size and
+   `100%` on it always means "the size mermaid rendered". */
+.diagram-viewer-stage {
+  touch-action: none;
+  overscroll-behavior: contain;
+}
+.diagram-viewer-canvas {
+  transform-origin: center center;
+  will-change: transform;
+  background: var(--theme-paper);
+  box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--theme-ink) 45%, transparent);
+}
+.diagram-viewer-canvas > svg {
+  display: block;
+  width: 100% !important;
+  height: 100% !important;
+  max-width: none !important;
+}
+
+/* Image viewer surface (`common/image-viewer/`): the stage is the pan surface,
+   the canvas carries the zoom/pan transform so the picture keeps its natural
+   pixel size and never reflows while it is being zoomed. The checkerboard sits
+   behind the canvas so a transparent PNG reads as transparent instead of
+   looking like a white file. */
+.image-stage {
+  touch-action: none;
+  overscroll-behavior: contain;
+  background-color: var(--theme-canvas);
+  background-image:
+    linear-gradient(45deg, color-mix(in srgb, var(--theme-ink) 6%, transparent) 25%, transparent 25%),
+    linear-gradient(-45deg, color-mix(in srgb, var(--theme-ink) 6%, transparent) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--theme-ink) 6%, transparent) 75%),
+    linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--theme-ink) 6%, transparent) 75%);
+  background-size: 16px 16px;
+  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
+}
+.image-canvas {
+  transform-origin: center center;
+  will-change: transform;
+}
+
+/* PWA Window Controls Overlay and Native Titlebar Styling */
+.titlebar-drag-region {
+  -webkit-app-region: drag;
+  app-region: drag;
+}
+
+.titlebar-no-drag {
+  -webkit-app-region: no-drag;
+  app-region: no-drag;
+}
+
+
+/* Collapsible-section reveal (Source Control's stash section, and any other
+   disclosure whose content height is unknown). `0fr → 1fr` interpolates the
+   grid TRACK, so the wrapper animates to the content's own height — which
+   `max-height` cannot do without a magic number, and which `height: auto` does
+   not transition at all. The child is pinned by this rule rather than by the
+   call site: `min-height: 0` is what lets the track collapse below the item's
+   min-content size, and `overflow: hidden` is what clips it while it does —
+   forget either and the section renders at full height with no animation.
+
+   The collapsed body stays MOUNTED (that is the whole point — an unmounted
+   child has nothing to animate), so a caller must mark it `inert` to keep its
+   controls out of the tab order and off the accessibility tree. */
+.section-reveal {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 180ms ease-out;
+}
+
+.section-reveal > * {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.section-reveal[data-expanded='true'] {
+  grid-template-rows: 1fr;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .section-reveal {
+    transition: none;
+  }
+}
+
+/* Blocking extension-dialog enter animation — replaces the retired `motion`
+   dependency. Exit is intentionally instant: a 160ms fade-out on a blocking
+   modal is not load-bearing, and keeping the element mounted to animate it out
+   would add state the dialog does not otherwise need. */
+@keyframes extension-dialog-backdrop-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes extension-dialog-panel-in {
+  from { opacity: 0; transform: translateY(10px) scale(0.95); }
+  to { opacity: 1; transform: none; }
+}
+
+.extension-dialog-backdrop {
+  animation: extension-dialog-backdrop-in 150ms ease-out;
+}
+
+.extension-dialog-panel {
+  animation: extension-dialog-panel-in 180ms ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .extension-dialog-backdrop,
+  .extension-dialog-panel {
+    animation: none;
+  }
+}
+
+/* Indeterminate progress for a blocking tool call (`wait`).
+ *
+ * A `wait` reports a duration but often no completion percentage — a `bash`
+ * job has none at all — so the bar must not claim a position it cannot know.
+ * The band sweeps instead, and `prefers-reduced-motion` parks it mid-track:
+ * the bar still reads as "in progress" without the motion. */
+@keyframes wait-bar-sweep {
+  from { transform: translateX(-120%); }
+  to { transform: translateX(320%); }
+}
+
+.wait-bar-sweep {
+  animation: wait-bar-sweep 1.6s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wait-bar-sweep {
+    animation: none;
+    transform: translateX(33%);
+  }
+}