refactor: split resource diagnostics styles

CHANGELOG.md

@@ -8,6 +8,8 @@ Follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) · versioned wi
 ## [Unreleased]
 
 ### Changed
+- **Resource diagnostics stylesheet split.** Performance-panel styles now live in `static/css/resource-diagnostics.css`
+  and are loaded with the same release cache-busting version as the core stylesheet.
 - **Audiobook cast export extraction.** Markdown serialization and legacy page-stamping migration now live in
   `audiobook-cast.js`, leaving the live casting workflow in `audiobook.js` and preserving the same global helpers.
 - **Rehearser training extraction.** Transcript normalization, LCS matching, and word-level comparison now live in

TODO.md

@@ -136,6 +136,7 @@ architecture change: the larger Audiobook/Rehearser/style split.
 - [ ] Extract Audiobook parsing and casting.
 - [x] Extract Audiobook parsing primitives and speaker-heuristic constants into `audiobook-parse.js`.
 - [x] Extract Audiobook cast serialization and page-stamping helpers into `audiobook-cast.js`.
+- [x] Split the Performance/resource diagnostic styles into `static/css/resource-diagnostics.css`.
 - [ ] Split `style.css` by feature.
 - [ ] Do not migrate to TypeScript or rewrite the frontend until behavior is covered by tests.
 

VERSION

@@ -1 +1 @@
-1.24.33
+1.24.34

docs/ARCHITECTURE.md

@@ -36,6 +36,7 @@ Done incrementally as global-scope ordered files (no ES-module change needed)
 - ✅ `rehearser-cast.js` — cast view, sort/filter state handlers, and cast toolbar wiring; card rendering remains in `rehearser.js`.
 - ✅ `audiobook-parse.js` — dialogue detection, dehyphenation, and speaker-heuristic constants; the casting pipeline remains in `audiobook.js`.
 - ✅ `audiobook-cast.js` — cast Markdown export and legacy page-stamping migration helpers; live casting remains in `audiobook.js`.
+- ✅ `static/css/resource-diagnostics.css` — isolated Performance/resource diagnostic panel styles.
 - ✅ `rehearser-train.js` — transcript normalization, LCS comparison, and word-level training feedback; microphone/state wiring remains in `rehearser.js`.
 - ✅ `rehearser-library.js` — SQLite persistence helpers and IndexedDB migration; import/export and auto-save remain
   in `rehearser.js` until their UI/event-handler dependencies are isolated.

static/css/resource-diagnostics.css

@@ -0,0 +1,6 @@
+/* ── Performance/resource diagnostics ─────────────────────────────────────── */
+.resource-diagnostics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
+.resource-diagnostic-item { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); }
+.resource-diagnostic-item span { color: var(--subtext); font-size: 11px; }
+.resource-diagnostic-item strong { font-size: 14px; }
+.resource-diagnostic-subhead { grid-column: 1 / -1; margin-top: 8px; color: var(--subtext); font-size: 12px; font-weight: 700; }

static/index.html

@@ -10,7 +10,7 @@
   <meta name="format-detection" content="telephone=no">
   <meta name="color-scheme" content="light dark">
   <meta name="theme-color" content="#2563EB">
-  <meta name="app-version" content="1.24.33">
+  <meta name="app-version" content="1.24.34">
   <link rel="manifest" href="/manifest.webmanifest">
   <link rel="icon" href="/static/icon.svg" type="image/svg+xml">
   <link rel="apple-touch-icon" href="/static/icon.svg">
@@ -27,7 +27,8 @@
 
   <!-- ── Core styles (local — no CDN dependency for first paint) ────────── -->
   <link rel="stylesheet" href="/static/vendor/mdi/materialdesignicons.min.css">
-  <link rel="stylesheet" href="/static/style.css?v=1.24.33">
+  <link rel="stylesheet" href="/static/style.css?v=1.24.34">
+  <link rel="stylesheet" href="/static/css/resource-diagnostics.css?v=1.24.34">
 
 
   <!-- ── Flag icons — non-blocking (loaded async, icons appear after JS) ── -->
@@ -392,7 +393,7 @@ window.toggleNavTree = function(treeId, chevronId) {
 </script>
 
 <!-- loader.js: fetches sections → loads JS modules → removes skeleton -->
-<script src="/static/loader.js?v=1.24.33"></script>
+<script src="/static/loader.js?v=1.24.34"></script>
 
 </body>
 </html>

static/style.css

@@ -3742,11 +3742,6 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
 .background-job-main code { color: var(--subtext); font-size: 10px; }
 .background-job-detail, .background-job-meta { grid-column: 1 / -1; color: var(--subtext); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .background-job-artifact { grid-column: 1 / -1; color: var(--accent); font-size: 11px; }
-.resource-diagnostics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
-.resource-diagnostic-item { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); }
-.resource-diagnostic-item span { color: var(--subtext); font-size: 11px; }
-.resource-diagnostic-item strong { font-size: 14px; }
-.resource-diagnostic-subhead { grid-column: 1 / -1; margin-top: 8px; color: var(--subtext); font-size: 12px; font-weight: 700; }
 .background-job-row.is-error .background-job-detail { color: var(--red); }
 .background-job-row.is-done .background-job-meta { color: var(--green, #22c55e); }
 .background-job-actions { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }