@young1lin/dsh-ui-gitworkbench 0.1.11 → 0.1.13

package/src/client/GitWorkbenchPanel.module.css

@@ -1,2515 +1,17 @@
-/* Change inspector.
+/**
+ * Git workbench CSS Module manifest.
  *
- * The session-header card lives in dsh chrome and keeps dsh's own --dsw-* tokens,
- * so it is themed by the app and needs nothing here. The DRAWER paints its own
- * surface — a diff needs an add/delete/word-level/syntax palette dsh does not
- * define — so it carries a self-contained palette instead.
- *
- * Every drawer colour resolves through a --gs-* token. The palettes below are the
- * only place a literal colour appears; each theme sets the same token names, so a
- * theme is a palette swap and nothing else. `data-gs-theme` on the overlay picks
- * one, and the panel computes it from the theme setting (`system` follows dsh's
- * `body[data-ds-dark-theme]`; light/dark pin the drawer).
- *
- * One exception is deliberate: the mode picker's own light/dark chips are fixed
- * white and near-black, because those buttons name colours rather than wear them.
- *
- * `data-gs-part` attributes on the overlay, card, header, tabs and three panes are
- * the stable hooks user CSS targets — class names are hashed by CSS Modules and
- * change on every build, so they are not addressable from outside.
- */
-
-/* ---- environment card (lives in dsh chrome — keep dsw tokens) ---- */
-.card {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  min-height: 28px;
-  padding: 3px 10px;
-  border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 8px;
-  background: transparent;
-  color: var(--dsw-alias-label-secondary);
-  font-size: 12px;
-  line-height: 18px;
-  font-variant-numeric: tabular-nums;
-  cursor: pointer;
-  transition: background 120ms ease, border-color 120ms ease;
-}
-.card:hover, .card:focus-visible {
-  background: var(--dsw-alias-interactive-bg-hover);
-  border-color: var(--dsw-alias-border-l3);
-}
-.cardBranch {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  max-width: 220px;
-  overflow: hidden;
-  color: var(--dsw-alias-label-primary);
-  font-weight: 550;
-}
-.cardBranchName { min-width: 0; overflow: hidden; }
-.cardGlyph { flex: none; opacity: 0.7; }
-.cardDetached {
-  padding: 0 6px;
-  border-radius: 999px;
-  background: var(--dsw-alias-state-warning-bg, rgba(187, 128, 9, 0.15));
-  color: var(--dsw-alias-state-warning-primary, #d29922);
-  font-size: 10px;
-  line-height: 16px;
-  letter-spacing: 0.02em;
-}
-/* Bound-worktree badge: the session is attached to an agent worktree. */
-.cardWt {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  max-width: 150px;
-  overflow: hidden;
-  padding: 0 6px;
-  border-radius: 999px;
-  background: var(--dsw-alias-state-business-bg, rgba(56, 139, 253, 0.16));
-  color: var(--dsw-alias-state-business-primary, #58a6ff);
-  font-size: 10px;
-  line-height: 16px;
-  letter-spacing: 0.02em;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.cardAhead, .cardBehind {
-  color: var(--dsw-alias-label-tertiary);
-  font-size: 11px;
-}
-.cardAhead { color: var(--dsw-alias-state-success-primary); }
-.cardBehind { color: var(--dsw-alias-state-attention-primary, #d29922); }
-.cardSep { width: 1px; height: 14px; background: var(--dsw-alias-border-l2); }
-.cardAdded { color: var(--dsw-alias-state-success-primary); }
-.cardDeleted { color: var(--dsw-alias-state-error-primary); }
-.cardFiles { color: var(--dsw-alias-label-tertiary); }
-
-/* ============================ theme palettes ============================ */
-
-/* GitHub — the default, and the reference the other palettes are balanced against. */
-.overlay[data-gs-theme='github-dark'] {
-  --gs-bg: #0d1117; --gs-panel: #161b22; --gs-raise: #21262d;
-  --gs-border: #30363d; --gs-border-soft: #21262d;
-  --gs-fg: #e6edf3; --gs-fg-muted: #c9d1d9; --gs-fg-dim: #8b949e; --gs-fg-faint: #6e7681; --gs-fg-fainter: #484f58;
-  --gs-accent: #58a6ff; --gs-accent-bg: rgba(56, 139, 253, 0.14); --gs-accent-border: rgba(56, 139, 253, 0.55);
-  --gs-add: #3fb950; --gs-del: #f85149; --gs-warn: #d29922; --gs-info: #79c0ff;
-  --gs-add-bg: rgba(46, 160, 67, 0.16); --gs-del-bg: rgba(248, 81, 73, 0.16);
-  --gs-warn-bg: rgba(187, 128, 9, 0.16); --gs-info-bg: rgba(56, 139, 253, 0.16);
-  /* Primer's own diffBlob tokens, flattened over --gs-bg (#0d1117). Opaque
-     rather than the alpha hexes Primer ships, because here the number cells
-     paint ON TOP of the row tint — two alphas would composite to roughly twice
-     GitHub's strength. Line 15% / num 30% / word 40% of the base hue. */
-  --gs-add-line: #12261e; --gs-del-line: #25181c;
-  --gs-add-word: #1a4a29; --gs-del-word: #6b2b2b;
-  --gs-add-num: #1c4428; --gs-del-num: #542426;
-  --gs-hunk: #111d2e; --gs-hunk-num: #0c2d6b;
-  --gs-neutral-bg: rgba(110, 118, 129, 0.18);
-  --gs-backdrop: rgba(1, 4, 9, 0.6); --gs-shadow: rgba(1, 4, 9, 0.55);
-}
-.overlay[data-gs-theme='github-light'] {
-  --gs-bg: #ffffff; --gs-panel: #f6f8fa; --gs-raise: #eaeef2;
-  --gs-border: #d0d7de; --gs-border-soft: #eaeef2;
-  --gs-fg: #1f2328; --gs-fg-muted: #32383f; --gs-fg-dim: #656d76; --gs-fg-faint: #8c959f; --gs-fg-fainter: #afb8c1;
-  --gs-accent: #0969da; --gs-accent-bg: rgba(9, 105, 218, 0.1); --gs-accent-border: rgba(9, 105, 218, 0.45);
-  --gs-add: #1a7f37; --gs-del: #cf222e; --gs-warn: #9a6700; --gs-info: #0550ae;
-  --gs-add-bg: rgba(26, 127, 55, 0.12); --gs-del-bg: rgba(207, 34, 46, 0.12);
-  --gs-warn-bg: rgba(154, 103, 0, 0.12); --gs-info-bg: rgba(9, 105, 218, 0.12);
-  /* Primer's light diffBlob tokens, which are already opaque upstream. */
-  --gs-add-line: #dafbe1; --gs-del-line: #ffebe9;
-  --gs-add-word: #aceebb; --gs-del-word: #ffcecb;
-  --gs-add-num: #aceebb; --gs-del-num: #ffcecb;
-  --gs-hunk: #ddf4ff; --gs-hunk-num: #b6e3ff;
-  --gs-neutral-bg: rgba(110, 118, 129, 0.12);
-  --gs-backdrop: rgba(31, 35, 40, 0.28); --gs-shadow: rgba(31, 35, 40, 0.22);
-}
-
-/* IntelliJ IDEA — the New UI (2022.3+, the default since 2024.1), not Darcula.
-   Its greys are the giveaway: the New UI dropped Darcula's warm #3C3F41 chrome
-   for the cooler #1E1F22 editor over a #2B2D30 tool window, and moved the
-   accent to #3574F0.
-
-   The semantic four are the IntelliJ platform's own VCS colours (the keys the
-   log and the diff gutter paint with), except that dark's green is the New UI's
-   brighter #5FAD65 rather than the platform #499C54 — the latter is a fill
-   colour there, and as 12px TEXT on #1E1F22 it lands under 4:1.
-
-   Unlike the GitHub palettes below, these are not transcribed from a published
-   token file, so there is no test pinning them to a source of truth; they are
-   read off the New UI's own chrome and diff. */
-.overlay[data-gs-theme='idea-dark'] {
-  --gs-bg: #1e1f22; --gs-panel: #2b2d30; --gs-raise: #393b40;
-  --gs-border: #393b40; --gs-border-soft: #2b2d30;
-  --gs-fg: #dfe1e5; --gs-fg-muted: #ced0d6; --gs-fg-dim: #9da0a8; --gs-fg-faint: #6f737a; --gs-fg-fainter: #4e5157;
-  --gs-accent: #548af7; --gs-accent-bg: rgba(84, 138, 247, 0.16); --gs-accent-border: rgba(84, 138, 247, 0.55);
-  --gs-add: #5fad65; --gs-del: #e26e6e; --gs-warn: #f0a732; --gs-info: #3592c4;
-  --gs-add-bg: rgba(95, 173, 101, 0.16); --gs-del-bg: rgba(226, 110, 110, 0.16);
-  --gs-warn-bg: rgba(240, 167, 50, 0.16); --gs-info-bg: rgba(53, 146, 196, 0.16);
-  /* IDEA paints diff as solid blocks rather than a wash, and the word-level
-     highlight as a distinctly stronger block over it — so these are opaque,
-     like GitHub's, instead of the alpha tints the other families use. */
-  --gs-add-line: #293c2e; --gs-del-line: #3d2b2b;
-  --gs-add-word: #3d6640; --gs-del-word: #6b3838;
-  --gs-hunk: rgba(84, 138, 247, 0.10); --gs-neutral-bg: rgba(157, 160, 168, 0.18);
-  --gs-backdrop: rgba(16, 17, 19, 0.6); --gs-shadow: rgba(0, 0, 0, 0.5);
-}
-.overlay[data-gs-theme='idea-light'] {
-  --gs-bg: #ffffff; --gs-panel: #f7f8fa; --gs-raise: #ebecf0;
-  --gs-border: #d3d5db; --gs-border-soft: #ebecf0;
-  --gs-fg: #1e1f22; --gs-fg-muted: #3c3f44; --gs-fg-dim: #6c707e; --gs-fg-faint: #818594; --gs-fg-fainter: #a8adbd;
-  --gs-accent: #3574f0; --gs-accent-bg: rgba(53, 116, 240, 0.1); --gs-accent-border: rgba(53, 116, 240, 0.45);
-  --gs-add: #398a4a; --gs-del: #cc4a4a; --gs-warn: #a8760b; --gs-info: #2b7fb8;
-  --gs-add-bg: rgba(57, 138, 74, 0.12); --gs-del-bg: rgba(204, 74, 74, 0.12);
-  --gs-warn-bg: rgba(168, 118, 11, 0.12); --gs-info-bg: rgba(43, 127, 184, 0.12);
-  --gs-add-line: #e6f5e9; --gs-del-line: #fbe9ea;
-  --gs-add-word: #c2e5c9; --gs-del-word: #f5c9cc;
-  --gs-hunk: rgba(53, 116, 240, 0.07); --gs-neutral-bg: rgba(108, 112, 126, 0.12);
-  --gs-backdrop: rgba(30, 31, 34, 0.26); --gs-shadow: rgba(30, 31, 34, 0.18);
-}
-
-/* VS Code — Dark+ / Light+, the default editor themes. */
-.overlay[data-gs-theme='vscode-dark'] {
-  --gs-bg: #1e1e1e; --gs-panel: #252526; --gs-raise: #2d2d30;
-  --gs-border: #3e3e42; --gs-border-soft: #2d2d30;
-  --gs-fg: #d4d4d4; --gs-fg-muted: #cccccc; --gs-fg-dim: #9d9d9d; --gs-fg-faint: #808080; --gs-fg-fainter: #5a5a5a;
-  --gs-accent: #0098ff; --gs-accent-bg: rgba(0, 122, 204, 0.24); --gs-accent-border: rgba(0, 152, 255, 0.6);
-  --gs-add: #89d185; --gs-del: #f14c4c; --gs-warn: #cca700; --gs-info: #75beff;
-  --gs-add-bg: rgba(137, 209, 133, 0.18); --gs-del-bg: rgba(241, 76, 76, 0.18);
-  --gs-warn-bg: rgba(204, 167, 0, 0.18); --gs-info-bg: rgba(117, 190, 255, 0.18);
-  --gs-add-line: rgba(155, 185, 85, 0.18); --gs-del-line: rgba(255, 0, 0, 0.16);
-  --gs-add-word: rgba(155, 185, 85, 0.4); --gs-del-word: rgba(255, 0, 0, 0.36);
-  --gs-hunk: rgba(0, 122, 204, 0.14); --gs-neutral-bg: rgba(190, 190, 190, 0.14);
-  --gs-backdrop: rgba(0, 0, 0, 0.55); --gs-shadow: rgba(0, 0, 0, 0.6);
-}
-.overlay[data-gs-theme='vscode-light'] {
-  --gs-bg: #ffffff; --gs-panel: #f3f3f3; --gs-raise: #e8e8e8;
-  --gs-border: #cecece; --gs-border-soft: #e8e8e8;
-  --gs-fg: #1e1e1e; --gs-fg-muted: #333333; --gs-fg-dim: #616161; --gs-fg-faint: #767676; --gs-fg-fainter: #a0a0a0;
-  --gs-accent: #005fb8; --gs-accent-bg: rgba(0, 95, 184, 0.1); --gs-accent-border: rgba(0, 95, 184, 0.45);
-  --gs-add: #10793f; --gs-del: #b5200d; --gs-warn: #855b00; --gs-info: #005fb8;
-  --gs-add-bg: rgba(16, 121, 63, 0.12); --gs-del-bg: rgba(181, 32, 13, 0.12);
-  --gs-warn-bg: rgba(133, 91, 0, 0.12); --gs-info-bg: rgba(0, 95, 184, 0.12);
-  --gs-add-line: rgba(155, 185, 85, 0.22); --gs-del-line: rgba(255, 0, 0, 0.13);
-  --gs-add-word: rgba(155, 185, 85, 0.45); --gs-del-word: rgba(255, 0, 0, 0.3);
-  --gs-hunk: rgba(0, 95, 184, 0.07); --gs-neutral-bg: rgba(97, 97, 97, 0.12);
-  --gs-backdrop: rgba(0, 0, 0, 0.25); --gs-shadow: rgba(0, 0, 0, 0.18);
-}
-
-/* Cyberpunk — neon on deep violet; the light variant keeps the magenta/cyan pair
-   over a near-white ground so the theme survives a bright room. */
-.overlay[data-gs-theme='cyberpunk-dark'] {
-  --gs-bg: #0b0417; --gs-panel: #14082a; --gs-raise: #1f0d3d;
-  --gs-border: #3a1f6b; --gs-border-soft: #26124a;
-  --gs-fg: #f0e6ff; --gs-fg-muted: #d5c2f5; --gs-fg-dim: #a98fd6; --gs-fg-faint: #7d64a8; --gs-fg-fainter: #56427a;
-  --gs-accent: #00f0ff; --gs-on-accent: #0b0417; --gs-accent-bg: rgba(0, 240, 255, 0.14); --gs-accent-border: rgba(0, 240, 255, 0.5);
-  --gs-add: #39ff88; --gs-del: #ff2e88; --gs-warn: #ffcc00; --gs-info: #00f0ff;
-  --gs-add-bg: rgba(57, 255, 136, 0.14); --gs-del-bg: rgba(255, 46, 136, 0.14);
-  --gs-warn-bg: rgba(255, 204, 0, 0.14); --gs-info-bg: rgba(0, 240, 255, 0.14);
-  --gs-add-line: rgba(57, 255, 136, 0.12); --gs-del-line: rgba(255, 46, 136, 0.12);
-  --gs-add-word: rgba(57, 255, 136, 0.34); --gs-del-word: rgba(255, 46, 136, 0.34);
-  --gs-hunk: rgba(0, 240, 255, 0.1); --gs-neutral-bg: rgba(169, 143, 214, 0.16);
-  --gs-backdrop: rgba(6, 2, 14, 0.68); --gs-shadow: rgba(0, 240, 255, 0.14);
-}
-.overlay[data-gs-theme='cyberpunk-light'] {
-  --gs-bg: #fdfbff; --gs-panel: #f4eeff; --gs-raise: #e9dfff;
-  --gs-border: #c9b3f0; --gs-border-soft: #e0d2f7;
-  --gs-fg: #1a0b2e; --gs-fg-muted: #33195c; --gs-fg-dim: #6b4ba0; --gs-fg-faint: #8f74bd; --gs-fg-fainter: #b9a5d6;
-  --gs-accent: #00a6b8; --gs-accent-bg: rgba(0, 166, 184, 0.12); --gs-accent-border: rgba(0, 166, 184, 0.5);
-  --gs-add: #00875a; --gs-del: #d6006e; --gs-warn: #b37a00; --gs-info: #00a6b8;
-  --gs-add-bg: rgba(0, 135, 90, 0.12); --gs-del-bg: rgba(214, 0, 110, 0.12);
-  --gs-warn-bg: rgba(179, 122, 0, 0.12); --gs-info-bg: rgba(0, 166, 184, 0.12);
-  --gs-add-line: rgba(0, 200, 130, 0.14); --gs-del-line: rgba(255, 46, 136, 0.12);
-  --gs-add-word: rgba(0, 200, 130, 0.34); --gs-del-word: rgba(255, 46, 136, 0.3);
-  --gs-hunk: rgba(0, 166, 184, 0.08); --gs-neutral-bg: rgba(107, 75, 160, 0.12);
-  --gs-backdrop: rgba(26, 11, 46, 0.28); --gs-shadow: rgba(26, 11, 46, 0.16);
-}
-
-/* One — Atom's One Dark / One Light. */
-.overlay[data-gs-theme='one-dark'] {
-  --gs-bg: #282c34; --gs-panel: #21252b; --gs-raise: #2c313a;
-  --gs-border: #3e4451; --gs-border-soft: #2c313a;
-  --gs-fg: #abb2bf; --gs-fg-muted: #b6bdca; --gs-fg-dim: #7f848e; --gs-fg-faint: #636d83; --gs-fg-fainter: #4b5263;
-  --gs-accent: #61afef; --gs-accent-bg: rgba(97, 175, 239, 0.14); --gs-accent-border: rgba(97, 175, 239, 0.55);
-  --gs-add: #98c379; --gs-del: #e06c75; --gs-warn: #e5c07b; --gs-info: #56b6c2;
-  --gs-add-bg: rgba(152, 195, 121, 0.16); --gs-del-bg: rgba(224, 108, 117, 0.16);
-  --gs-warn-bg: rgba(229, 192, 123, 0.16); --gs-info-bg: rgba(86, 182, 194, 0.16);
-  --gs-add-line: rgba(152, 195, 121, 0.14); --gs-del-line: rgba(224, 108, 117, 0.14);
-  --gs-add-word: rgba(152, 195, 121, 0.38); --gs-del-word: rgba(224, 108, 117, 0.38);
-  --gs-hunk: rgba(97, 175, 239, 0.1); --gs-neutral-bg: rgba(127, 132, 142, 0.18);
-  --gs-backdrop: rgba(23, 26, 33, 0.6); --gs-shadow: rgba(15, 17, 21, 0.55);
-}
-.overlay[data-gs-theme='one-light'] {
-  --gs-bg: #fafafa; --gs-panel: #f0f0f0; --gs-raise: #e5e5e6;
-  --gs-border: #d4d4d4; --gs-border-soft: #e5e5e6;
-  --gs-fg: #383a42; --gs-fg-muted: #4a4c53; --gs-fg-dim: #696c77; --gs-fg-faint: #909196; --gs-fg-fainter: #b8b9bd;
-  --gs-accent: #4078f2; --gs-accent-bg: rgba(64, 120, 242, 0.1); --gs-accent-border: rgba(64, 120, 242, 0.45);
-  --gs-add: #50a14f; --gs-del: #e45649; --gs-warn: #c18401; --gs-info: #0184bc;
-  --gs-add-bg: rgba(80, 161, 79, 0.12); --gs-del-bg: rgba(228, 86, 73, 0.12);
-  --gs-warn-bg: rgba(193, 132, 1, 0.12); --gs-info-bg: rgba(1, 132, 188, 0.12);
-  --gs-add-line: rgba(80, 161, 79, 0.14); --gs-del-line: rgba(228, 86, 73, 0.13);
-  --gs-add-word: rgba(80, 161, 79, 0.34); --gs-del-word: rgba(228, 86, 73, 0.32);
-  --gs-hunk: rgba(64, 120, 242, 0.07); --gs-neutral-bg: rgba(105, 108, 119, 0.12);
-  --gs-backdrop: rgba(56, 58, 66, 0.26); --gs-shadow: rgba(56, 58, 66, 0.18);
-}
-
-/* Solarized — Ethan Schoonover's fixed sixteen, both official grounds. */
-.overlay[data-gs-theme='solarized-dark'] {
-  --gs-bg: #002b36; --gs-panel: #073642; --gs-raise: #0a4553;
-  --gs-border: #0f5666; --gs-border-soft: #073642;
-  --gs-fg: #93a1a1; --gs-fg-muted: #839496; --gs-fg-dim: #657b83; --gs-fg-faint: #586e75; --gs-fg-fainter: #45636b;
-  --gs-accent: #268bd2; --gs-accent-bg: rgba(38, 139, 210, 0.16); --gs-accent-border: rgba(38, 139, 210, 0.55);
-  --gs-add: #859900; --gs-del: #dc322f; --gs-warn: #b58900; --gs-info: #2aa198;
-  --gs-add-bg: rgba(133, 153, 0, 0.2); --gs-del-bg: rgba(220, 50, 47, 0.18);
-  --gs-warn-bg: rgba(181, 137, 0, 0.18); --gs-info-bg: rgba(42, 161, 152, 0.18);
-  --gs-add-line: rgba(133, 153, 0, 0.16); --gs-del-line: rgba(220, 50, 47, 0.15);
-  --gs-add-word: rgba(133, 153, 0, 0.4); --gs-del-word: rgba(220, 50, 47, 0.38);
-  --gs-hunk: rgba(38, 139, 210, 0.12); --gs-neutral-bg: rgba(101, 123, 131, 0.2);
-  --gs-backdrop: rgba(0, 20, 26, 0.62); --gs-shadow: rgba(0, 20, 26, 0.55);
-}
-.overlay[data-gs-theme='solarized-light'] {
-  --gs-bg: #fdf6e3; --gs-panel: #eee8d5; --gs-raise: #e3ddca;
-  --gs-border: #d5cfbb; --gs-border-soft: #eee8d5;
-  --gs-fg: #586e75; --gs-fg-muted: #657b83; --gs-fg-dim: #839496; --gs-fg-faint: #93a1a1; --gs-fg-fainter: #b5b0a0;
-  --gs-accent: #268bd2; --gs-accent-bg: rgba(38, 139, 210, 0.12); --gs-accent-border: rgba(38, 139, 210, 0.45);
-  --gs-add: #6c7c00; --gs-del: #cb2825; --gs-warn: #9a7400; --gs-info: #21867f;
-  --gs-add-bg: rgba(133, 153, 0, 0.18); --gs-del-bg: rgba(220, 50, 47, 0.14);
-  --gs-warn-bg: rgba(181, 137, 0, 0.16); --gs-info-bg: rgba(42, 161, 152, 0.14);
-  --gs-add-line: rgba(133, 153, 0, 0.16); --gs-del-line: rgba(220, 50, 47, 0.12);
-  --gs-add-word: rgba(133, 153, 0, 0.38); --gs-del-word: rgba(220, 50, 47, 0.3);
-  --gs-hunk: rgba(38, 139, 210, 0.08); --gs-neutral-bg: rgba(88, 110, 117, 0.14);
-  --gs-backdrop: rgba(88, 110, 117, 0.26); --gs-shadow: rgba(88, 110, 117, 0.2);
-}
-
-/* Nord — Polar Night for dark, Snow Storm for light. Nord's aurora greens and
-   reds are tuned for a dark ground, so the light variant darkens the diff pair
-   rather than washing it out. */
-.overlay[data-gs-theme='nord-dark'] {
-  --gs-bg: #2e3440; --gs-panel: #3b4252; --gs-raise: #434c5e;
-  --gs-border: #4c566a; --gs-border-soft: #3b4252;
-  --gs-fg: #eceff4; --gs-fg-muted: #d8dee9; --gs-fg-dim: #9aa5b8; --gs-fg-faint: #7b88a1; --gs-fg-fainter: #5d6a82;
-  --gs-accent: #88c0d0; --gs-on-accent: #2e3440; --gs-accent-bg: rgba(136, 192, 208, 0.14); --gs-accent-border: rgba(136, 192, 208, 0.55);
-  --gs-add: #a3be8c; --gs-del: #bf616a; --gs-warn: #ebcb8b; --gs-info: #81a1c1;
-  --gs-add-bg: rgba(163, 190, 140, 0.16); --gs-del-bg: rgba(191, 97, 106, 0.18);
-  --gs-warn-bg: rgba(235, 203, 139, 0.16); --gs-info-bg: rgba(129, 161, 193, 0.16);
-  --gs-add-line: rgba(163, 190, 140, 0.14); --gs-del-line: rgba(191, 97, 106, 0.15);
-  --gs-add-word: rgba(163, 190, 140, 0.38); --gs-del-word: rgba(191, 97, 106, 0.4);
-  --gs-hunk: rgba(136, 192, 208, 0.1); --gs-neutral-bg: rgba(154, 165, 184, 0.16);
-  --gs-backdrop: rgba(29, 35, 45, 0.62); --gs-shadow: rgba(20, 25, 33, 0.55);
-}
-.overlay[data-gs-theme='nord-light'] {
-  --gs-bg: #eceff4; --gs-panel: #e5e9f0; --gs-raise: #d8dee9;
-  --gs-border: #c3cbd8; --gs-border-soft: #dfe4ec;
-  --gs-fg: #2e3440; --gs-fg-muted: #3b4252; --gs-fg-dim: #4c566a; --gs-fg-faint: #6b7689; --gs-fg-fainter: #9aa4b5;
-  --gs-accent: #5e81ac; --gs-accent-bg: rgba(94, 129, 172, 0.12); --gs-accent-border: rgba(94, 129, 172, 0.5);
-  --gs-add: #5e7d47; --gs-del: #a5424c; --gs-warn: #97701f; --gs-info: #4c7a8c;
-  --gs-add-bg: rgba(94, 125, 71, 0.14); --gs-del-bg: rgba(165, 66, 76, 0.13);
-  --gs-warn-bg: rgba(151, 112, 31, 0.14); --gs-info-bg: rgba(76, 122, 140, 0.13);
-  --gs-add-line: rgba(94, 125, 71, 0.14); --gs-del-line: rgba(165, 66, 76, 0.12);
-  --gs-add-word: rgba(94, 125, 71, 0.34); --gs-del-word: rgba(165, 66, 76, 0.32);
-  --gs-hunk: rgba(94, 129, 172, 0.09); --gs-neutral-bg: rgba(76, 86, 106, 0.13);
-  --gs-backdrop: rgba(46, 52, 64, 0.26); --gs-shadow: rgba(46, 52, 64, 0.18);
-}
-
-/* ============================ drawer shell ============================ */
-
-/* ---- geometry and type scale ----
- *
- * The drawer is a plugin surface inside dsh, so it borrows dsh's own control
- * vocabulary rather than inventing a second one. The numbers below are measured
- * from the running app, not guessed: dsh settles on a 28px control height, a
- * 12px radius for its rows and panes, a full pill for its dropdown triggers,
- * and the `--dsw-font-*` ladder for type.
- *
- * Every control in this stylesheet resolves its height, radius, padding and
- * size through these. That is the whole mechanism keeping the drawer coherent —
- * before it, eight classes each spelled out their own padding and radius, and
- * the same "small secondary button" rendered at four different heights.
- */
-.overlay {
-  --gs-inset: 14px;
-
-  /* Control geometry — dsh's own. */
-  --gs-h-control: 28px;   /* chrome: header actions, chips, ref pickers */
-  --gs-h-compact: 24px;   /* in-pane tools, where vertical space belongs to the diff */
-  --gs-pad-control: 0 12px;
-  --gs-pad-compact: 0 10px;
-
-  /* Readable against a solid --gs-accent fill. White for every palette whose
-     accent is a mid-to-dark hue; the two palettes with a light accent override
-     it, because white on #00f0ff is not a colour anyone can read. */
-  --gs-on-accent: #ffffff;
-
-  /* Commit-graph lanes. Deliberately NOT per-palette: a lane's colour carries no
-     meaning beyond "not the same as the lane beside it", so it has nothing to
-     follow the theme for. What it does need is to stay legible on every ground
-     the drawer can paint, from #0d1117 to Solarized's cream — these are mid
-     hues chosen to hold on both ends rather than tuned to either. */
-  --gs-graph-0: #58a6ff;
-  --gs-graph-1: #3fb950;
-  --gs-graph-2: #d29922;
-  --gs-graph-3: #bc8cff;
-  --gs-graph-4: #f778ba;
-  --gs-graph-5: #39c5cf;
-
-  /* Radii. Four values, each with one job; nothing else may invent a fifth. */
-  --gs-r-pill: 999px;    /* drawer chrome: header actions, ref chips, triggers */
-  --gs-r-control: 8px;   /* controls inside a panel or pane; inputs; badges */
-  --gs-r-surface: 12px;  /* rows, popovers, panes */
-  --gs-r-drawer: 14px;   /* the drawer and its companion card */
-
-  /* Type — dsh's --dsw-font-* ladder, which tops out at 11px for meta text. */
-  --gs-t-meta: 11px;     /* --dsw-font-xxxs-11: counters, captions */
-  --gs-t-dense: 12px;    /* --dsw-font-xxs-12: dense list rows */
-  --gs-t-ui: 13px;       /* --dsw-font-xs-13: controls, tabs, body */
-
-  /* Two gutters, one per container. Chrome bars that span the drawer — header,
-     tabs, worktree chips, path line, compare bar — share `--gs-gutter`; they
-     used to sit at 20/20/14/20/20 and the drawer's left edge read as ragged.
-     Inside a pane the gutter is tighter, because a pane is already inset by its
-     divider and its rows carry indentation of their own. */
-  --gs-gutter: 16px;
-  --gs-gutter-pane: 12px;
-
-  position: fixed; inset: 0; z-index: 1000;
-  display: flex; justify-content: flex-end; align-items: stretch; gap: 12px;
-  padding: var(--gs-inset);
-  box-sizing: border-box;
-  background: var(--gs-backdrop);
-  animation: gsFade 160ms ease-out;
-}
-.drawer {
-  position: relative;
-  display: flex; flex-direction: column; box-sizing: border-box;
-  width: min(1600px, 94vw); height: 100%;
-  color: var(--gs-fg);
-  background: var(--gs-bg);
-  border: 1px solid var(--gs-border);
-  border-radius: var(--gs-r-drawer);
-  /* Rounded corners only hold if the panes cannot paint past them. This also
-     clips the scaled-up background layer below. */
-  overflow: hidden;
-  box-shadow: 0 24px 64px var(--gs-shadow);
-  font-family: var(--dsw-font-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif);
-  animation: gsSlide 180ms cubic-bezier(0.22, 1, 0.36, 1);
-  /* Surfaces the panes paint with. Identical to the palette's own colours until
-     a background image is set, at which point they thin out to let it show. Every
-     large filled area uses these; small chips and hovers keep the solid tokens,
-     since a translucent 20px pill only reads as muddy. */
-  --gs-surface: var(--gs-bg);
-  --gs-surface-2: var(--gs-panel);
-}
-/* `--gs-bg-image`, `--gs-bg-blur` and `--gs-veil` are set inline by the panel
-   from the winning style scope; the attribute is what switches the surfaces. */
-.drawer[data-gs-bg] {
-  --gs-surface: color-mix(in srgb, var(--gs-bg) var(--gs-veil), transparent);
-  --gs-surface-2: color-mix(in srgb, var(--gs-panel) var(--gs-veil), transparent);
-}
-/* Background image layer. Scaled past the edges because a blur samples beyond
-   its own box and would otherwise fade to transparent at the border. */
-.drawer[data-gs-bg]::before {
-  content: '';
-  position: absolute; inset: 0; z-index: 0;
-  background-image: var(--gs-bg-image);
-  background-size: cover; background-position: center;
-  filter: blur(var(--gs-bg-blur));
-  transform: scale(1.12);
-  pointer-events: none;
-}
-/* Everything real sits above that layer. The drag handle is excluded because it
-   is absolutely positioned and carries its own stacking order; matching it here
-   would leave the two rules deciding by source order.
-   Chrome that hosts a popover must sit ABOVE `.body`: later siblings with the
-   same z-index paint on top, which buried Theme and Branch menus under the
-   panes. A menu that renders but cannot be clicked looks like a dead control.
-   Popovers also drop DOWNWARD, so a bar's list can reach past every bar below
-   it — which means the ranks must strictly DECREASE down the DOM, or a lower
-   bar at the same z-index absorbs the rows (the worktree picker's list was
-   unclickable behind the sync bar until they were separated).
-   STRICTLY decreasing, including between the header and the tabs. Those two
-   shared rank 23 for as long as the header's only menu was Appearance, which
-   portals to the rail outside the drawer and so never dropped through anything.
-   The worktree picker does drop, and the tab bar — a later sibling at the same
-   rank — swallowed its filter box on the first try. */
-.drawer > *:not(.resizer) { position: relative; z-index: 1; }
-.drawer > .header { z-index: 24; }
-.drawer > .tabs { z-index: 23; }
-.drawer > .compareBar { z-index: 22; }
-.drawer > .syncBar { z-index: 20; }
-/* The roll-back confirmation, and the one deliberate exception to the
-   strictly-decreasing rule above: it is the LAST child and outranks every
-   other, because it is not a popover dropping through its siblings but a
-   modal that has to cover them. It also has to be declared here — the
-   `> *:not(.resizer)` rule out-specifies a bare `.confirmScrim`, which is
-   what pinned it to the bottom of the drawer as an in-flow flex item. */
-.drawer > .confirmScrim { position: absolute; inset: 0; z-index: 40; }
-/* Maximized drops the inset and the rounding: at full bleed they would only
-   waste edge pixels the diff wants. */
-.overlayMax { padding: 0; gap: 0; }
-.overlayMax .drawer { flex: 1 1 auto; width: auto; min-width: 0; border-radius: 0; border-width: 0 0 0 1px; }
-@keyframes gsFade { from { opacity: 0; } }
-@keyframes gsSlide { from { transform: translateX(24px); opacity: 0; } }
-
-/* Drag handle on the leading edge: a 10px hit area that is easy to grab, showing
-   a short centred grip in the card's own border colour. A full-height accent bar
-   was read as a second scrollbar and pulled the eye off the diff. */
-.resizer {
-  position: absolute; top: 0; bottom: 0; left: 0; z-index: 30;
-  display: flex; align-items: center; justify-content: center;
-  width: 10px;
-  cursor: col-resize;
-  touch-action: none;
-}
-.resizer::after {
-  content: '';
-  width: 3px; height: 32px;
-  border-radius: 999px;
-  background: var(--gs-fg-fainter);
-  opacity: 0;
-  transition: opacity 140ms ease, height 140ms ease;
-}
-.resizer:hover::after { opacity: 0.6; }
-.resizerActive::after { opacity: 0.9; height: 56px; }
-
-/* Divider between two panes. It carries the 1px rule the panes used to draw as
-   their own border, so the visible line and the drag target are one element and
-   cannot drift apart. */
-.paneDivider {
-  position: relative; z-index: 5;
-  flex: none;
-  display: flex; align-items: center; justify-content: center;
-  width: 7px;
-  cursor: col-resize;
-  touch-action: none;
-}
-.paneDivider::before {
-  content: '';
-  position: absolute; top: 0; bottom: 0; left: 3px;
-  width: 1px;
-  background: var(--gs-border-soft);
-}
-.paneDivider::after {
-  content: '';
-  position: relative;
-  width: 3px; height: 28px;
-  border-radius: 999px;
-  background: var(--gs-fg-fainter);
-  opacity: 0;
-  transition: opacity 140ms ease, height 140ms ease;
-}
-.paneDivider:hover::after { opacity: 0.6; }
-.paneDividerActive::after { opacity: 0.9; height: 48px; }
-/* The same handle turned through a right angle. Both modifier rules below beat
-   the shared ones on specificity, so their order relative to them does not
-   matter — the stylesheet's usual "same value loses" trap does not apply. */
-.paneDividerY {
-  width: auto; height: 7px;
-  cursor: row-resize;
-}
-.paneDividerY::before { top: 3px; bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
-.paneDividerY::after { width: 28px; height: 3px; transition: opacity 140ms ease, width 140ms ease; }
-.paneDividerY.paneDividerActive::after { width: 48px; height: 3px; }
-
-.header {
-  display: flex; align-items: center; justify-content: space-between; gap: 12px;
-  flex: none;
-  padding: 10px var(--gs-gutter);
-  border-bottom: 1px solid var(--gs-border);
-  background: var(--gs-surface-2);
-  font-family: var(--dsw-font-ui, system-ui, sans-serif);
-  font-size: var(--gs-t-ui);
-}
-.headerLeft { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }
-/* The subject of the drawer: which worktree. Worn by the picker's trigger when
-   there is a choice (`.headerPicker` below) and by a plain span when there is
-   not, so a one-worktree repository still states its identity in the same
-   place, at the same weight. */
-.headerBranch {
-  display: inline-flex; align-items: center; gap: 6px;
-  padding: 2px 10px;
-  border: 1px solid var(--gs-accent-border);
-  border-radius: 999px;
-  background: var(--gs-accent-bg);
-  color: var(--gs-accent);
-  font-weight: 600;
-}
-/* Colour only — the geometry stays the button vocabulary's, so the trigger is
-   the same pill as every other menu in the drawer and only its role differs.
-   Qualified with `.refButton` deliberately: the shared vocabulary is declared
-   at the FOOT of this file, so a bare `.headerPicker` up here loses every
-   property they both set to source order, and the chip came out grey. */
-.refButton.headerPicker {
-  /* The drawer's subject, in a row with 1400px to spare — the 260px the small
-     pickers share clipped `feature/nested/deep/scheduler` at a point where the
-     name needed 205. Still capped, so one absurd branch cannot push the totals
-     off the row. */
-  max-width: 420px;
-  border-color: var(--gs-accent-border);
-  background: var(--gs-accent-bg);
-  color: var(--gs-accent);
-  font-weight: 600;
-}
-.refButton.headerPicker:hover { background: var(--gs-accent-bg); color: var(--gs-accent); border-color: var(--gs-accent); }
-
-/* Slash-separated names — paths and branches alike — that give up their HEAD
-   when the row runs short. Plain `text-overflow: ellipsis` eats the leaf, and
-   the leaf is the half that answers "which one": `…/worktrees/fixture-07` vs
-   `…/worktrees/fixture-14`, `feature/deep/parser` vs `feature/deep/lexer`.
-
-   The shrink is WEIGHTED rather than pinned. `flex: none` on the tail read
-   correctly for a path, but a name with no head at all — a bare
-   `some-very-long-branch-name` — would then refuse to shrink and simply
-   overflow its row. At 999 the head absorbs effectively all of it, and the
-   tail only starts giving ground once the head has nothing left. */
-.elide { display: inline-flex; align-items: baseline; flex: 0 1 auto; min-width: 0; }
-.elideHead {
-  flex: 0 999 auto; min-width: 0;
-  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
-}
-.elideTail {
-  flex: 0 1 auto; min-width: 0;
-  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
-}
-/* The header's path: quiet, with the leaf a shade brighter than its directory,
-   and free to take whatever the totals beside it leave. */
-.headerPathMain { color: var(--gs-fg-faint); font-size: var(--gs-t-meta); }
-.headerPathMain .elideTail { color: var(--gs-fg-dim); }
-/* Either end of the compare pill, so a long branch elides there too rather
-   than stretching the pill across the header. */
-.headerViewRef { max-width: 160px; }
-
-/* What the view is about when it is NOT the working tree: a commit hash, or a
-   comparison's two ends. Quieter than the worktree chip — the worktree is where
-   you are, this is only what you are looking at inside it. */
-.headerView {
-  flex: none;
-  padding: 1px 8px;
-  border-radius: 999px;
-  background: var(--gs-neutral-bg);
-  color: var(--gs-fg-muted);
-  font-size: var(--gs-t-meta);
-  font-variant-numeric: tabular-nums;
-}
-.headerDetached {
-  padding: 1px 8px;
-  border-radius: 999px;
-  background: var(--gs-warn-bg);
-  color: var(--gs-warn);
-  font-size: var(--gs-t-meta);
-  letter-spacing: 0.02em;
-}
-.headerTotals { font-variant-numeric: tabular-nums; }
-.headerTotalsAdd { color: var(--gs-add); font-weight: 600; }
-.headerTotalsDel { color: var(--gs-del); font-weight: 600; }
-.headerTotalsDim { color: var(--gs-fg-dim); font-size: var(--gs-t-dense); }
-/* The gap is the rule, not each button's margin. `.btn` used to carry its own
-   `margin-left`, which meant the spacing lived in the button and vanished the
-   moment the button's geometry moved into the shared vocabulary. */
-.headerRight { display: flex; flex: none; gap: 8px; position: relative; }
-
-/* Theme button in the header. The panel is a companion card in the overlay,
-   to the LEFT of the drawer — not a column stolen from the diff, and not a
-   popover painted over the code. */
-.theme { position: relative; display: inline-flex; }
-/* Settings hangs from its own gear like every other menu in the drawer, right
-   edge aligned to the button because the button is the last thing in the row
-   and a left-aligned card would run off the drawer. Wider than a ref list: it
-   holds a palette grid, an image preview and a CSS editor, none of which fit a
-   menu-width column. */
-.refPop.settingsPop {
-  top: calc(100% + 6px); right: 0; left: auto;
-  width: 320px; max-width: calc(100vw - 32px);
-  max-height: min(560px, calc(100vh - 120px));
-}
-.themeRail {
-  flex: 1; min-height: 0;
-  display: flex; flex-direction: column; gap: 14px;
-  padding: 12px 14px 16px;
-  overflow-y: auto;
-  font-family: var(--dsw-font-ui, system-ui, sans-serif);
-}
-.themeGroup { display: flex; flex-direction: column; gap: 6px; }
-.themeLabel {
-  color: var(--gs-fg-faint);
-  font-size: var(--gs-t-meta); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
-}
-.themeRowSplit { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
-
-/* Mode picker. Each option is a painted swatch over its label, and the swatch
-   colours are FIXED rather than palette-derived: "light" and "dark" name the
-   colours themselves, so a dark-palette button rendering the light option in
-   dark grey would be telling the user the opposite of what it does. */
-/* The mode picker is the one control that is taller than the scale: it stacks a
-   painted swatch over its label, because "light" and "dark" are better shown
-   than named. Everything except the height comes from the vocabulary. */
-.segmented { display: flex; gap: 6px; }
-.segment {
-  flex: 1 1 0;
-  display: flex; flex-direction: column; gap: 4px; align-items: stretch;
-  box-sizing: border-box;
-  padding: 4px;
-  border: 1px solid var(--gs-border); border-radius: var(--gs-r-control);
-  background: transparent; color: var(--gs-fg-dim);
-  font-family: inherit; font-size: var(--gs-t-meta);
-  cursor: pointer;
-  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
-}
-.segment:hover { background: var(--gs-raise); border-color: var(--gs-fg-fainter); color: var(--gs-fg); }
-.segment:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: 1px; }
-.segmentChip {
-  height: 20px;
-  border: 1px solid rgba(128, 128, 128, 0.45);
-  border-radius: calc(var(--gs-r-control) - 4px);
-}
-.chipLight { background: #ffffff; }
-.chipDark { background: #0b0b0d; }
-/* System takes both halves, which is how every OS appearance control shows it. */
-.chipSystem { background: linear-gradient(105deg, #ffffff 0 50%, #0b0b0d 50% 100%); }
-
-.paletteRow {
-  display: flex; align-items: center; gap: 8px;
-  width: 100%; box-sizing: border-box;
-  padding: 5px 8px;
-  border: 0; border-radius: var(--gs-r-control);
-  background: transparent; color: var(--gs-fg-muted);
-  font-family: inherit; font-size: var(--gs-t-dense);
-  text-align: left; cursor: pointer;
-}
-.paletteRow:hover { background: var(--gs-raise); color: var(--gs-fg); }
-/* .paletteRowActive: see the shared selected-state rule at the foot of the file. */
-/* Three-stop swatch: ground, accent, and the add colour the diff leans on. */
-.swatch {
-  flex: none;
-  display: inline-flex; overflow: hidden;
-  width: 26px; height: 12px;
-  border: 1px solid var(--gs-border); border-radius: 3px;
-}
-.swatch span { flex: 1; }
-
-/* Scope switch: which of the two stores an edit lands in. */
-.scopeRow { display: flex; gap: 6px; }
-.scopeHint { color: var(--gs-fg-faint); font-size: var(--gs-t-meta); overflow-wrap: anywhere; }
-
-.bgPreview {
-  height: 64px;
-  border: 1px solid var(--gs-border); border-radius: var(--gs-r-control);
-  background-color: var(--gs-bg);
-  background-size: cover; background-position: center;
-}
-.bgEmpty {
-  display: flex; align-items: center; justify-content: center;
-  color: var(--gs-fg-faint); font-size: var(--gs-t-meta);
-}
-.sliderRow { display: flex; align-items: center; gap: 8px; font-size: var(--gs-t-meta); color: var(--gs-fg-dim); }
-.sliderRow input { flex: 1; min-width: 0; accent-color: var(--gs-accent); }
-.sliderValue { flex: none; width: 38px; text-align: right; font-variant-numeric: tabular-nums; }
-
-.cssArea {
-  width: 100%; box-sizing: border-box;
-  min-height: 96px; max-height: 220px;
-  padding: 7px 8px;
-  border: 1px solid var(--gs-border); border-radius: var(--gs-r-control);
-  background: var(--gs-bg); color: var(--gs-fg);
-  font-family: var(--dsw-font-mono, ui-monospace, Consolas, monospace); font-size: var(--gs-t-meta);
-  resize: vertical;
-  outline: none;
-}
-.cssArea:focus { border-color: var(--gs-accent-border); }
-.themeNote { color: var(--gs-warn); font-size: var(--gs-t-meta); }
-.themeDirty { color: var(--gs-accent); font-size: var(--gs-t-meta); }
-
-/* Worktree rows give their whole width to the branch; `.refRowName` already
-   flexes and ellipsises, so nothing else here competes for it. The path is on
-   the row's `title`. */
-/* Marks the session's OWN worktree, independent of which one is being viewed. */
-.wtCurrent { color: var(--gs-add); font-size: 8px; line-height: 1; }
-
-.commitCopy { margin-left: auto; }
-
-.commitPop {
-  position: fixed; z-index: 40;
-  box-sizing: border-box;
-  width: min(380px, calc(100vw - 24px));
-  display: flex; flex-direction: column; gap: 6px;
-  padding: 10px 12px 12px;
-  overflow: auto;
-  border: 1px solid var(--gs-border); border-radius: var(--gs-r-surface);
-  background: var(--gs-panel); color: var(--gs-fg);
-  box-shadow: 0 16px 40px var(--gs-shadow);
-  font-family: var(--dsw-font-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif);
-  font-size: var(--gs-t-dense);
-}
-.commitPopTop { display: flex; align-items: center; gap: 8px; }
-.commitPopTop .commitWhen { margin-right: auto; }
-/* Author / committer / exact date — the precise answers the row's summary
-   ("3 weeks ago") deliberately defers to the hover card. */
-.commitPopMeta {
-  display: flex; flex-direction: column; gap: 2px;
-  color: var(--gs-fg-muted);
-  font-size: var(--gs-t-dense); line-height: 16px;
-}
-/* The filter box in the history pane head — it flexes to fill the head beside
-   the title (the funnel button is flex:none), so a wide pane gets a wide box
-   and a narrow pane still leaves room to type. */
-.commitFilter {
-  flex: 1 1 auto; min-width: 120px;
-  height: var(--gs-h-control); box-sizing: border-box;
-  padding: 0 10px;
-  border: 1px solid var(--gs-border-soft); border-radius: var(--gs-r-control);
-  background: var(--gs-bg); color: var(--gs-fg);
-  font-family: inherit; font-size: var(--gs-t-dense);
-  outline: none;
-}
-.commitFilter:focus { border-color: var(--gs-accent); }
-.commitFilter::placeholder { color: var(--gs-fg-faint); }
-/* Active criteria under the head: one removable chip each, grammar tokens as
-   their own labels — the chip IS the query it would take to retype it. */
-.filterChips {
-  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
-  flex: none;
-  padding: 6px 10px;
-  border-bottom: 1px solid var(--gs-border-soft);
-}
-.filterChip {
-  display: inline-flex; align-items: center; gap: 2px;
-  max-width: 220px;
-  border: 1px solid var(--gs-border-soft); border-radius: var(--gs-r-control);
-  background: var(--gs-surface-2);
-  font-size: var(--gs-t-dense); line-height: 18px;
-}
-.filterChipLabel {
-  padding: 2px 4px 2px 8px;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-  color: var(--gs-fg-muted);
-}
-.filterChipRemove {
-  flex: none;
-  padding: 0 6px;
-  border: none; border-left: 1px solid var(--gs-border-soft);
-  background: transparent; color: var(--gs-fg-dim);
-  font-family: inherit; font-size: var(--gs-t-dense); line-height: 20px;
-  cursor: pointer;
-}
-.filterChipRemove:hover { color: var(--gs-danger, var(--gs-fg)); }
-.filterClear {
-  border: none; background: transparent;
-  padding: 2px 4px;
-  color: var(--gs-fg-faint);
-  font-family: inherit; font-size: var(--gs-t-dense); line-height: 18px;
-  cursor: pointer;
-}
-.filterClear:hover { color: var(--gs-fg); }
-/* The funnel dropdown — RefPicker's positioning pattern (relative anchor,
-   absolute panel, dismiss-on-outside). Grows leftward: it sits at the pane's
-   right edge. */
-.funnel { position: relative; display: inline-flex; }
-/* The button itself carries no geometry of its own — it joined the shared
-   control vocabulary above (`.btn, .refButton, …`) so it reads as a sibling of
-   every other button in the drawer, not a foreign element. */
-.funnelButton.funnelButtonActive { color: var(--gs-accent); border-color: var(--gs-accent); }
-
-/* The panel is a flex COLUMN with exactly ONE scrolling child. It used to
-   scroll itself AND cap its list at 240px: two nested scroll containers in a
-   331px box that had ~700px of anchor space to spend, so a long roster got a
-   fat inner scrollbar instead of the height already available. The tab strip
-   and the footer are `flex: none`; the list takes what is left. */
-.funnelPop {
-  position: fixed; z-index: 40;
-  display: flex; flex-direction: column;
-  width: 320px; max-width: calc(100vw - 24px);
-  box-sizing: border-box;
-  overflow: hidden;
-  border: 1px solid var(--gs-border); border-radius: var(--gs-r-surface);
-  background: var(--gs-panel);
-  box-shadow: 0 16px 40px var(--gs-shadow);
-  font-size: var(--gs-t-dense);
-}
-/* One section at a time — the panel's height is a property of its design,
-   not of how many authors the repository happens to have. The strip is a
-   segmented control (inset track, raised active chip) rather than one
-   outlined pill beside two bare words, which read as a button and two labels
-   instead of one three-way choice. */
-.funnelTabs {
-  flex: none;
-  display: flex; gap: 2px;
-  margin: 8px 8px 0;
-  padding: 2px;
-  border: 1px solid var(--gs-border-soft); border-radius: var(--gs-r-pill);
-  background: var(--gs-bg);
-}
-.funnelTab {
-  flex: 1; min-width: 0;
-  height: 22px; padding: 0 8px;
-  border: none; border-radius: var(--gs-r-pill);
-  background: transparent;
-  color: var(--gs-fg-dim);
-  font-family: inherit; font-size: var(--gs-t-dense); line-height: 1;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background 120ms ease, color 120ms ease;
-}
-.funnelTab:hover { color: var(--gs-fg); }
-.funnelTab.funnelTabActive {
-  color: var(--gs-fg);
-  background: var(--gs-raise);
-  box-shadow: inset 0 0 0 1px var(--gs-border);
-}
-.funnelTab:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: 1px; }
-/* A tab's own criteria count, so the two sections nobody is looking at still
-   say they hold something. */
-.funnelTabCount { margin-left: 4px; color: var(--gs-accent); font-variant-numeric: tabular-nums; }
-
-/* The body of the active section. Everything inside is `flex: none` except
-   the list, which is the one thing allowed to scroll. */
-.funnelPane {
-  flex: 1 1 auto; min-height: 0;
-  display: flex; flex-direction: column; gap: 6px;
-  padding: 8px;
-}
-.funnelCaption {
-  flex: none;
-  color: var(--gs-fg-faint);
-  font-size: 11px; line-height: 14px;
-  letter-spacing: 0.04em; text-transform: uppercase;
-}
-
-/* Which bound a picked day lands in. Deliberately NOT the tab strip's shape:
-   a rect track with an accent-tinted chip under a caption, because two
-   identical pill rows stacked six pixels apart said nothing about meaning two
-   different things. */
-.funnelBounds {
-  flex: none;
-  display: flex; gap: 2px;
-  padding: 2px;
-  border: 1px solid var(--gs-border-soft); border-radius: var(--gs-r-control);
-  background: var(--gs-bg);
-}
-.funnelBoundBtn {
-  flex: 1; min-width: 0;
-  height: 20px; padding: 0 6px;
-  border: none; border-radius: calc(var(--gs-r-control) - 3px);
-  background: transparent;
-  color: var(--gs-fg-dim);
-  font-family: inherit; font-size: var(--gs-t-dense); line-height: 1;
-  cursor: pointer;
-  transition: background 120ms ease, color 120ms ease;
-}
-.funnelBoundBtn:hover { color: var(--gs-fg); }
-.funnelBoundBtn.funnelBoundBtnActive {
-  color: var(--gs-accent);
-  background: var(--gs-accent-bg);
-  box-shadow: inset 0 0 0 1px var(--gs-accent-border);
-}
-
-/* The calendar — modern-grid look in the drawer's own tokens. */
-.cal { flex: none; display: flex; flex-direction: column; gap: 4px; }
-.calHead { display: flex; align-items: center; gap: 4px; }
-.calTitle {
-  flex: 1; text-align: center;
-  color: var(--gs-fg);
-  font-size: var(--gs-t-dense); line-height: 20px;
-}
-.calNav {
-  flex: none;
-  width: 22px; height: 20px; padding: 0;
-  border: none; border-radius: var(--gs-r-control);
-  background: transparent;
-  color: var(--gs-fg-dim);
-  font-family: inherit; font-size: var(--gs-t-ui);
-  cursor: pointer;
-}
-.calNav:hover { color: var(--gs-fg); background: var(--gs-raise); }
-.calWeek, .calGrid {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 2px;
-}
-.calWeek span {
-  text-align: center;
-  color: var(--gs-fg-faint);
-  font-size: 11px; line-height: 14px;
-}
-.calGrid button {
-  height: 26px;
-  border: none; border-radius: var(--gs-r-control);
-  background: transparent;
-  color: var(--gs-fg-muted);
-  font-family: inherit; font-size: var(--gs-t-dense);
-  font-variant-numeric: tabular-nums;
-  cursor: pointer;
-}
-.calGrid button:hover { background: var(--gs-raise); color: var(--gs-fg); }
-.calGrid button.calOut { color: var(--gs-fg-fainter); }
-.calGrid button.calToday { color: var(--gs-accent); font-weight: 600; }
-/* Days strictly between the two bounds: the span the filter actually means,
-   which two lone marked endpoints never showed. */
-.calGrid button.calIn { background: var(--gs-accent-bg); color: var(--gs-fg); }
-.calGrid button.calMark {
-  background: var(--gs-accent);
-  color: var(--gs-on-accent);
-  font-weight: 600;
-}
-
-/* The two bound readouts, side by side under the grid. */
-.funnelBoundRows { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
-.funnelBoundRow {
-  display: flex; align-items: center; gap: 4px; min-width: 0;
-  box-sizing: border-box;
-  padding: 3px 6px;
-  border: 1px solid var(--gs-border-soft); border-radius: var(--gs-r-control);
-  background: var(--gs-bg);
-  font-size: 11px; line-height: 16px;
-}
-.funnelBoundKey { flex: none; color: var(--gs-fg-faint); }
-.funnelBoundVal {
-  flex: 1; min-width: 0;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-  color: var(--gs-fg-faint);
-  font-variant-numeric: tabular-nums;
-}
-.funnelBoundValSet { color: var(--gs-fg); }
-.funnelBoundClear {
-  flex: none;
-  padding: 0 2px;
-  border: none; background: transparent;
-  color: var(--gs-fg-dim);
-  font-family: inherit; font-size: var(--gs-t-dense); line-height: 1;
-  cursor: pointer;
-}
-.funnelBoundClear:hover { color: var(--gs-danger, var(--gs-fg)); }
-
-.funnelSearch {
-  flex: none;
-  box-sizing: border-box;
-  height: 26px; padding: 0 8px;
-  border: 1px solid var(--gs-border-soft); border-radius: var(--gs-r-control);
-  background: var(--gs-bg); color: var(--gs-fg);
-  font-family: inherit; font-size: var(--gs-t-dense);
-  outline: none;
-}
-.funnelSearch::placeholder { color: var(--gs-fg-faint); }
-.funnelSearch:focus { border-color: var(--gs-accent); box-shadow: 0 0 0 2px var(--gs-accent-bg); }
-.funnelList {
-  flex: 1 1 auto; min-height: 0;
-  overflow-y: auto; overscroll-behavior: contain;
-  display: flex; flex-direction: column; gap: 1px;
-  margin: 0 -4px; padding: 0 4px;
-  scrollbar-width: thin; scrollbar-color: var(--gs-fg-fainter) transparent;
-}
-.funnelList::-webkit-scrollbar { width: 10px; }
-.funnelList::-webkit-scrollbar-track { background: transparent; }
-.funnelList::-webkit-scrollbar-thumb {
-  background: var(--gs-fg-fainter);
-  border: 3px solid transparent; border-radius: 5px;
-  background-clip: content-box;
-}
-/* Every row is the same four slots — chevron, tick, glyph, name — then the
-   count. Directories used to skip the glyph that files carried, so a folder
-   name and the file names under it started at different x and the list had a
-   ragged left edge. */
-.funnelRow {
-  display: flex; align-items: center; gap: 6px;
-  box-sizing: border-box;
-  min-height: 24px; padding: 0 4px;
-  border-radius: var(--gs-r-control);
-  cursor: pointer;
-}
-.funnelRow:hover { background: var(--gs-raise); }
-.funnelRow:has(input[type='checkbox']:checked) .funnelName,
-.funnelRow:has(input[type='checkbox']:indeterminate) .funnelName { color: var(--gs-fg); }
-/* The tick IS the input — no wrapper span, no visually-hidden twin: the live
-   probes select `[class*="funnelRow"] input[type=checkbox]` and the directory
-   row's DIRECT child, so the markup has to stay flat. `appearance: none`
-   hands us the box; the mark is a rotated border, so nothing ships as an
-   asset and every state recolors with the theme. */
-.funnelRow input[type='checkbox'] {
-  appearance: none; -webkit-appearance: none;
-  flex: none; position: relative;
-  box-sizing: border-box;
-  width: 14px; height: 14px; margin: 0;
-  border: 1px solid var(--gs-fg-fainter); border-radius: 3px;
-  background: transparent;
-  cursor: pointer;
-  transition: background 120ms ease, border-color 120ms ease;
-}
-.funnelRow input[type='checkbox']:hover { border-color: var(--gs-fg-dim); }
-.funnelRow input[type='checkbox']:checked,
-.funnelRow input[type='checkbox']:indeterminate {
-  background: var(--gs-accent); border-color: var(--gs-accent);
-}
-.funnelRow input[type='checkbox']:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: 1px; }
-.funnelRow input[type='checkbox']:checked::after {
-  content: ''; position: absolute;
-  left: 4px; top: 1px; width: 3px; height: 7px;
-  border: solid var(--gs-on-accent); border-width: 0 1.5px 1.5px 0;
-  transform: rotate(42deg);
-}
-/* Partial — a folder some of whose subtree is ticked. */
-.funnelRow input[type='checkbox']:indeterminate::after {
-  content: ''; position: absolute;
-  left: 2px; top: 5px; width: 8px; height: 2px;
-  border-radius: 1px;
-  background: var(--gs-on-accent);
-}
-/* Tree chrome in the drawer's own visual language: a directory folds with the
-   chevron the file tree uses, and both glyphs are inline SVG in the shape
-   IntelliJ's New UI icon set uses — a 16px grid, 1px strokes, no fill,
-   rounded joins, outlines rather than the filled silhouettes the old UI
-   shipped. Drawn in `PathDirGlyph` / `PathFileGlyph` rather than imported:
-   the bundle purity gate forbids an icon package, and the picker needs
-   exactly these two. Indentation is the row's own padding ALONE; the nested
-   rail this used to draw was `--gs-border-soft` over `--gs-panel` (the same
-   value as `--gs-raise` in the GitHub palettes, so it vanished under hover)
-   and its margin double-counted every level. */
-.pathNode { display: flex; flex-direction: column; }
-.pathChildren { display: flex; flex-direction: column; }
-/* One shared slot so a folder and a file start their names at the same x —
-   New UI draws both on the same 16px grid, and the column only lines up if
-   the box does too. `--gs-fg-dim` is the neutral the tree icons sit at there:
-   present, but never louder than the filename beside them. */
-.pathFileGlyph, .pathDirGlyph {
-  flex: none;
-  width: 16px; height: 16px;
-  color: var(--gs-fg-dim);
-}
-.funnelRow:hover .pathFileGlyph,
-.funnelRow:hover .pathDirGlyph { color: var(--gs-fg-muted); }
-.funnelName {
-  flex: 1; min-width: 0;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-  color: var(--gs-fg-muted);
-}
-.funnelCount {
-  flex: none;
-  color: var(--gs-fg-faint);
-  font-size: 11px;
-  font-variant-numeric: tabular-nums;
-}
-.funnelMore { color: var(--gs-fg-faint); padding: 4px 6px; }
-.funnelChevron {
-  flex: none;
-  width: 14px; padding: 0;
-  border: none; background: transparent;
-  color: var(--gs-fg-faint);
-  font-family: inherit; font-size: 9px; line-height: 16px;
-  cursor: pointer;
-}
-.funnelChevron:hover:not(:disabled) { color: var(--gs-fg); }
-.funnelChevron:disabled { cursor: default; }
-.funnelPresets { flex: none; display: flex; gap: 4px; }
-/* `.funnelPreset` shipped with `flex: none` and nothing else, so it never
-   joined the shared button vocabulary and the three date presets rendered as
-   the browser's default grey buttons — the one patch of unthemed chrome in
-   the drawer. It is in both selector lists now; this only sizes them to share
-   one row. */
-.funnelPreset { flex: 1 1 0; min-width: 0; padding: 0 6px; }
-/* Qualified, like `.funnelButtonActive`: the shared vocabulary is declared
-   several hundred lines BELOW this one, so a bare modifier would lose its
-   background to that rule's `background: transparent`. */
-.funnelPreset.funnelPresetActive {
-  color: var(--gs-accent);
-  border-color: var(--gs-accent);
-  background: var(--gs-accent-bg);
-}
-
-/* The footer says what the panel is currently asking git for. Without it the
-   only feedback lived on the chip row BEHIND the panel, so a reader had to
-   close the thing to find out whether their ticks took. */
-.funnelFoot {
-  flex: none;
-  display: flex; align-items: center; justify-content: space-between; gap: 8px;
-  padding: 6px 10px;
-  border-top: 1px solid var(--gs-border-soft);
-  background: var(--gs-bg);
-  font-size: 11px; line-height: 16px;
-}
-.funnelFootCount { color: var(--gs-fg-faint); font-variant-numeric: tabular-nums; }
-.funnelFootCountOn { color: var(--gs-fg-muted); }
-.funnelFootClear {
-  flex: none;
-  padding: 2px 6px;
-  border: none; border-radius: var(--gs-r-control);
-  background: transparent;
-  color: var(--gs-fg-dim);
-  font-family: inherit; font-size: 11px; line-height: 16px;
-  cursor: pointer;
-}
-.funnelFootClear:hover:not(:disabled) { color: var(--gs-fg); background: var(--gs-raise); }
-.funnelFootClear:disabled { color: var(--gs-fg-fainter); cursor: default; }
-
-.commitPopSubject {
-  color: var(--gs-fg);
-  font-size: var(--gs-t-ui); font-weight: 600; line-height: 18px;
-  white-space: pre-wrap; overflow-wrap: anywhere;
-  user-select: text;
-}
-.commitPopBody {
-  margin: 0;
-  color: var(--gs-fg-muted);
-  font-family: inherit;
-  font-size: var(--gs-t-dense); line-height: 18px;
-  white-space: pre-wrap; overflow-wrap: anywhere;
-  user-select: text;
-}
-
-/* Drawer tabs — mirrors the app's own tab bar: 13/16 text at weight 500, a
-   tertiary label, the selected one riding the accent over a 2px bar. */
-.tabs {
-  display: flex; gap: 24px;
-  flex: none;
-  padding: 0 var(--gs-gutter);
-  border-bottom: 1px solid var(--gs-border-soft);
-  background: var(--gs-surface-2);
-  font-family: inherit;
-}
-.tab {
-  position: relative;
-  padding: 8px 0 9px;
-  border: none;
-  background: transparent;
-  font-family: inherit;
-  font-size: var(--gs-t-ui); line-height: 16px; font-weight: 500;
-  color: var(--gs-fg-dim);
-  cursor: pointer;
-}
-.tab::after {
-  content: '';
-  position: absolute; right: 0; bottom: 1px; left: 0;
-  height: 2px; border-radius: 2px;
-  background: transparent;
-}
-.tabActive { color: var(--gs-accent); }
-.tabActive::after { background: var(--gs-accent); }
-
-/* Compare tab: the base/head ref pickers. */
-.compareBar {
-  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
-  flex: none;
-  padding: 8px var(--gs-gutter);
-  border-bottom: 1px solid var(--gs-border-soft);
-  background: var(--gs-surface-2);
-  color: var(--gs-fg-dim);
-  font-family: var(--dsw-font-ui, system-ui, sans-serif);
-  font-size: var(--gs-t-dense);
-}
-.compareArrow { color: var(--gs-fg-faint); }
-
-/* Ref picker: a button that opens a filter box over a scrolling list. Sized for
-   a repository with hundreds of branches, where a chip row or a plain select
-   stops being usable. */
-.refPicker { position: relative; display: inline-flex; align-items: center; gap: 6px; }
-.refLabel { flex: none; color: var(--gs-fg-faint); }
-.refButton { max-width: 260px; justify-content: space-between; }
-.refValue { min-width: 0; overflow: hidden; }
-.refCaret { flex: none; color: var(--gs-fg-faint); font-size: 9px; }
-.refPop {
-  position: absolute; top: calc(100% + 4px); left: 0; z-index: 10;
-  display: flex; flex-direction: column;
-  width: 300px; max-width: 80vw;
-  border: 1px solid var(--gs-border); border-radius: var(--gs-r-control);
-  background: var(--gs-panel);
-  box-shadow: 0 12px 32px var(--gs-shadow);
-  overflow: hidden;
-}
-/* A short fixed menu rather than a branch list: no search box, no footer, and
-   sized to its own labels instead of the 300px a few hundred refs need. Anchored
-   right because the pickers that use it sit in a bar's right-hand cluster, where
-   a left-anchored popover would open off the drawer. */
-.menuPop {
-  width: auto; min-width: 100%;
-  left: auto; right: 0;
-  padding: 4px;
-}
-.refSearch {
-  flex: none;
-  padding: 7px 10px;
-  border: 0; border-bottom: 1px solid var(--gs-border-soft);
-  background: var(--gs-bg); color: var(--gs-fg);
-  font-family: inherit; font-size: var(--gs-t-dense);
-  outline: none;
-}
-.refSearch::placeholder { color: var(--gs-fg-faint); }
-/* Bounded so the popover never runs off the drawer, whatever the branch count. */
-.refList { flex: 1; max-height: 280px; overflow-y: auto; padding: 4px; }
-.refGroup {
-  padding: 6px 8px 3px;
-  color: var(--gs-fg-faint);
-  font-size: var(--gs-t-meta); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
-}
-.refRow {
-  display: flex; align-items: center; gap: 6px;
-  box-sizing: border-box; width: 100%;
-  padding: 5px 8px;
-  border: 0; border-radius: var(--gs-r-control);
-  background: transparent; color: var(--gs-fg-muted);
-  font-family: inherit; font-size: var(--gs-t-dense);
-  text-align: left; cursor: pointer;
-}
-.refRow:hover { background: var(--gs-raise); color: var(--gs-fg); }
-/* .refRowActive: see the shared selected-state rule at the foot of the file. */
-/* Keeps a branch without a worktree aligned with one that has the glyph. */
-.refRowSpacer { flex: none; width: 12px; }
-.refRowName { flex: 1 1 auto; min-width: 0; overflow: hidden; }
-.refEmpty { padding: 14px 10px; color: var(--gs-fg-faint); font-size: var(--gs-t-dense); }
-.refFoot {
-  flex: none;
-  padding: 5px 10px;
-  border-top: 1px solid var(--gs-border-soft);
-  color: var(--gs-fg-faint); font-size: var(--gs-t-meta);
-}
-
-/* Commit log — its own full-height pane beside the file tree. Rows are stacked
-   so each subject gets the pane's full width instead of a 340px ellipsis. */
-.commitsPane {
-  /* Shrinkable, with the floor as a min-width rather than a JS clamp alone: a
-     width dragged in one tab must not squeeze the diff to nothing when a third
-     pane appears in another. The floors come from the panel's own constants, so
-     the clamp and the stylesheet cannot drift apart. */
-  flex: 0 1 auto; box-sizing: border-box;
-  display: flex; flex-direction: column; min-height: 0;
-  /* Capped, so every pixel past the cap goes to the diff — the pane whose
-     content cannot wrap. */
-  width: 26%; min-width: var(--gs-min-commits); max-width: 340px;
-  background: var(--gs-surface);
-}
-/* Shared header bar for the commit and tree panes. Its own height comes from
-   the compact control it hosts, so a pane with tools and a pane without one
-   still line up across the divider. */
-.paneHead {
-  /* Wraps rather than overflows. Dragged narrow the pane cannot hold a title,
-     a funnel and a search box on one line, and what it used to do was clip the
-     search box at the pane's edge — a control half off the screen, with no
-     sign that the rest of it existed. */
-  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
-  flex: none;
-  min-height: 37px; box-sizing: border-box;
-  padding: 6px var(--gs-gutter-pane);
-  border-bottom: 1px solid var(--gs-border-soft);
-  color: var(--gs-fg-dim);
-  font-family: var(--dsw-font-ui, system-ui, sans-serif);
-  font-size: var(--gs-t-dense);
-}
-.paneTitle { font-weight: 600; }
-/* Zero-height probe below the last row; scrolling it into view fetches the next
-   page. It carries no pixels of its own so it cannot disturb the list. */
-.commitsSentinel { flex: none; height: 1px; }
-.commitsFoot {
-  flex: none;
-  padding: 8px;
-  color: var(--gs-fg-faint);
-  font-family: var(--dsw-font-ui, system-ui, sans-serif);
-  font-size: var(--gs-t-meta); text-align: center;
-  /* Reserved whether or not there is text, so arriving at the end of the list
-     does not shift the rows above it. */
-  min-height: 16px;
-}
-
-/* `flex: 1` with `min-height: 0` gives this scroller a DEFINITE height from the
-   pane. A percentage max-height cannot: its parent is sized by content, so the
-   percentage has nothing to resolve against and the list grows without bound —
-   which is what pushed the file tree off screen and the footer out of reach. */
-/* No gap between lines and no left padding: the graph column runs down the left
-   edge and a lane has to reach the next row to stay one line. The rows' own
-   breathing room is inside `.commit`, which keeps its inset and rounding. */
-.commits {
-  display: flex; flex-direction: column;
-  flex: 1; min-height: 0;
-  overflow-y: auto;
-  padding: 4px 6px 4px 0;
-}
-/* One list line: the graph slice, then the row. Fixed height, because the SVG
-   is drawn at exactly this height and the lanes only join if they agree. */
-.commitLine {
-  display: flex; align-items: stretch;
-  flex: none;
-  /* Published by the panel from `COMMIT_ROW_H`, which the lane graph also draws
-     each row's segment at — one source, because a row and its segment that
-     disagree leave the lanes short of the seam between rows. The two
-     arrangements want different rows, which is why this is a property and not
-     a number. Guarded by tests/commit-row-height.test.ts. */
-  height: var(--gs-commit-row);
-}
-.graphCell { flex: none; display: block; }
-/* An inset row, like dsh's own session rows: 12px radius, filled when active. */
-.commit {
-  display: flex; align-items: center; gap: 10px;
-  flex: 1 1 auto; min-width: 0; box-sizing: border-box;
-  height: 100%;
-  margin: 1px 0;
-  padding: 4px 8px;
-  border: 1px solid transparent;
-  border-radius: var(--gs-r-surface);
-  background: transparent;
-  font-family: inherit;
-  text-align: left;
-  cursor: pointer;
-  font-size: var(--gs-t-dense);
-  overflow: hidden;
-  transition: background 120ms ease, border-color 120ms ease;
-}
-/* Beside the diff the row turns into two lines: a pane of about 340px has no
-   width for the hash, the author, the date AND the subject on one, and the
-   subject is the part that would have given way. Above the diff it stays one
-   line — see the row's two shapes in `CommitRow`. */
-.commitsPane[data-layout="columns"] .commit {
-  flex-direction: column; align-items: stretch; justify-content: center; gap: 2px;
-}
-/* The subject line must not absorb the row's spare height, or the two lines
-   stop sitting together in the middle of the row. */
-.commitsPane[data-layout="columns"] .commitSubjectRow { flex: none; }
-.commitTop {
-  display: flex; align-items: center; justify-content: space-between; gap: 8px;
-  min-width: 0;
-}
-.commit:hover { background: var(--gs-raise); }
-.commitActive { border-color: var(--gs-accent-border); background: var(--gs-accent-bg); }
-/* Pushed to the right end of the row, and never squeezed: the subject is what
-   gives way when the pane narrows, because it is the part with an ellipsis to
-   give. */
-.commitMeta { flex: none; display: flex; align-items: baseline; gap: 8px; }
-.commitHash { flex: none; color: var(--gs-info); }
-.commitSubjectRow {
-  display: flex; align-items: baseline; gap: 4px;
-  flex: 1 1 auto; min-width: 0;
-}
-/* Shrinks, never grows. Growing was invisible while the list was a 26%%
-   column — the subject filled the row either way — and became a defect the
-   moment the list spanned the drawer: a subject that takes ALL the free space
-   pushes the has-a-body marker a thousand pixels right, where it reads as an
-   unexplained ellipsis next to the author rather than as "there is more to
-   this message". The row still pushes author and date to the right end;
-   .commitSubjectRow is what absorbs the slack. */
-.commitSubject {
-  flex: 0 1 auto; min-width: 0;
-  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
-  color: var(--gs-fg-muted);
-}
-.commitHasBody { flex: none; color: var(--gs-fg-faint); letter-spacing: 0.04em; }
-/* Branch and tag names pointing at this commit. Capped and ellipsised: a release
-   commit can carry a dozen refs, and none of them is worth the subject's room. */
-.commitRef {
-  flex: none;
-  max-width: 96px;
-  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
-  padding: 0 5px;
-  border: 1px solid var(--gs-accent-border); border-radius: var(--gs-r-pill);
-  background: var(--gs-accent-bg);
-  color: var(--gs-accent);
-  font-size: var(--gs-t-meta); line-height: 15px;
-}
-.commitWhen { flex: none; color: var(--gs-fg-faint); }
-/* Who wrote it — sits between hash and relative time, capped so a long name
-   cannot evict the time from the row. */
-.commitAuthor {
-  flex: none; max-width: 120px;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-  color: var(--gs-fg-dim);
-}
-
-.body { display: flex; flex: 1; min-height: 0; z-index: 1; }
-/* History stacks: the commit list over the tree-and-diff row. `.bodyRow` is
-   rendered on every tab, so the unstacked tabs are a row inside a row — which
-   costs nothing and keeps one JSX shape instead of two. */
-.body[data-stacked] { flex-direction: column; }
-.bodyRow { display: flex; flex: 1 1 0; min-width: 0; min-height: 0; }
-/* Stacked, the list is sized by HEIGHT and spans the drawer; the width rules
-   it carries for the column layout would otherwise pin it to 26%. */
-.body[data-stacked] .commitsPane {
-  width: auto; max-width: none; min-width: 0;
-  height: 34%; flex: none;
-  /* The drag's clamp, restated where a RESIZE can also reach it. An inline
-     `height` in pixels survives the window getting shorter, and then the list
-     is taller than the body: the lower half goes to zero and the handle ends
-     up below the bottom edge with nothing to grab. Percentages re-resolve on
-     every layout, which is exactly what the stored pixel height cannot do.
-     Both numbers come from the panel's own constants, so there is still one
-     home for them. `max()` keeps the range from inverting in a drawer too
-     short to hold both floors — the list then simply takes its minimum. */
-  min-height: var(--gs-min-commits-tall);
-  max-height: max(var(--gs-min-commits-tall), calc(100% - var(--gs-min-stacked-lower)));
-}
-
-/* File tree column. A peer of the commit pane and the diff, never their parent:
-   each of the three scrolls on its own and keeps its full height. */
-.treeCol {
-  flex: 0 1 auto; box-sizing: border-box;
-  display: flex; flex-direction: column; min-height: 0;
-  width: 28%; min-width: var(--gs-min-tree); max-width: 400px;
-  background: var(--gs-surface);
-}
-
-/* file tree */
-.treeWrap {
-  flex: 1; box-sizing: border-box;
-  display: flex; flex-direction: column;
-  min-width: 0; min-height: 0;
-}
-/* Two items, not five: the count and one group of buttons. The pane drags down
-   to 170px, so the row does have to wrap — but it wraps between the count and
-   the group, never inside it. Wrapping the buttons individually is what left a
-   lone "Collapse all" stranded on a second row under a right-aligned
-   "Expand all". `space-between` then aligns whichever way the row broke. */
-.treeTools {
-  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
-  justify-content: space-between;
-  flex: none;
-  min-height: 37px; box-sizing: border-box;
-  padding: 6px var(--gs-gutter-pane);
-  border-bottom: 1px solid var(--gs-border-soft);
-}
-/* Wraps only when the group alone cannot fit the pane — five controls do not
-   go into 170px by any arrangement, and a clipped button is worse than a
-   second row. Above ~250px this never fires. */
-.treeActions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
-/* The root tick sits in the same column the rows read down, so it is pulled out
-   of the toolbar's gutter to the pane edge rather than aligned to the label. */
-.treeLead { display: flex; align-items: center; gap: 4px; min-width: 0; }
-.treeLabel {
-  flex: none;
-  white-space: nowrap;
-  color: var(--gs-fg-dim); font-size: var(--gs-t-dense);
-}
-/* The file filter, revealed under the tools rather than squeezed into them:
-   the pane drags down to 170px, where the tick, the count and two icon buttons
-   already own the row. It costs a row only while it is being used. */
-.treeFilter {
-  position: relative;
-  flex: none;
-  display: flex; align-items: center;
-  padding: 6px var(--gs-gutter-pane);
-  border-bottom: 1px solid var(--gs-border-soft);
-}
-.treeFilterInput {
-  flex: 1 1 auto; min-width: 0;
-  height: var(--gs-h-compact); box-sizing: border-box;
-  padding: 0 24px 0 8px;
-  border: 1px solid var(--gs-border-soft); border-radius: var(--gs-r-control);
-  background: var(--gs-bg); color: var(--gs-fg);
-  font-family: inherit; font-size: var(--gs-t-dense);
-  outline: none;
-}
-.treeFilterInput:focus { border-color: var(--gs-accent); }
-.treeFilterInput::placeholder { color: var(--gs-fg-faint); }
-/* Inside the field's right padding, so clearing does not move the field or
-   change its width as the button comes and goes. */
-.treeFilterClear {
-  position: absolute; right: calc(var(--gs-gutter-pane) + 6px);
-  display: flex; align-items: center; justify-content: center;
-  width: 16px; height: 16px;
-  padding: 0;
-  border: 0; border-radius: var(--gs-r-pill);
-  background: transparent; color: var(--gs-fg-faint);
-  font-size: var(--gs-t-ui); line-height: 1;
-  cursor: pointer;
-}
-.treeFilterClear:hover { color: var(--gs-fg); }
-.tree {
-  flex: 1; min-height: 0;
-  margin: 0; padding: 6px 0 16px;
-  overflow: auto; list-style: none;
-}
-/* The list's stand-in while the view's file list is in flight: centred and
-   quiet, never a claim about how many changes exist. */
-.treeEmpty {
-  flex: 1; min-height: 0;
-  display: flex; align-items: center; justify-content: center;
-  color: var(--gs-fg-faint); font-size: var(--gs-t-ui);
-}
-/* Nested lists are NOT .tree: only the root list scrolls, otherwise every level
-   would grow its own scrollbar. */
-.treeSub {
-  position: relative;
-  margin: 0; padding: 0;
-  list-style: none;
-}
-/* One hairline per nesting level at the parent's chevron column, so a deep tree
-   reads as a tree rather than a ragged left edge. The offset comes from the row
-   that owns the level (see TREE_RAIL_OFFSET). */
-.treeSub::before {
-  content: '';
-  position: absolute;
-  top: 0; bottom: 0; left: var(--gs-rail, 0);
-  width: 1px;
-  background: var(--gs-border-soft);
-}
-.treeDirLi { position: relative; }
-.treeDir {
-  display: flex; align-items: center; gap: 6px;
-  box-sizing: border-box; width: 100%;
-  padding: 4px 12px 4px 8px;
-  border: 0;
-  background: transparent;
-  color: var(--gs-fg-dim);
-  font-family: inherit;
-  font-size: var(--gs-t-dense); font-weight: 600;
-  text-align: left;
-  cursor: pointer;
-}
-.treeDir:hover { background: var(--gs-panel); color: var(--gs-fg-muted); }
-.treeDirActive { color: var(--gs-fg-muted); }
-.chevron {
-  flex: none;
-  display: inline-block;
-  width: 10px;
-  color: var(--gs-fg-fainter);
-  font-size: var(--gs-t-meta);
-  transition: transform 120ms ease;
-}
-.chevronOpen { transform: rotate(90deg); }
-.treeDirName {
-  flex: 1; min-width: 0;
-  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
-}
-.treeDirCount {
-  flex: none;
-  padding: 0 6px;
-  border-radius: 999px;
-  background: var(--gs-neutral-bg);
-  color: var(--gs-fg-dim);
-  font-size: var(--gs-t-meta); font-weight: 600; line-height: 16px;
-}
-.treeDirCounts { flex: none; font-size: var(--gs-t-meta); font-variant-numeric: tabular-nums; }
-.file {
-  display: flex; align-items: center; gap: 8px;
-  box-sizing: border-box; width: 100%;
-  padding: 5px 14px;
-  border: 0;
-  border-left: 2px solid transparent;
-  background: transparent;
-  color: var(--gs-fg-muted);
-  font-family: inherit;
-  font-size: var(--gs-t-dense);
-  text-align: left;
-  cursor: pointer;
-}
-.file:hover { background: var(--gs-panel); }
-.fileActive {
-  background: var(--gs-panel);
-  border-left-color: var(--gs-accent);
-  color: var(--gs-fg);
-}
-
-.fileStatus {
-  flex: none;
-  display: inline-flex; align-items: center; justify-content: center;
-  width: 18px; height: 18px;
-  border-radius: 5px;
-  font-weight: 700; font-size: var(--gs-t-meta); line-height: 1;
-}
-.stAdded, .stUntracked { color: var(--gs-add); background: var(--gs-add-bg); }
-.stDeleted { color: var(--gs-del); background: var(--gs-del-bg); }
-.stModified { color: var(--gs-warn); background: var(--gs-warn-bg); }
-.stRenamed { color: var(--gs-info); background: var(--gs-info-bg); }
-
-.filePath { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
-.fileBinary {
-  flex: none;
-  padding: 0 5px;
-  border-radius: 4px;
-  background: var(--gs-neutral-bg);
-  color: var(--gs-fg-dim);
-  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
-}
-.fileCounts { flex: none; font-size: var(--gs-t-meta); font-variant-numeric: tabular-nums; }
-.fileCountAdd { color: var(--gs-add); }
-.fileCountDel { color: var(--gs-del); }
-
-/* diff pane */
-/* A column, so a header can sit above the scrolled diff instead of inside it.
-   `overflow: auto` stays as the outer guard — the rename line and the
-   side-by-side pane are also children here, and one of them growing must
-   scroll rather than be clipped. */
-.diffPane {
-  flex: 1 1 0; min-width: var(--gs-min-diff);
-  display: flex; flex-direction: column;
-  overflow: auto; background: var(--gs-surface);
-}
-/* The unified view: its own header and its own scroller, filling whatever the
-   pane has left after a rename line. */
-.diffWrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; }
-.diffScroll { flex: 1 1 0; min-height: 0; overflow: auto; outline: none; }
-/* The walk's controls. Right-aligned and quiet: they belong to the diff, and
-   the diff is what the reader came for. Same shape as `.sideNav` in the
-   side-by-side pane, because it is the same control. */
-.diffNav {
-  flex: none;
-  display: flex; justify-content: flex-end; align-items: center; gap: 4px;
-  padding: 3px 12px 3px 0;
-  border-bottom: 1px solid var(--gs-border-soft);
-}
-.diffNav .blockBtn { padding-inline: 6px; line-height: 0; }
-/* The pre is as wide as its longest line (`max-content`) and at least the pane
-   (`min-width: 100%`). Each row then stretches to that width, so add/delete
-   tints survive horizontal scroll instead of stopping at the viewport edge. */
-.diffPre {
-  display: flex; flex-direction: column;
-  margin: 0; padding: 8px 0 16px;
-  min-width: 100%; width: max-content;
-  /* GitHub's blob stack — Cascadia ligatures and a 16px leading were why this
-     read as a terminal dump instead of a pull-request diff. */
-  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
-  font-size: var(--gs-t-dense); line-height: 20px; font-weight: 400;
-  font-variant-ligatures: none;
-  font-feature-settings: 'liga' 0, 'calt' 0;
-  tab-size: 4;
-}
-.renameLine {
-  flex: none;
-  padding: 8px 16px;
-  border-bottom: 1px solid var(--gs-border-soft);
-  color: var(--gs-info);
-  font-size: var(--gs-t-dense);
-}
-/* The old path is literal content, not prose: give it the body colour so it
-   reads louder than the sentence around it. */
-.renameLine code { color: var(--gs-fg); }
-
-/* Each line: [old#][new#][sign][code]. Stretch, don't baseline — empty line-number
-   cells plus nested syntax spans used to inflate the row into prose leading. */
-.line {
-  display: flex; align-items: stretch;
-  width: max-content; min-width: 100%;
-  min-height: 20px; line-height: 20px;
-  white-space: nowrap;
-}
-.lnOld, .lnNew {
-  flex: none;
-  box-sizing: border-box;
-  width: 3.2em;
-  padding: 0 8px;
-  text-align: right;
-  color: var(--gs-fg-fainter);
-  user-select: none;
-  font-variant-numeric: tabular-nums;
-}
-.line:hover .lnOld, .line:hover .lnNew { color: var(--gs-fg-dim); }
-/* No rule down the right edge: GitHub carries the +/- as the first glyph of the
-   code cell and draws nothing between the columns. The rule that used to be
-   here cut every tinted row in half, which is most of why a full-file addition
-   read as two stacked green bands rather than one block of new code. */
-.gutter {
-  flex: none;
-  width: 1.4em;
-  text-align: center;
-  user-select: none;
-}
-.code { flex: 1 0 auto; white-space: pre; padding: 0 16px 0 10px; }
-
-.lineAdd { background: var(--gs-add-line); }
-.lineDel { background: var(--gs-del-line); }
-.lineAdd .lnOld, .lineAdd .lnNew, .lineAdd .gutter { background: var(--gs-add-num, var(--gs-add-line)); }
-.lineDel .lnOld, .lineDel .lnNew, .lineDel .gutter { background: var(--gs-del-num, var(--gs-del-line)); }
-.lineContext { color: var(--gs-fg-muted); }
-/* GitHub's hunk header is quiet: a faint accent wash on the row, muted grey
-   text, and the saturated blue confined to the number cells. It used to run the
-   accent colour across the whole line, which made every hunk boundary shout
-   louder than the code it introduces. */
-.lineHunk { background: var(--gs-hunk); }
-.lineHunk .code { color: var(--gs-fg-dim); }
-.lineHunk .lnOld, .lineHunk .lnNew, .lineHunk .gutter { background: var(--gs-hunk-num, var(--gs-hunk)); }
-.signAdd { color: var(--gs-add); }
-.signDel { color: var(--gs-del); }
-
-.wordAdd { background: var(--gs-add-word); border-radius: 2px; }
-.wordDel { background: var(--gs-del-word); border-radius: 2px; }
-
-/* Side-by-side diff pane. One grid holds EVERY row's four cells — a per-row
-   grid would let the column boundary drift with each row's content, and a
-   fixed split would clip long lines. Equal 1fr code tracks keep the two
-   columns identically wide however wide the widest line is, and the whole pane
-   (this view's single shared vertical scroll) carries the horizontal one. */
-/* The pane is a HEADER plus a scroller, not one wide column: the tab row
-   carries Save/Revert, and a row sized to the widest line of code pushes them
-   off the right edge of a long file — reachable only by scrolling sideways,
-   which is not where anyone looks for a toolbar. Only `.sideScroll` scrolls;
-   the tabs and the notices above it stay put on both axes. */
-.sidePane { display: flex; flex-direction: column; width: 100%; min-width: 0; height: 100%; }
-/* Vertical scrolling belongs to the pane; horizontal belongs to each column,
-   which is what lets the divider mean something. A single scroller for both
-   axes would tie the two sides' horizontal position together and size the
-   whole grid to the widest line in the file. */
-.sideScroll { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; }
-.sideCols { display: flex; align-items: stretch; min-height: 100%; }
-/* `min-width: 0` is what lets a flex column be narrower than its content —
-   without it the column refuses to shrink and the divider stops moving. */
-.sideCol { flex: 0 0 auto; min-width: 0; overflow-x: auto; }
-.sideColRight { flex: 1 1 0; }
-.sideColGrid {
-  display: grid;
-  grid-template-columns: 3.2em 1fr;
-  align-content: start;
-  padding: 8px 0 16px;
-  min-width: 100%; width: max-content;
-  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
-  font-size: var(--gs-t-dense); line-height: 20px; font-weight: 400;
-  font-variant-ligatures: none;
-  font-feature-settings: 'liga' 0, 'calt' 0;
-  tab-size: 4;
-}
-/* The blame gutter, on the working-tree column only. Fixed width so the code
-   beside it does not shift line to line, and clipped rather than wrapped: a
-   gutter row that grew to two lines would break the alignment the whole
-   side-by-side view rests on. */
-.sideColGridBlame { grid-template-columns: 13em 3.2em 1fr; }
-.blameCell {
-  box-sizing: border-box;
-  padding: 0 8px 0 10px;
-  border-right: 1px solid var(--gs-border-soft);
-  color: var(--gs-fg-faint);
-  font-size: var(--gs-t-meta);
-  white-space: pre; overflow: hidden; text-overflow: ellipsis;
-  user-select: none;
-}
-.sideTabs {
-  z-index: 5;
-  display: flex; gap: 16px;
-  flex: none;
-  padding: 6px 16px 0;
-  border-bottom: 1px solid var(--gs-border-soft);
-  background: var(--gs-surface-2);
-}
-.sideTab {
-  position: relative;
-  padding: 2px 0 5px;
-  border: none;
-  background: transparent;
-  font-family: inherit;
-  font-size: var(--gs-t-meta); line-height: 16px; font-weight: 500;
-  color: var(--gs-fg-dim);
-  cursor: pointer;
-}
-.sideTab::after {
-  content: '';
-  position: absolute; right: 0; bottom: 1px; left: 0;
-  height: 2px; border-radius: 2px;
-  background: transparent;
-}
-.sideTabActive { color: var(--gs-accent); }
-.sideTabActive::after { background: var(--gs-accent); }
-.sideNotice {
-  flex: none;
-  padding: 8px 16px;
-  border-bottom: 1px solid var(--gs-border-soft);
-  color: var(--gs-info);
-  font-size: var(--gs-t-dense);
-}
-.sideNum {
-  box-sizing: border-box;
-  padding: 0 8px;
-  text-align: right;
-  color: var(--gs-fg-fainter);
-  user-select: none;
-  font-variant-numeric: tabular-nums;
-}
-.sideNumAdd { background: var(--gs-add-num, var(--gs-add-line)); }
-.sideNumDel { background: var(--gs-del-num, var(--gs-del-line)); }
-.sideCode { white-space: pre; padding: 0 16px 0 10px; min-height: 20px; }
-/* Stands in for the rows outside the window, so the scrollbar is the length of
-   the FILE rather than of whatever is currently rendered. Spans every column,
-   including the blame gutter's. */
-.sideSpacer { grid-column: 1 / -1; }
-/* The same, for the unified view's flex column. `flex: none` so it is exactly
-   the height it claims rather than one stretched by its siblings. */
-.diffSpacer { flex: none; }
-.sideCodeSame { color: var(--gs-fg-muted); }
-.sideCodeAdd { background: var(--gs-add-line); }
-.sideCodeDel { background: var(--gs-del-line); }
-/* The block affordance: a changed row's cells carry the block tint above, and
-   the hovered block's every cell — code and gutter — takes the hot outline,
-   so the reader sees the unit the buttons act on rather than the one cell the
-   pointer happens to be over. `.sideCellBlock` also positions the action bar,
-   which a cell of the block's first row carries. */
-.sideCellBlock { position: relative; }
-.sideBlockHot { outline: 1px solid var(--gs-accent); outline-offset: -1px; }
-
-/* The hovered block's actions, floating on the row above the block. It lives
-   INSIDE the block's first code cell, so it travels with the column and the
-   scroll, and it only ever covers context — never the change it acts on. The
-   surface and shadow are what keep it readable over code. */
-.blockBar {
-  position: absolute; top: -21px; left: 0; z-index: 4;
-  display: flex; gap: 4px;
-  padding: 2px;
-  border: 1px solid var(--gs-border);
-  border-radius: var(--gs-r-control);
-  background: var(--gs-surface-2, var(--gs-bg));
-  box-shadow: 0 4px 14px var(--gs-shadow);
-  white-space: nowrap;
-}
-.blockBtn {
-  padding: 0 8px;
-  border: 1px solid var(--gs-border); border-radius: var(--gs-r-pill);
-  background: var(--gs-bg); color: var(--gs-fg-dim);
-  font-family: inherit; font-size: var(--gs-t-meta); line-height: 16px;
-  cursor: pointer;
-}
-.blockBtn:hover:not(:disabled) { color: var(--gs-fg); border-color: var(--gs-accent); }
-.blockBtn:disabled { opacity: 0.45; cursor: default; }
-/* The roll-back button stays red at rest, not only on hover: it is the one
-   action in the bar that cannot be undone, and arriving under the pointer is
-   not what should make that visible. */
-.blockBtnDanger { color: var(--gs-del); border-color: var(--gs-del-bg, var(--gs-border)); }
-.blockBtnDanger:hover:not(:disabled) { color: var(--gs-del); border-color: var(--gs-del); }
-
-/* The editable right column. The working-tree column is readable but visibly
-   a text surface before editing is armed; the tab row carries the arm/save
-   cluster at its right end. */
-.sideArmable { cursor: text; }
-
-/* An editable buffer says so — the one thing a rendered code pane cannot say
-   by itself.
-
-   Nothing about monospaced text on a background looks like a field. In the
-   Files tab the editor is live the moment the file opens, so without a mark
-   the reader finds out whether they may type by typing — and finds out they
-   may not the same way, on a pane that silently swallows it. The rule runs
-   the full height of the editor's leading edge: dim while nothing is focused
-   (present, not loud — it sits beside code someone came to read), full accent
-   once the caret is actually inside, which doubles as "this pane has the
-   keyboard".
-
-   Driven by an attribute the component sets from the same boolean that
-   configures `EditorState.readOnly`, so the rule cannot appear on a pane that
-   would refuse the keystroke. `pointer-events: none` because the bar overlays
-   the gutter's first two pixels, and a click there must still reach the
-   view. */
-.cmHost { position: relative; }
-.cmHost[data-editable]::before {
-  content: '';
-  position: absolute;
-  top: 0; bottom: 0; left: 0;
-  width: 2px;
-  border-radius: 1px;
-  background: var(--gs-accent);
-  opacity: 0.32;
-  transition: opacity 140ms ease;
-  pointer-events: none;
-}
-.cmHost[data-editable]:focus-within::before { opacity: 1; }
-/* The change nav takes the free space, so it and `.sideActions` after it sit
-   together at the right end. Only the FIRST auto margin absorbs anything —
-   the one on `.sideActions` then has nothing left to take, which is what
-   keeps the two groups adjacent rather than pushed to opposite ends. */
-.sideNav { margin-left: auto; display: flex; gap: 4px; align-items: center; padding: 2px 0 5px; }
-.sideNav .blockBtn { padding-inline: 6px; line-height: 0; }
-.sideNavCount { color: var(--gs-fg-faint); font-size: var(--gs-t-meta); white-space: nowrap; }
-.sideActions { margin-left: auto; display: flex; gap: 4px; align-items: flex-start; padding: 2px 0 5px; }
-/* Save gains the accent only once there is something to save: the button's
-   whole enabled state is the dirty flag, and colour says it sooner than the
-   pointer does. */
-.sideSaveReady { color: var(--gs-accent); border-color: var(--gs-accent); }
-
-/* The reload-or-overwrite banner (§4) and the failed-save banner: a warning
-   strip under the tabs carrying its own actions, so the decision it asks for
-   is one click away rather than a sentence away. */
-.sideBanner {
-  flex: none;
-  display: flex; flex-direction: column; gap: 6px;
-  padding: 8px 16px;
-  border-bottom: 1px solid var(--gs-border-soft);
-  background: var(--gs-del-bg, transparent);
-  color: var(--gs-del);
-  font-size: var(--gs-t-dense);
-}
-.sideBannerTitle { font-weight: 600; }
-.sideBannerActs { display: flex; gap: 4px; }
-
-/* The editor grid item that positions the textarea. It spans exactly the
-   buffer's rows of the fourth column; the textarea fills it absolutely. */
-.sideEditCell { position: relative; }
-
-
-/* No syntax-tint classes here: Shiki resolves a real TextMate theme and emits a
-   hex per token, so the panel writes colour inline. A four-class approximation
-   painted identifiers, types and punctuation all one colour, which is what made
-   the diff look unhighlighted next to GitHub's. */
-
-.empty { padding: 32px 24px; color: var(--gs-fg-faint); font-size: var(--gs-t-ui); }
-
-/* ============================ write operations ============================ */
-
-/* Sync bar: fetch / pull / push, with the divergence they act on. A chrome bar
-   like the others, so it takes the drawer gutter and not a gutter of its own. */
-.syncBar {
-  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
-  flex: none;
-  padding: 8px var(--gs-gutter);
-  border-bottom: 1px solid var(--gs-border-soft);
-  background: var(--gs-surface-2);
-  font-size: var(--gs-t-dense);
-  color: var(--gs-fg-dim);
-}
-.syncUpstream {
-  max-width: 260px;
-  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
-  color: var(--gs-fg-muted);
-  font-variant-numeric: tabular-nums;
-}
-.syncLevel { color: var(--gs-fg-faint); }
-.syncSpacer { flex: 1 1 auto; }
-.btn:disabled, .treeIcon:disabled, .miniBtn:disabled, .refButton:disabled, .funnelButton:disabled {
-  opacity: 0.45;
-  cursor: default;
-}
-/* A control disabled ONLY by an operation too young to report keeps its full
-   strength. Every tick stages through git, and fading the whole sync row for
-   the ~150ms that takes was a blink, not feedback — nobody can act inside it.
-   The click is still refused from the first frame; see `op-feedback.ts`. */
-.btn[data-quiet]:disabled, .refButton[data-quiet]:disabled { opacity: 1; }
-
-/* Outcome of the last operation. Pre-wrap because git's own message rides along
-   under the explanation, and it arrives with its newlines. */
-.opBanner {
-  flex: none;
-  padding: 8px var(--gs-gutter);
-  border-bottom: 1px solid var(--gs-border-soft);
-  font-size: var(--gs-t-dense); line-height: 18px;
-  white-space: pre-wrap; overflow-wrap: anywhere;
-  user-select: text;
-}
-.opBannerOk { background: var(--gs-add-bg); color: var(--gs-add); }
-.opBannerBad { background: var(--gs-del-bg); color: var(--gs-del); }
-
-/* A file row and its stage toggle. The row keeps its own indent padding, so the
-   toggle trails it rather than displacing the tree's left edge. */
-.fileLi { display: flex; align-items: stretch; }
-.fileLi .file { flex: 1 1 auto; min-width: 0; }
-/* Roll back, in the same 22px slot the tick occupies on the other side — the
-   row already has two gutters, and a third would eat the name.
-   It holds its width at all times and only fades in on hover or keyboard
-   focus: revealing it by `display` would re-flow the name column under the
-   pointer, and a destructive control that shifts the row as it appears is one
-   the pointer arrives at by accident. */
-.fileDiscard {
-  flex: none;
-  display: flex; align-items: center; justify-content: center;
-  width: 22px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: var(--gs-fg-faint);
-  opacity: 0;
-  cursor: pointer;
-  transition: opacity 120ms ease, color 120ms ease;
-}
-.fileLi:hover .fileDiscard, .fileDiscard:focus-visible { opacity: 1; }
-/* Red on hover, and only on hover. Standing red would make every row of a
-   working tree look like a warning; arriving under the pointer is where the
-   colour has something to say. */
-.fileDiscard:hover { color: var(--gs-del); }
-.fileDiscard:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: -2px; border-radius: var(--gs-r-control); }
-/* Directory rows need the same two-slot row as files, but their subtree list
-   has to stay a child of the <li> — hence a wrapper around just the row. */
-.treeRow { display: flex; align-items: stretch; }
-.treeRow .treeDir { flex: 1 1 auto; min-width: 0; }
-
-/* ---- the commit tick ----
- *
- * The drawer presents a commit the way IDEA does: a set of ticks, not a staging
- * area. A tick is `git add` the moment it is clicked, so the tree and
- * `git status` can never disagree.
- *
- * The column does NOT indent with the tree. Depth already costs room in a pane
- * that drags to 170px, and a straight column down the left edge is what makes
- * "what am I about to commit" readable in one glance — which is why the ticks
- * exist. Its width is TREE_CHECK_W; the row indents start after it. */
-.checkBox {
-  flex: none;
-  display: flex; align-items: center; justify-content: center;
-  width: 22px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-}
-.checkMark {
-  display: flex; align-items: center; justify-content: center;
-  box-sizing: border-box;
-  width: 14px; height: 14px;
-  border: 1px solid var(--gs-fg-faint); border-radius: 3px;
-  background: var(--gs-bg);
-  color: transparent;
-  font-size: 10px; font-weight: 700; line-height: 1;
-  transition: background 120ms ease, border-color 120ms ease;
-}
-.checkBox:hover .checkMark { border-color: var(--gs-accent); }
-.checkBox:focus-visible { outline: none; }
-.checkBox:focus-visible .checkMark { outline: 2px solid var(--gs-accent); outline-offset: 1px; }
-/* Ticked and half-ticked share a filled box: both mean "some of this is going
-   into the commit", and the glyph inside says which. */
-.checkMarkOn, .checkMarkPartial {
-  border-color: var(--gs-accent);
-  background: var(--gs-accent);
-  color: var(--gs-on-accent);
-}
-
-/* Commit box: pinned under the tree, so the message stays reachable however far
-   the file list scrolls. */
-.commitBox {
-  flex: none;
-  display: flex; flex-direction: column; gap: 6px;
-  padding: 8px var(--gs-gutter-pane) 10px;
-  border-top: 1px solid var(--gs-border);
-  background: var(--gs-surface-2);
-}
-.commitMessage {
-  width: 100%; box-sizing: border-box;
-  min-height: 46px; max-height: 160px;
-  padding: 6px 8px;
-  border: 1px solid var(--gs-border); border-radius: var(--gs-r-control);
-  background: var(--gs-bg); color: var(--gs-fg);
-  font-family: inherit; font-size: var(--gs-t-dense); line-height: 18px;
-  resize: vertical;
-  outline: none;
-}
-.commitMessage:focus { border-color: var(--gs-accent-border); }
-.commitMessage::placeholder { color: var(--gs-fg-faint); }
-.commitRow { display: flex; align-items: center; gap: 8px; }
-.commitAmend {
-  display: inline-flex; align-items: center; gap: 4px;
-  color: var(--gs-fg-dim); font-size: var(--gs-t-meta);
-  cursor: pointer;
-}
-.commitAmend input { accent-color: var(--gs-accent); cursor: pointer; }
-.commitStaged { margin-left: auto; color: var(--gs-fg-faint); font-size: var(--gs-t-meta); }
-/* The commit box's one standing instruction: tick to stage, then commit. A
-   constant quiet line at the top — the blocker banner that appeared only when
-   the index was empty read as an error, and arrived after the confusion it
-   explains. */
-.commitLead { margin: 0; color: var(--gs-fg-faint); font-size: var(--gs-t-meta); line-height: 15px; }
-
-/* Commit is the one PRIMARY action in the drawer, and the only control that
-   gets a solid fill. As a quiet outlined button it sat at the same weight as
-   Expand all and disappeared into the row — the button that writes history
-   should not look like the button that folds a directory. */
-.commitBtn {
-  flex: none;
-  box-sizing: border-box;
-  display: inline-flex; align-items: center; justify-content: center;
-  min-width: 92px;
-  height: var(--gs-h-control);
-  padding: 0 16px;
-  border: 1px solid transparent; border-radius: var(--gs-r-control);
-  background: var(--gs-accent); color: var(--gs-on-accent);
-  font-family: inherit; font-size: var(--gs-t-ui); font-weight: 600; line-height: 1;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: filter 120ms ease, opacity 120ms ease;
-}
-.commitBtn:hover:not(:disabled) { filter: brightness(1.1); }
-.commitBtn:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: 2px; }
-/* Disabled keeps the shape and loses the weight: the button stays findable, so
-   "nothing is staged yet" reads as a state rather than as a missing feature. */
-.commitBtn:disabled {
-  background: var(--gs-raise); color: var(--gs-fg-faint);
-  border-color: var(--gs-border);
-  cursor: default;
-}
-
-/* ============================ one button vocabulary ============================
- *
- * Every clickable control in the drawer is one of two shapes, and which one it
- * gets is decided by WHERE IT LIVES, never by what it does: drawer-level chrome
- * (header actions, ref chips, menu triggers) is a PILL, and anything inside a
- * panel or pane is a ROUNDED RECT. They differ in shape and nothing else — same
- * height, same type size, same hover, same focus ring, same transition.
- *
- * Grouping the selectors is what enforces that. Each class used to spell out
- * its own padding, radius and font-size, and the same "small secondary button"
- * had drifted to four heights and three radii across one screen.
- */
-.btn, .miniBtn, .treeIcon, .commitCopy, .scopeBtn, .refButton, .funnelButton, .funnelPreset, .layoutButton {
-  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
-  box-sizing: border-box;
-  flex: none;
-  height: var(--gs-h-control);
-  padding: var(--gs-pad-control);
-  border: 1px solid var(--gs-border);
-  border-radius: var(--gs-r-control);
-  background: transparent;
-  color: var(--gs-fg-dim);
-  font-family: inherit;
-  font-size: var(--gs-t-ui);
-  line-height: 1;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
-}
-.btn:hover, .miniBtn:hover, .treeIcon:hover, .commitCopy:hover,
-.scopeBtn:hover, .refButton:hover, .funnelButton:hover, .funnelPreset:hover, .layoutButton:hover {
-  background: var(--gs-raise);
-  color: var(--gs-fg);
-  border-color: var(--gs-fg-fainter);
-}
-.btn:focus-visible, .miniBtn:focus-visible, .treeIcon:focus-visible,
-.commitCopy:focus-visible, .scopeBtn:focus-visible, .refButton:focus-visible,
-.funnelPreset:focus-visible, .layoutButton:focus-visible {
-  outline: 2px solid var(--gs-accent);
-  outline-offset: 1px;
-}
-
-/* Pills are for drawer-level chrome: the header's actions, the ref chips, and
-   anything that opens a menu — dsh spells its own dropdown triggers
-   ("Code mode ⌄", "glm-5.3 ⌄") as pills, so a trigger that is not one reads as
-   foreign. Controls that live INSIDE a panel or pane stay 8px rects. */
-.btn, .refButton { border-radius: var(--gs-r-pill); }
-
-/* Pane tools give their vertical space back to the diff; the date presets sit
-   inside a 320px popover, so they take the compact height too. */
-.treeIcon, .commitCopy, .funnelPreset, .layoutButton {
-  height: var(--gs-h-compact);
-  padding: var(--gs-pad-compact);
-  font-size: var(--gs-t-dense);
-}
-/* Expand / collapse all are the tree's own chevron at its two angles: the
-   button shows the state it puts every row into. Icon-only because at the 170px
-   the pane drags down to, two more text buttons cannot share a row with the
-   count — and these two are the pair a tree header always carries. */
-.treeIcon { width: var(--gs-h-compact); padding: 0; }
-/* The arrangement switch: two square icon buttons at the end of the commit
-   list's head, side by side with no gap so they read as one control. Icon-only
-   for the same reason the tree's are — the head already carries a title, a
-   funnel and a search box, and at the 190px the pane drags down to there is no
-   room for two more words. */
-/* Pushed to the far end of History's toolbar row, away from the ref picker:
-   one changes WHAT is listed, the other only where it is drawn. */
-.layoutSwitch { display: inline-flex; flex: none; gap: 2px; margin-left: auto; }
-.layoutButton { width: var(--gs-h-compact); padding: 0; }
-/* Qualified, like `.treeIconOn`: the shared vocabulary sets `color` at the
-   same specificity a few rules above. */
-.layoutButton.layoutButtonOn { color: var(--gs-accent); border-color: var(--gs-accent); }
-.layoutGlyph { display: block; }
-/* Qualified, like `.funnelButtonActive`: this sits inside the shared button
-   vocabulary, which sets `color` at the same specificity a few lines above. */
-.treeIcon.treeIconOn { color: var(--gs-accent); border-color: var(--gs-accent); }
-.treeIconGlyph { display: block; font-size: var(--gs-t-meta); line-height: 1; }
-.treeIconDown { transform: rotate(90deg); }
-
-/* The scope toggle splits its row in two equal halves, so it opts out of the
-   vocabulary's `flex: none`. Declared here rather than beside `.scopeRow`
-   because it has to win against the grouped rule above by source order. */
-.scopeBtn { flex: 1 1 0; }
-
-/* The single "this one is selected" idiom. Three different ones — accent chip,
-   bordered panel, left accent bar — used to mean the same thing in one drawer. */
-.scopeBtnActive, .miniBtnPrimary, .segmentActive, .refRowActive, .paletteRowActive {
-  border-color: var(--gs-accent-border);
-  background: var(--gs-accent-bg);
-  color: var(--gs-accent);
-  font-weight: 600;
-}
-
-/* Icon-only chrome: square, so four of them read as a control cluster rather
-   than four pills of drifting width. Height, border, radius and hover still
-   come from the vocabulary — only the box changes shape. */
-.btnIcon { width: var(--gs-h-control); padding: 0; }
-.btnIcon svg { display: block; }
-/* Close is the one destructive control in the row, and every window on the
-   machine says so with red on hover. Quiet until then: a permanently red X in
-   a header would read as an error state. */
-.btnClose:hover:not(:disabled) {
-  border-color: var(--gs-del); background: var(--gs-del-bg); color: var(--gs-del);
-}
-
-/* Sync actions that have something to report.
- *
- * These three variants set COLOUR ONLY — height, padding, radius and type size
- * still come from the vocabulary above, so a loud Push is the same object as a
- * quiet one and not a second button that happens to look similar.
- *
- * Fetch deliberately has no variant. It writes nothing, so it has no state to
- * announce, and leaving one of the three permanently quiet is what makes the
- * other two register as signal rather than decoration. */
-.btnBehind {
-  border-color: var(--gs-warn); background: var(--gs-warn-bg); color: var(--gs-warn);
-  font-weight: 600;
-}
-.btnBehind:hover:not(:disabled) { background: var(--gs-warn-bg); color: var(--gs-warn); border-color: var(--gs-warn); }
-.btnAhead {
-  border-color: var(--gs-add); background: var(--gs-add-bg); color: var(--gs-add);
-  font-weight: 600;
-}
-.btnAhead:hover:not(:disabled) { background: var(--gs-add-bg); color: var(--gs-add); border-color: var(--gs-add); }
-/* Publishing a branch that exists nowhere else is the one moment this bar has a
-   primary action, so it gets the solid fill Commit uses — and only then. */
-.btnPrimary {
-  border-color: var(--gs-accent); background: var(--gs-accent); color: var(--gs-on-accent, #fff);
-  font-weight: 600;
-}
-.btnPrimary:hover:not(:disabled) { background: var(--gs-accent); color: var(--gs-on-accent, #fff); border-color: var(--gs-accent); }
-
-/* The count riding inside Pull / Push. Reads as part of the label rather than a
-   badge stuck on it: same colour, tabular, just set apart by a hairline. */
-.btnCount {
-  margin-left: 1px; padding-left: 6px;
-  border-left: 1px solid currentColor;
-  font-variant-numeric: tabular-nums;
-  opacity: 0.85;
-}
-
-/* Pull and its strategy are one control. The picker is Pull's argument, not a
-   third action, so the two are welded: shared border, one outer radius. */
-.pullGroup { display: inline-flex; flex: none; align-items: center; }
-.pullGroup > .refPicker > .refButton {
-  border-top-right-radius: 0; border-bottom-right-radius: 0;
-  border-right-color: transparent;
-}
-.pullGroup > .btn {
-  margin-left: -1px;
-  border-top-left-radius: 0; border-bottom-left-radius: 0;
-}
-
-/* Scrollbars inside the drawer.
-   Listing the scrolling panes by name is what let the file tree keep the
-   platform's own wide light scrollbar after that pane was renamed, so this
-   matches every descendant instead: nothing to keep in step as panes change.
-   `scrollbar-*` inherit, which covers Firefox from the same declaration. */
-.drawer { scrollbar-width: thin; scrollbar-color: var(--gs-border) transparent; }
-.drawer ::-webkit-scrollbar { width: 10px; height: 10px; }
-.drawer ::-webkit-scrollbar-track, .drawer ::-webkit-scrollbar-corner { background: transparent; }
-.drawer ::-webkit-scrollbar-thumb {
-  /* Painted inside a transparent border so the thumb reads as a floating pill
-     rather than a bar welded to the pane edge. */
-  background: var(--gs-border);
-  background-clip: padding-box;
-  border: 3px solid transparent;
-  border-radius: 999px;
-}
-.drawer ::-webkit-scrollbar-thumb:hover { background: var(--gs-fg-faint); background-clip: padding-box; }
-
-/* Overflow counter for a commit carrying more refs than the row can show. */
-.commitRefMore {
-  flex: none;
-  padding: 0 5px;
-  border-radius: var(--gs-r-pill);
-  background: var(--gs-neutral-bg);
-  color: var(--gs-fg-dim);
-  font-size: var(--gs-t-meta); line-height: 15px;
-  cursor: default;
-}
-
-/* ---- the roll-back confirmation ----
- *
- * Scoped to the drawer rather than the viewport: `.drawer` is the positioned
- * ancestor, so the scrim dims the thing the question is about and leaves the
- * session behind it alone. It is also the only modal surface in this plugin —
- * everything else the drawer does can be done again.
+ * The build inlines these source modules before Lightning CSS scopes class
+ * names. Runtime behavior therefore stays exactly one class map and one
+ * <style> element; the split is for ownership and review, not extra requests.
  */
-.confirmScrim {
-  /* `position`, `inset` and the stacking rank live with the drawer's other
-     child ranks — see `.drawer > .confirmScrim`. */
-  display: flex; align-items: center; justify-content: center;
-  padding: 24px;
-  background: var(--gs-backdrop);
-  animation: gsFade 120ms ease-out;
-}
-.confirmBox {
-  display: flex; flex-direction: column; gap: 10px;
-  box-sizing: border-box;
-  width: min(440px, 100%);
-  padding: 18px;
-  border: 1px solid var(--gs-border); border-radius: var(--gs-r-drawer);
-  background: var(--gs-bg);
-  box-shadow: 0 18px 48px var(--gs-shadow);
-}
-.confirmTitle { color: var(--gs-fg); font-size: var(--gs-t-ui); font-weight: 600; }
-/* The body carries a path, which is the one string here that can be long and
-   has no sensible break points of its own. */
-.confirmBody {
-  color: var(--gs-fg-dim);
-  font-size: var(--gs-t-dense); line-height: 1.55;
-  overflow-wrap: anywhere;
-}
-/* Cancel first in the DOM so it takes focus and the Tab order starts on the
-   harmless answer; `row-reverse` puts the destructive one where the eye ends. */
-.confirmActions { display: flex; flex-direction: row-reverse; gap: 8px; margin-top: 2px; }
-/* Qualified rather than a bare modifier: written this way it out-specifies
-   `.btn` wherever either rule sits, which is the failure the drawer already
-   shipped once. */
-.btn.btnDanger {
-  border-color: var(--gs-del); background: var(--gs-del); color: var(--gs-on-accent, #fff);
-  font-weight: 600;
-}
-.btn.btnDanger:hover:not(:disabled) { border-color: var(--gs-del); background: var(--gs-del); color: var(--gs-on-accent, #fff); }
-
-/* Files tab: the repository browser's tree, and the pane that opens a file.
-   Modifier rules stay BELOW the base rule they narrow — a modifier declared
-   first loses the cascade, which the drawer-chrome test checks for. */
-.fbTree {
-  flex: none;
-  min-width: var(--gs-min-tree);
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 6px;
-  overflow: auto;
-  background: var(--gs-surface-2);
-}
-.fbSearch {
-  flex: none;
-  width: 100%;
-  box-sizing: border-box;
-  padding: 4px 6px;
-  font: inherit;
-  font-size: var(--gs-t-meta);
-  color: var(--gs-fg);
-  background: var(--gs-surface);
-  border: 1px solid var(--gs-border);
-  border-radius: 4px;
-}
-.fbSearch:focus { outline: none; border-color: var(--gs-accent); }
-.fbNote { flex: none; font-size: var(--gs-t-meta); color: var(--gs-fg-dim); padding: 2px 4px; }
-.fbList { list-style: none; margin: 0; padding: 0; }
-.fbRow {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  width: 100%;
-  padding: 2px 6px 2px 4px;
-  font: inherit;
-  font-size: var(--gs-t-dense);
-  color: var(--gs-fg-dim);
-  text-align: left;
-  background: none;
-  border: 0;
-  border-radius: 3px;
-  cursor: pointer;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.fbRow:hover { background: var(--gs-hover); }
-.fbRowActive { background: var(--gs-selected); color: var(--gs-fg); }
-.fbDirName { overflow: hidden; text-overflow: ellipsis; }
-.fbFileName { overflow: hidden; text-overflow: ellipsis; }
-.fbMain {
-  flex: 1 1 0;
-  min-width: var(--gs-min-diff);
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  background: var(--gs-surface);
-}
-.fbHeader {
-  flex: none;
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 4px 8px 0;
-  border-bottom: 1px solid var(--gs-border);
-}
-.fbPath {
-  font-size: var(--gs-t-meta);
-  color: var(--gs-fg-dim);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding: 4px 0;
-}
-/* The editor scrolls inside this, so the header and the notices above stay
-   put — the same reason the side pane's toolbar is pinned. */
-.fbBody { flex: 1 1 0; min-height: 0; overflow: auto; padding: 4px 8px; }
-
-/* The commit behind the picked blame line. A strip rather than a floating
-   popup: it never covers the code it is about, and it survives a scroll. */
-.fbCommit {
-  flex: none;
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  padding: 4px 8px;
-  font-size: var(--gs-t-meta);
-  color: var(--gs-fg-dim);
-  background: var(--gs-surface-2);
-  border-bottom: 1px solid var(--gs-border);
-}
-.fbCommitLine { flex: none; color: var(--gs-fg-faint); font-variant-numeric: tabular-nums; }
-.fbCommitWho { flex: none; color: var(--gs-fg); font-weight: 600; }
-.fbCommitWhen { flex: none; font-variant-numeric: tabular-nums; }
-.fbCommitHash { flex: none; font-family: inherit; color: var(--gs-fg-faint); }
-.fbCommitWhat {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--gs-fg);
-}
-.fbCommitHint { color: var(--gs-fg-faint); }
-.fbMore {
-  display: block;
-  padding: 2px 6px 4px 4px;
-  font-size: var(--gs-t-meta);
-  color: var(--gs-fg-faint);
-  font-style: italic;
-}
-
-/* ============================ image preview ============================= */
-
-/* A picture fills the pane and its facts sit under it, because the facts are
-   the reason this is a viewer rather than an image tag: a screenshot in a
-   repository is usually opened to check a size or a crop. */
-.imgPane {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  height: 100%;
-  gap: 8px;
-}
-
-/* The checkerboard is not decoration. A transparent PNG on a flat background
-   is indistinguishable from an opaque one of that colour, and "is this
-   transparent" is the question the file was opened to answer. Two overlaid
-   gradients rather than an asset: no request, and it takes the theme. */
-.imgStage {
-  flex: 1 1 auto;
-  min-height: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: auto;
-  padding: 12px;
-  border-radius: var(--gs-r-control);
-  background-color: var(--gs-surface-2);
-  background-image:
-    linear-gradient(45deg, var(--gs-border-soft) 25%, transparent 25%, transparent 75%, var(--gs-border-soft) 75%),
-    linear-gradient(45deg, var(--gs-border-soft) 25%, transparent 25%, transparent 75%, var(--gs-border-soft) 75%);
-  background-size: 16px 16px;
-  background-position: 0 0, 8px 8px;
-}
-
-/* Fit is the default: an 8000px render opened at full size shows its top-left
-   corner, which looks like a broken image rather than a big one. */
-.imgShot {
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
-  /* Nearest-neighbour would be right for icons and wrong for photographs, and
-     the pane cannot tell them apart; smooth is the safe half of that trade. */
-  image-rendering: auto;
-}
-
-/* Actual size: the scaling comes off and the stage scrolls instead. Written
-   as a descendant of the stage's own state so the picture keeps ONE class,
-   and the two views cannot disagree about which is in force. */
-.imgStage[data-actual] {
-  align-items: flex-start;
-  justify-content: flex-start;
-}
-.imgStage[data-actual] .imgShot {
-  max-width: none;
-  max-height: none;
-  object-fit: none;
-}
-
-.imgCaption {
-  flex: none;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: var(--gs-t-meta);
-  color: var(--gs-fg-dim);
-  font-variant-numeric: tabular-nums;
-}
+@import './styles/environment.css';
+@import './styles/themes.css';
+@import './styles/shell.css';
+@import './styles/history-filters.css';
+@import './styles/history.css';
+@import './styles/changes.css';
+@import './styles/operations.css';
+@import './styles/controls.css';
+@import './styles/files.css';
+@import './styles/image.css';