refactor(css): modularize styles into common, dashboard, games and add purgecss (#433)

package.json

@@ -38,6 +38,7 @@
     "@axe-core/playwright": "^4.12.1",
     "@axe-core/react": "^4.12.1",
     "@eslint/js": "^9.39.5",
+    "@fullhuman/postcss-purgecss": "^8.0.0",
     "@playwright/test": "^1.61.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",

postcss.config.js

@@ -0,0 +1,30 @@
+import purgecss from "@fullhuman/postcss-purgecss";
+
+export default {
+  plugins: [
+    ...(process.env.NODE_ENV === "production"
+      ? [
+          purgecss({
+            content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
+            defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
+            safelist: {
+              standard: [
+                /^leaflet-/,
+                /^recharts-/,
+                /^theme-/,
+                // Classes composed dynamically in JSX (e.g. confidence-${level}, cols-${n})
+                /^confidence-/,
+                /^cols-/,
+                /^glossary-/,
+                /^sa-/,
+                /^priority-/,
+                /^difficulty-/,
+                /^hud-/,
+              ],
+              deep: [/^leaflet/, /^recharts/],
+            },
+          }),
+        ]
+      : []),
+  ],
+};

src/styles.css

@@ -1,14 +1,10 @@
-.selected-file-container {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
+@import "tailwindcss";
 
-.image-preview {
-  width: 80px;
-  height: 80px;
+/* Common & Base Tokens */
+@import "./styles/common.css";
 
-  object-fit: cover;
+/* Dashboard Layout & Widget Styles */
+@import "./styles/dashboard.css";
 
   border-radius: 8px;
 
@@ -10289,30 +10285,30 @@ a {
   padding: 1rem;
   max-width: 320px;
   z-index: 1000;
-}
-
-/* ── Calendar heatmap: days with no reading ──────────────────────────────
- * A day inside the range that the archive holds no reading for. Distinct from
- * .calendar-day.empty, which is structural padding outside the range entirely.
- * Hatched rather than flat so "no data" reads without relying on colour alone.
- *
- * Appended here rather than beside the other .calendar-day rules because those
- * are declared twice in this file (see #433) and the later block wins.
- */
-.calendar-day-nodata {
-  opacity: 0.55;
-  background-image: repeating-linear-gradient(
-    45deg,
-    rgba(255, 255, 255, 0.35) 0,
-    rgba(255, 255, 255, 0.35) 1px,
-    transparent 1px,
-    transparent 3px
-  );
-}
-
-.calendar-legend-coverage {
-  margin: 0.75rem 0 0;
-  font-size: 0.8rem;
-  color: var(--muted);
-  line-height: 1.5;
-}
+}
+
+/* ── Calendar heatmap: days with no reading ──────────────────────────────
+ * A day inside the range that the archive holds no reading for. Distinct from
+ * .calendar-day.empty, which is structural padding outside the range entirely.
+ * Hatched rather than flat so "no data" reads without relying on colour alone.
+ *
+ * Appended here rather than beside the other .calendar-day rules because those
+ * are declared twice in this file (see #433) and the later block wins.
+ */
+.calendar-day-nodata {
+  opacity: 0.55;
+  background-image: repeating-linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.35) 0,
+    rgba(255, 255, 255, 0.35) 1px,
+    transparent 1px,
+    transparent 3px
+  );
+}
+
+.calendar-legend-coverage {
+  margin: 0.75rem 0 0;
+  font-size: 0.8rem;
+  color: var(--muted);
+  line-height: 1.5;
+}