KeepSoftwareSimple
diff --git a/‎.cursorrules/README.md‎
Lines changed: 2 additions & 2 deletions b/‎.cursorrules/README.md‎
Lines changed: 2 additions & 2 deletions
diff --git a/‎.cursorrules/styling.md‎
Lines changed: 39 additions & 3 deletions b/‎.cursorrules/styling.md‎
Lines changed: 39 additions & 3 deletions
diff --git a/‎.github/ISSUE_TEMPLATE/1-feature-request.yml‎
Lines changed: 0 additions & 1 deletion b/‎.github/ISSUE_TEMPLATE/1-feature-request.yml‎
Lines changed: 0 additions & 1 deletion
diff --git a/‎.github/ISSUE_TEMPLATE/2-bug-report.yml‎
Lines changed: 1 addition & 2 deletions b/‎.github/ISSUE_TEMPLATE/2-bug-report.yml‎
Lines changed: 1 addition & 2 deletions
diff --git a/‎CONTEXT.md‎
Lines changed: 1 addition & 1 deletion b/‎CONTEXT.md‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎babel.config.js‎
Lines changed: 0 additions & 9 deletions b/‎babel.config.js‎
Lines changed: 0 additions & 9 deletions
@@ -11,7 +11,7 @@ You are an expert full-stack developer working on Compass, a calendar applicatio
 
 This is a monorepo using Bun workspaces with the following packages:
 
-- `@compass/web` - React/TypeScript frontend with Redux, styled-components, webpack
+- `@compass/web` - React/TypeScript frontend with Redux, Tailwind CSS
 - `@compass/backend` - Express.js REST API with MongoDB, Google Calendar sync, WebSocket support
 - `@compass/core` - Shared utilities, types, and business logic
 - `@compass/scripts` - CLI tools for building, database operations, user management
@@ -42,7 +42,7 @@ This directory contains focused rules for different aspects of development:
 ```
 packages/
 ├── backend/src/     # Express.js API, MongoDB, Google Calendar sync
-├── web/src/         # React frontend, Redux state, styled-components
+├── web/src/         # React frontend, Redux state, Tailwind CSS
 ├── core/src/        # Shared utilities, types, business logic
 └── scripts/src/     # CLI tools for builds and operations
 ```
 
@@ -60,9 +60,45 @@ The pattern is: CSS variable `--color-{category}-{name}` → Tailwind class `{ca
 
 ### Styling Approach
 
-- Use Tailwind utility classes directly in JSX
-- For complex styles, use styled-components (already configured)
-- Follow existing patterns in `packages/web/src/components/`
+Use a hybrid of inline utilities and `c-*` recipes. **Inline is the default.**
+
+The deciding question for extracting a `c-*` recipe is *"can this be expressed
+inline at all?"* — **not** "is it long?" or "is it used twice?". Reach for a
+`c-*` recipe (Tailwind v4 `@utility c-...` in `packages/web/src/index.css`) only
+when inline utilities genuinely cannot do the job, i.e. it has any of:
+
+1. **Third-party descendant selectors** you don't control — `.react-datepicker__*`,
+   `.timepicker__*` (e.g. `c-date-picker`, `c-time-picker`).
+2. **Pseudo-elements / vendor scrollbars** — `::before`, `::after`,
+   `::-webkit-scrollbar` (e.g. `compass-scroll`). Prefer the Tailwind `before:` /
+   `after:` variants inline first; only extract if that gets unreadable.
+3. **Keyframe-driven animation bundles** (e.g. `c-loader-spinner`).
+4. **Genuine reuse** across components, or a coherent variant set
+   (e.g. `c-button*`, `c-event-form`).
+
+Otherwise, **inline it**:
+
+- **Inline Tailwind utilities** for one-off layout and state, in JSX directly
+  (e.g. `className="mb-2.5 items-center justify-end gap-[30px]"`). Use `data-[…]:`
+  and `hover:` variants instead of `&[data-…]`/`&:hover` recipe blocks. Arbitrary
+  values are fine for runtime vars: `grid-cols-[repeat(7,minmax(80px,1fr))]`,
+  `w-[calc(100%_-_50px)]`.
+- If a recipe exists only to reach into children via `& .child` / `& > *`, put
+  the utilities **on the child elements** instead and delete the descendant rule.
+- **Do not** create one-off `c-*` recipes named after their implementation
+  (`c-week-columns`, `c-calendar-grid-rows`); that just recreates a global CSS
+  layer. Inline them.
+- **Semantic CSS-variable tokens** for all theme-dependent colors (see above),
+  so a future `[data-theme="light"]` rollout needs no component changes.
+- **Inline CSS custom properties** only for runtime values that cannot be known
+  at build time — event colors, positions, dynamic grid counts (e.g.
+  `style={{ "--event-form-bg": color }}`).
+
+Follow existing patterns in `packages/web/src/components/` and the recipes in
+`packages/web/src/index.css`.
+
+Preserve semantic attributes (`role`, `aria-*`, `title`) when restyling — they
+are load-bearing for assistive tech and e2e selectors, not presentation.
 
 ## Module Imports
 
 
@@ -1,7 +1,6 @@
 name: Feature Request
 description: You want something added to the app
 labels: [enhancement]
-projects: [SwitchbackTech/4]
 
 body:
   - type: markdown
 
@@ -1,7 +1,6 @@
 name: Bug Report
 description: You found something wrong
-labels: [ bug ]
-projects: [ SwitchbackTech/4 ]
+labels: [bug]
 type: bug
 
 body:
 
@@ -271,7 +271,7 @@ during Import or Public watch notification handling.
 - Treat recurring event changes as changes to a **Recurring Series**, not just
   isolated event rows.
 - Do not use **Someday Event** and **Task** interchangeably.
-- Do not describe the frontend as Tailwind-only or styled-components-only.
+- Frontend styling uses Tailwind utilities and semantic runtime CSS variables.
 - Do not describe local self-hosting as proving continuous Google sync unless a
   public HTTPS webhook path has been configured and verified.
 - When changing a shared event, sync, API, or error contract, keep the web,
 
@@ -4,13 +4,4 @@ module.exports = {
     ["@babel/preset-env", { targets: { node: "current" } }],
     "@babel/preset-typescript",
   ],
-  plugins: [
-    [
-      "babel-plugin-styled-components",
-      {
-        meaninglessFileNames: ["index", "styled"],
-        pure: true,
-      },
-    ],
-  ],
 };