MAYBE: Automate Tailwind class ordering + tokenize sub-xs text sizes

.github/copilot-instructions.md

@@ -274,6 +274,7 @@ Follow the [Stimulus Handbook](https://stimulus.hotwired.dev/handbook/introducti
 
 ## PRs
 
+- **"Add prefix X" means prefix the PR title with `X`** — when the user says "add prefix" (e.g. "add prefix MAYBE:"), prepend that literal string to the current PR's title via `gh pr edit --title`, preserving the rest of the title. It always refers to the PR title, not a commit message or file content.
 - **Always create PRs as drafts** — every PR starts in draft (`gh pr create --draft`), no exceptions. Never open a PR ready for review, and never promote it. Only the user runs `gh pr ready`, manually and intentionally, when they decide the work is ready.
 - **Push to a draft PR early** — create the draft PR as soon as work begins, rather than keeping changes in a local branch. Push on every commit.
   - **In a new Conductor workspace, do this immediately** — as the first step of any task, make an initial commit on the workspace branch and open the draft PR right away (before the work is done), then keep pushing on every commit as you go. Don't wait until there's a finished change to show.

AGENTS.md

@@ -399,9 +399,12 @@ end
 
 ### Tailwind Theme
 
-Custom colors defined in `app/frontend/stylesheets/application.tailwind.css`:
+Custom tokens defined in the `@theme` block of `app/frontend/stylesheets/application.tailwind.css`:
 - `--color-primary: #063b8d` (dark blue)
 - Standard semantic colors: secondary, danger, warning, info, success
+- Sub-`xs` font sizes for dense UI: `text-2xs` (0.625rem) and `text-3xs` (0.55rem) — use these instead of arbitrary `text-[…px]` values
+
+Tailwind class order is sorted with rustywind via `ai/tw-sort` (Prettier's Tailwind plugin can't parse ERB). Prefer named theme tokens and static class literals over arbitrary/interpolated classes.
 
 ## Testing
 

CLAUDE.md

@@ -284,6 +284,7 @@ Follow the [Stimulus Handbook](https://stimulus.hotwired.dev/handbook/introducti
 
 ## PRs
 
+- **"Add prefix X" means prefix the PR title with `X`** — when the user says "add prefix" (e.g. "add prefix MAYBE:"), prepend that literal string to the current PR's title via `gh pr edit --title`, preserving the rest of the title. It always refers to the PR title, not a commit message or file content.
 - **Always create PRs as drafts** — every PR starts in draft (`gh pr create --draft`), no exceptions. Never open a PR ready for review, and never promote it. Only the user runs `gh pr ready`, manually and intentionally, when they decide the work is ready.
 - **Push to a draft PR early** — create the draft PR as soon as work begins, rather than keeping changes in a local branch. Push on every commit.
   - **In a new Conductor workspace, do this immediately** — as the first step of any task, make an initial commit on the workspace branch and open the draft PR right away (before the work is done), then keep pushing on every commit as you go. Don't wait until there's a finished change to show.
@@ -384,6 +385,7 @@ See `ai/` directory for executable scripts:
 | `ai/test_extra [args]` | Full RSpec run: Vite test build + all system specs |
 | `ai/lint` | Rubocop on all files |
 | `ai/lint --fix` | Auto-fix lint issues |
+| `ai/tw-sort` | Sort Tailwind class order (rustywind) on files changed vs main; `--all` for the whole tree, `--check` to verify without writing |
 | `ai/server` | Start dev services (web + vite) |
 | `ai/console` | Rails console |
 | `ai/routes -g pattern` | Search Rails routes |

ai/README.md

@@ -10,6 +10,7 @@ Quick-reference scripts for common development tasks. Designed for AI agents and
 | `ai/test_extra [args]` | Full RSpec run: Vite test build + all the headless-Chrome system specs `ai/test` narrows |
 | `ai/lint` | Rubocop on all files |
 | `ai/lint --fix` | Auto-fix lint issues |
+| `ai/tw-sort` | Sort Tailwind utility-class order with rustywind. Defaults to files changed vs `origin/main` (gradual convergence); `--all` sorts the whole tree, `--check` verifies without writing (non-zero exit if any file is unsorted) |
 | `ai/server` | Start all dev services (web + vite) |
 | `ai/console` | Rails console |
 | `ai/routes -g pattern` | Search Rails routes |

ai/tw-sort

@@ -0,0 +1,52 @@
+#!/usr/bin/env bash
+# Sort Tailwind utility classes into canonical order with rustywind.
+#
+# ERB is where nearly all our classes live, and Prettier (with
+# prettier-plugin-tailwindcss) can't parse ERB — so we use rustywind, which
+# reorders only the class-attribute tokens in place and leaves interpolations
+# (<%= ... %>) and the rest of the markup untouched.
+#
+# Usage:
+#   ai/tw-sort            Sort files changed vs origin/main (gradual convergence)
+#   ai/tw-sort --check    Check those files; non-zero exit if any need sorting
+#   ai/tw-sort --all      Sort the whole tree (app/views + app/frontend/javascript)
+#   ai/tw-sort --all --check
+set -euo pipefail
+source "$(dirname "$0")/.ruby-env"
+
+rustywind="$(dirname "$0")/../node_modules/.bin/rustywind"
+
+mode="write"
+scope="changed"
+for arg in "$@"; do
+  case "$arg" in
+    --check) mode="check" ;;
+    --all) scope="all" ;;
+    *) echo "unknown option: $arg" >&2; exit 2 ;;
+  esac
+done
+
+flag="--write"
+[[ "$mode" == "check" ]] && flag="--check-formatted"
+
+if [[ "$scope" == "all" ]]; then
+  exec "$rustywind" "$flag" app/views app/frontend/javascript
+fi
+
+# Changed files only: everything modified vs origin/main plus the working tree.
+files=()
+while IFS= read -r f; do
+  [[ -n "$f" && -f "$f" ]] && files+=("$f")
+done < <(
+  { git diff --name-only --diff-filter=ACMR origin/main...HEAD
+    git diff --name-only --diff-filter=ACMR
+    git diff --name-only --diff-filter=ACMR --cached
+  } | sort -u | grep -E '\.(erb|js)$' || true
+)
+
+if [[ ${#files[@]} -eq 0 ]]; then
+  echo "No changed .erb/.js files to sort."
+  exit 0
+fi
+
+exec "$rustywind" "$flag" "${files[@]}"

app/frontend/stylesheets/application.tailwind.css

@@ -17,6 +17,13 @@
   --color-success: var(--color-green-500);
   --color-transparent: transparent;
   --font-telefon: "Telefon Bold", sans-serif;
+
+  /* Sub-`text-xs` sizes for dense UI (badges, pills, stat rows). Named tokens
+     replacing scattered arbitrary font-size values so the tiny type stays
+     consistent and is adjustable in one place. 2xs (0.625rem/10px) consolidates
+     the ~10px cluster; 3xs (0.55rem) was the next size down. */
+  --text-2xs: 0.625rem;
+  --text-3xs: 0.55rem;
 }
 
 /* Font face declarations */

app/helpers/organization_helper.rb

@@ -56,7 +56,7 @@ def organization_profile_button(organization, truncate_at: nil, subtitle: nil, l
 
       label_tag = if label.present?
         content_tag(:span, label,
-                    class: "absolute top-1 right-1 px-1.5 py-0.5 rounded text-[10px] font-semibold bg-gray-200 text-gray-600")
+                    class: "absolute top-1 right-1 px-1.5 py-0.5 rounded text-2xs font-semibold bg-gray-200 text-gray-600")
       else
         "".html_safe
       end