refactor(css): split style.css into ordered fragments

static/style.css was 47,530 lines. It is now nine files under static/css/:
tokens.css holds the :root custom properties, light theme and density classes,
and style-part-01..08 carry the rest in their original order. Nothing was
rewritten; every line moved verbatim and the <link> order in index.html
reproduces the original file byte for byte.

Cut points are brace-depth zero and outside block comments, so no rule or
comment is split. All 47,531 source lines are accounted for across the
fragments.

The computed-style baseline recorded before the split is reproduced exactly,
which is the evidence that the cascade is unchanged rather than an argument
that it should be.

Three things the split broke and this fixes:

- The harness self-test swapped two conflicting .attach-strip blocks inside
  style.css to prove the digest is order-sensitive. It rewrote one hardcoded
  URL, so with the file gone it silently measured an unmodified page. It now
  searches every stylesheet, rewrites whichever holds the pair, and fails
  loudly if none does.
- Four tests asserted the cache-bust token by matching /static/style.css?v=.
  They check the real invariant now, that every app stylesheet shares one
  token with app.js, through stylesheet_cache_version().
- The three panel stylesheets carried their own tokens, so a browser could
  hold half an old cascade and half a new one. All app stylesheets now bust
  together.

static/app.js

@@ -37,7 +37,7 @@ import { UI_VIS_DEFAULT_OFF, resolveVisibility } from './js/ui_visibility.js?v=2
 import tasksModule from './js/tasks.js?v=20260914taskmodel1';
 import calendarModule from './js/calendar.js?v=20260914emailsource11';
 import notesModule from './js/notes.js?v=20260911notesselectioncancel1';
-import adminModule from './js/admin.js?v=20260921chatgptusage2';
+import adminModule from './js/admin.js?v=20260929csssplit';
 import settingsModule from './js/settings.js?v=20260912writingstyle3';
 // Eagerly bind unified minimize/restore behavior across all tool modals.
 import './js/modalManager.js';

static/css/tokens.css

@@ -0,0 +1,178 @@
+/* Fragment 1/9 of the former static/style.css.
+ *
+ * This is a mechanical, order-preserving slice: rules were moved verbatim
+ * and this file's position in the <link> order of static/index.html is what
+ * keeps the cascade identical. Reordering the links, or moving a rule between
+ * fragments, can change which of two competing declarations wins.
+ *
+ * static/index.html and the PRECACHE list in static/sw.js must list every
+ * fragment in the same order. tests/test_static_stylesheet_manifest.py and
+ * tests/test_css_computed_style_snapshot.py both fail if that drifts.
+ */
+/* ============================================ */
+/* Odysseus UI — Consolidated Stylesheet        */
+/* ============================================ */
+
+
+/* ── Variables ──
+ *
+ * Theme-public variables (override via theme.js or custom themes):
+ *   Core:     --bg, --fg, --panel, --border, --red
+ *   Syntax:   --hl-keyword, --hl-string, --hl-comment, --hl-function,
+ *             --hl-number, --hl-builtin, --hl-variable, --hl-params,
+ *             --hl-bg, --hl-fg
+ *   Accents:  --accent-primary, --accent-error (set by theme.js)
+ *   Semantic: --color-error, --color-success, --color-warning, --color-danger,
+ *             --color-accent, --color-muted, --color-muted-alt
+ */
+
+:root {
+  /* Core palette */
+  --bg: #282c34;
+  --fg: #9cdef2;
+  --panel: #111;
+  --border: #355a66;
+  --red: #e06c75;
+  /* Were `var(--green)` / `var(--warn)` — self-referential, so they
+     resolved to invalid and every site fell back to its own literal
+     (or, for sites with no fallback, painted as transparent/inherit).
+     Anchor them to real hex so the token layer actually works. */
+  --green: #50fa7b;
+  --warn: #f0ad4e;
+
+  /* Syntax highlighting */
+  --hl-bg: #1e2228;
+  --hl-fg: #9cdef2;
+  --hl-keyword: #c678dd;
+  --hl-string: #e5c07b;
+  --hl-comment: #828997;
+  --hl-function: #61afef;
+  --hl-number: #d19a66;
+  --hl-builtin: #56b6c2;
+  --hl-variable: #abb2bf;
+  --hl-params: #a8c0d4;
+
+  /* Semantic colors */
+  --color-error: #ff4444;
+  --color-error-light: #ff6666;
+  --color-success: #4caf50;
+  --color-warning: #f0ad4e;
+  --color-danger: #c0392b;
+  --color-recording: #ff3b30;
+  --color-recording-hover: #d63031;
+  --color-muted: #888;
+  --color-muted-alt: #6b7280;
+  --color-accent: #00aaff;
+  --color-agent-active: #00ff00;
+  --color-brand-blue: #3b82f6;
+  --color-blind-orange: #ff9800;
+  --color-save-green: var(--color-success);
+  --color-link-hover: #66c7ff;
+  --color-subheader: #6b8a94;
+  --select-bg: var(--bg);
+  --select-fg: var(--fg);
+  --select-option-bg: color-mix(in srgb, var(--panel) 74%, var(--bg));
+  --select-option-fg: var(--fg);
+  --select-option-active-bg: color-mix(in srgb, var(--accent, var(--red)) 24%, var(--panel));
+  /* Warm accent — used by the Goals/Today UI in Notes. Lives as a token so
+     themes can override without touching the goal CSS. */
+  --accent-warm: #d19a66;
+}
+
+:root.light {
+  --bg: #f5f5f5;
+  --fg: #2b2b2b;
+  --panel: #fff;
+  --border: #bbb;
+  --hl-bg: #f9f9f9;
+  --hl-fg: #2b2b2b;
+  --hl-keyword: #7928a1;
+  --hl-string: #986801;
+  --hl-comment: #6a737d;
+  --hl-function: #005cc5;
+  --hl-number: #986801;
+  --hl-builtin: #0070a0;
+  --hl-variable: #383a42;
+  --hl-params: #4a4f5c;
+  --select-bg: #eaeaea;
+  --select-fg: var(--fg);
+  --select-option-bg: var(--panel);
+  --select-option-fg: var(--fg);
+  --select-option-active-bg: color-mix(in srgb, var(--red) 16%, var(--panel));
+}
+
+/* ── Reset & Base ── */
+
+* { box-sizing: border-box; }
+html, body { overflow-x: hidden; height: 100%; margin: 0; overscroll-behavior: none; }
+body {
+  background-color: var(--bg);
+  color: var(--fg);
+  /* Keep the base padding transition for older layout paths that still adjust
+     the body directly. Edge docks reserve workspace room on the flex panes
+     below so left + right docks can coexist without skewing the whole body. */
+  transition: padding-left 160ms cubic-bezier(0.22, 0.61, 0.36, 1),
+              padding-right 160ms cubic-bezier(0.22, 0.61, 0.36, 1);
+  font-family: var(--font-family, 'Fira Code', monospace);
+  display: flex;
+  height: 100%;
+  height: 100dvh; /* dynamic viewport height — adapts when mobile keyboard opens */
+  overflow: hidden;
+}
+
+/* Self-hosted Fira Code font */
+@font-face { font-family: 'Fira Code'; font-weight: 300; font-style: normal; font-display: swap; src: url('/static/fonts/FiraCode-Light.woff2') format('woff2'); }
+@font-face { font-family: 'Fira Code'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/FiraCode-Regular.woff2') format('woff2'); }
+@font-face { font-family: 'Fira Code'; font-weight: 600; font-style: normal; font-display: swap; src: url('/static/fonts/FiraCode-SemiBold.woff2') format('woff2'); }
+
+/* GohuFont is the default UI face across themes; keep the shipped font local
+   so the default is available before custom-font discovery completes. */
+@font-face { font-family: 'GohuFont'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/custom/GohuFont.ttf') format('truetype'); }
+
+/* Self-hosted OpenDyslexic — dyslexia-friendly accessibility font option (SIL OFL 1.1) */
+@font-face { font-family: 'OpenDyslexic'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/OpenDyslexic-Regular.woff2') format('woff2'); }
+@font-face { font-family: 'OpenDyslexic'; font-weight: 700; font-style: normal; font-display: swap; src: url('/static/fonts/OpenDyslexic-Bold.woff2') format('woff2'); }
+
+/* Code block baseline */
+pre, code, .hljs {
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+/* Scrollbar styling */
+@supports selector(::-webkit-scrollbar) {
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  ::-webkit-scrollbar-track {
+    background: var(--panel);
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--red);
+    border-radius: 4px;
+    border: 2px solid var(--panel);
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: color-mix(in srgb, var(--red) 80%, white);
+  }
+}
+
+html {
+  scrollbar-color: var(--red) var(--panel);
+  scrollbar-width: thin;
+}
+
+/* Utility */
+.red-text { color: var(--red); }
+
+/* ── Density Overrides ── */
+
+:root.density-compact { font-size: 13px; }
+:root.density-compact .msg { padding: 6px 10px; margin-bottom: 4px; }
+:root.density-compact .list-item { padding: 4px 8px; }
+:root.density-compact .sidebar .section { padding: 0; }
+:root.density-spacious { font-size: 16px; }
+:root.density-spacious .msg { padding: 14px 18px; margin-bottom: 12px; }
+:root.density-spacious .list-item { padding: 8px 12px; }
+:root.density-spacious .sidebar .section { padding: 0; }

static/index.html

@@ -246,15 +246,23 @@
        real request is discarded and the font fetched a second time. -->
   <link rel="preload" as="font" type="font/woff2" crossorigin href="/static/fonts/FiraCode-Regular.woff2">
   <link rel="preload" as="font" type="font/woff2" crossorigin href="/static/fonts/FiraCode-SemiBold.woff2">
-  <link rel="stylesheet" href="/static/style.css?v=20260921chatgptusage2">
+  <link rel="stylesheet" href="/static/css/tokens.css?v=20260929csssplit">
+  <link rel="stylesheet" href="/static/css/style-part-01.css?v=20260929csssplit">
+  <link rel="stylesheet" href="/static/css/style-part-02.css?v=20260929csssplit">
+  <link rel="stylesheet" href="/static/css/style-part-03.css?v=20260929csssplit">
+  <link rel="stylesheet" href="/static/css/style-part-04.css?v=20260929csssplit">
+  <link rel="stylesheet" href="/static/css/style-part-05.css?v=20260929csssplit">
+  <link rel="stylesheet" href="/static/css/style-part-06.css?v=20260929csssplit">
+  <link rel="stylesheet" href="/static/css/style-part-07.css?v=20260929csssplit">
+  <link rel="stylesheet" href="/static/css/style-part-08.css?v=20260929csssplit">
   <!-- Panel stylesheets split out of style.css for maintainability. They are
        eager and their order is load-bearing: the cascade is the concatenation of
        these files in this order, so they must stay in this order here and in the
        PRECACHE list in sw.js. None of them is lazy-loaded. -->
-  <link rel="stylesheet" href="/static/css/documents-gallery-editor.css?v=20260923csssplit1">
-  <link rel="stylesheet" href="/static/css/email-calendar-notes-tasks.css?v=20260923csssplit2">
-  <link rel="stylesheet" href="/static/css/cookbook-research-memory-settings.css?v=20260923csssplit3">
-  <link rel="modulepreload" href="/static/app.js?v=20260921chatgptusage2">
+  <link rel="stylesheet" href="/static/css/documents-gallery-editor.css?v=20260929csssplit">
+  <link rel="stylesheet" href="/static/css/email-calendar-notes-tasks.css?v=20260929csssplit">
+  <link rel="stylesheet" href="/static/css/cookbook-research-memory-settings.css?v=20260929csssplit">
+  <link rel="modulepreload" href="/static/app.js?v=20260929csssplit">
 <link rel="modulepreload" href="/static/js/chat.js?v=20260917toolttft1">
   <link rel="modulepreload" href="/static/js/ui.js?v=20260916largetoolscroll1">
   <link rel="modulepreload" href="/static/js/sessions.js">
@@ -2639,7 +2647,7 @@
 <script type="module" src="/static/js/censor.js"></script>
 <script type="module" src="/static/js/settings.js?v=20260912writingstyle3"></script>
 <script type="module" src="/static/js/assistant.js?v=20260912firefoxjscleanup1"></script>
-<script type="module" src="/static/app.js?v=20260921chatgptusage2"></script>  <!-- app.js must be LAST -->
+<script type="module" src="/static/app.js?v=20260929csssplit"></script>  <!-- app.js must be LAST -->
   <script type="module" src="/static/js/init.js?v=20260829chatstyle12"></script>
 <script type="module" src="/static/js/a11y.js"></script>
 <script nonce="{{CSP_NONCE}}">if('serviceWorker' in navigator){navigator.serviceWorker.register('/static/sw.js?v=20260916autoscroll1').catch(()=>{});}</script>

static/sw.js

@@ -39,11 +39,19 @@ const KATEX_FONTS = [
 // exact URL the browser requests, query string included.
 const PRECACHE = [
   '/',
-  '/static/style.css?v=20260921chatgptusage2',
-  '/static/css/documents-gallery-editor.css?v=20260923csssplit1',
-  '/static/css/email-calendar-notes-tasks.css?v=20260923csssplit2',
-  '/static/css/cookbook-research-memory-settings.css?v=20260923csssplit3',
-  '/static/app.js?v=20260921chatgptusage2',
+  '/static/css/tokens.css?v=20260929csssplit',
+  '/static/css/style-part-01.css?v=20260929csssplit',
+  '/static/css/style-part-02.css?v=20260929csssplit',
+  '/static/css/style-part-03.css?v=20260929csssplit',
+  '/static/css/style-part-04.css?v=20260929csssplit',
+  '/static/css/style-part-05.css?v=20260929csssplit',
+  '/static/css/style-part-06.css?v=20260929csssplit',
+  '/static/css/style-part-07.css?v=20260929csssplit',
+  '/static/css/style-part-08.css?v=20260929csssplit',
+  '/static/css/documents-gallery-editor.css?v=20260929csssplit',
+  '/static/css/email-calendar-notes-tasks.css?v=20260929csssplit',
+  '/static/css/cookbook-research-memory-settings.css?v=20260929csssplit',
+  '/static/app.js?v=20260929csssplit',
   '/static/js/storage.js',
   '/static/js/appConfig.js',
   '/static/js/ui.js?v=20260916largetoolscroll1',
@@ -78,7 +86,7 @@ const PRECACHE = [
   '/static/js/theme.js?v=20260911organsrain1',
   '/static/js/censor.js',
   '/static/js/settings.js?v=20260912writingstyle3',
-  '/static/js/admin.js?v=20260921chatgptusage2',
+  '/static/js/admin.js?v=20260929csssplit',
   '/static/js/chatgptSubscriptionUsage.js',
   '/static/js/init.js?v=20260829chatstyle12',
   '/static/js/slashCommands.js?v=20260921chatgptusage1',

tests/css_snapshot/capture.mjs

@@ -55,7 +55,10 @@ function swapRuleOccurrences(css, selector) {
   }
   const matches = blocks.filter(b => b.selector === selector && b.end !== undefined);
   if (matches.length < 2) {
-    throw new Error(`swap-rule: need two top-level blocks for "${selector}", found ${matches.length}`);
+    // The selector is not in this sheet, or appears once. The stylesheet is
+    // split across several files, so that is expected for most of them: the
+    // caller decides whether any sheet matched at all.
+    return null;
   }
   const [a, b] = matches;
   const textA = css.slice(a.start, a.end);
@@ -186,6 +189,7 @@ async function main() {
   const missing = {};
 
   try {
+    let swapped = 0;
     for (const page of job.pages) {
       snapshot[page.name] = {};
       let shippedStylesheets = null;
@@ -217,9 +221,23 @@ async function main() {
         });
 
         if (job.swapRule) {
+          // The cascade is spread over several files, so find the one that
+          // actually holds two top-level blocks of the selector and rewrite
+          // only that one. Every other sheet passes through untouched.
+          await tab.route('**/static/**/*.css*', async route => {
+            const response = await route.fetch();
+            const original = await response.text();
+            const body = swapRuleOccurrences(original, job.swapRule);
+            if (body === null) return route.fulfill({ response, body: original });
+            swapped += 1;
+            await route.fulfill({ response, body, headers: { ...response.headers(), 'content-type': 'text/css; charset=utf-8' } });
+          });
           await tab.route('**/static/style.css*', async route => {
             const response = await route.fetch();
-            const body = swapRuleOccurrences(await response.text(), job.swapRule);
+            const original = await response.text();
+            const body = swapRuleOccurrences(original, job.swapRule);
+            if (body === null) return route.fulfill({ response, body: original });
+            swapped += 1;
             await route.fulfill({ response, body, headers: { ...response.headers(), 'content-type': 'text/css; charset=utf-8' } });
           });
         }
@@ -253,6 +271,9 @@ async function main() {
         await context.close();
       }
     }
+    if (job.swapRule && swapped === 0) {
+      throw new Error(`swap-rule: no stylesheet had two top-level blocks for "${job.swapRule}"`);
+    }
   } finally {
     await browser.close();
   }

tests/helpers/stylesheets.py

@@ -61,3 +61,25 @@ def stylesheet_link_tags() -> str:
 def app_css() -> str:
     """The whole cascade as one string, in load order."""
     return "\n".join(p.read_text(encoding="utf-8") for p in stylesheet_paths())
+
+
+def stylesheet_cache_version() -> str:
+    """The single ``?v=`` token every app stylesheet link carries.
+
+    The stylesheet is split across several files that must be busted together:
+    shipping one fragment under a stale token serves a browser half of an old
+    cascade and half of a new one. Tests that used to read the version off
+    ``style.css`` ask for it here instead, so they keep checking the invariant
+    rather than a filename.
+    """
+    versions = set()
+    for url in stylesheet_urls():
+        m = re.search(r"\?v=([^&]+)$", url)
+        if not m:
+            raise AssertionError(f"app stylesheet has no cache-bust token: {url}")
+        versions.add(m.group(1))
+    if len(versions) != 1:
+        raise AssertionError(
+            f"app stylesheets disagree on their cache-bust token: {sorted(versions)}"
+        )
+    return versions.pop()

tests/test_compare_shuffle_visual_static.py

@@ -1,6 +1,6 @@
 from pathlib import Path
 import re
-from tests.helpers.stylesheets import app_css
+from tests.helpers.stylesheets import app_css, stylesheet_cache_version
 
 
 ROOT = Path(__file__).resolve().parent.parent
@@ -65,9 +65,8 @@ def test_compare_cache_key_bumped_for_shuffle_notice():
     index = _read("static/js/compare/index.js")
 
     app_versions = re.findall(r"/static/app\.js\?v=([A-Za-z0-9_-]+)", html)
-    style_version = re.search(r"/static/style\.css\?v=([A-Za-z0-9_-]+)", html)
     assert app_versions and len(set(app_versions)) == 1
-    assert style_version and style_version.group(1) == app_versions[0]
+    assert stylesheet_cache_version() == app_versions[0]
     assert re.search(r"compare/index\.js\?v=[A-Za-z0-9_-]+", app)
     assert re.search(r"vote\.js\?v=[A-Za-z0-9_-]+", index)
     assert re.search(r"panes\.js\?v=[A-Za-z0-9_-]+", index)

tests/test_gallery_visual_static.py

@@ -1,7 +1,7 @@
 from pathlib import Path
 import re
 
-from tests.helpers.stylesheets import app_css
+from tests.helpers.stylesheets import app_css, stylesheet_cache_version
 
 
 ROOT = Path(__file__).resolve().parent.parent
@@ -49,7 +49,7 @@ def test_gallery_static_cache_key_bumped():
     app = _read("static/app.js")
     service_worker = _read("static/sw.js")
 
-    assert re.search(r"/static/style\.css\?v=[A-Za-z0-9_-]+", html)
+    assert stylesheet_cache_version()
     html_version = re.search(r"/static/js/gallery\.js\?v=([A-Za-z0-9_-]+)", html)
     app_version = re.search(r"gallery\.js\?v=([A-Za-z0-9_-]+)", app)
     sw_version = re.search(r"/static/js/gallery\.js\?v=([A-Za-z0-9_-]+)", service_worker)

tests/test_notes_mobile_checklist_toggle_static.py

@@ -1,7 +1,7 @@
 from pathlib import Path
 import re
 
-from tests.helpers.stylesheets import app_css
+from tests.helpers.stylesheets import app_css, stylesheet_cache_version
 
 
 ROOT = Path(__file__).resolve().parent.parent
@@ -54,9 +54,8 @@ def test_notes_mobile_checklist_asset_versions_are_bumped():
 
     assert re.search(r"notes\.js\?v=[A-Za-z0-9_-]+", app)
     app_versions = re.findall(r"/static/app\.js\?v=([A-Za-z0-9_-]+)", html)
-    style_version = re.search(r"/static/style\.css\?v=([A-Za-z0-9_-]+)", html)
     assert app_versions and len(set(app_versions)) == 1
-    assert style_version and style_version.group(1) == app_versions[0]
+    assert stylesheet_cache_version() == app_versions[0]
 
 
 def test_drawing_edits_mark_notes_dirty_and_keep_one_gallery_image():

tests/test_research_history_expansion.py

@@ -3,7 +3,7 @@
 from pathlib import Path
 import re
 
-from tests.helpers.stylesheets import app_css
+from tests.helpers.stylesheets import app_css, stylesheet_cache_version
 
 
 ROOT = Path(__file__).resolve().parent.parent
@@ -78,6 +78,5 @@ def test_research_panel_uses_one_versioned_module_instance():
 
     panel_version = re.search(r"research/panel\.js\?v=([^'\"]+)", app)
     asset_version = re.search(r"/static/app\.js\?v=([^'\"]+)", index)
-    style_version = re.search(r"/static/style\.css\?v=([^'\"]+)", index)
     assert panel_version and renderer.count(f"research/panel.js?v={panel_version.group(1)}") == 2
-    assert asset_version and style_version and asset_version.group(1) == style_version.group(1)
+    assert asset_version and asset_version.group(1) == stylesheet_cache_version()