Excessive token usage: 70K+ tokens to find a 3-line CSS bug

Summary

Claude Code burned 70K+ tokens across a debugging session to find what turned out to be a 3-line CSS specificity override. The root cause was a simple grep away but the agent went down multiple wrong paths instead.

What happened

• User reported UI elements rendering at wrong size on iOS (WKWebView)
• Same elements rendered correctly in Playwright/browser testing
• Claude Code theorized Tailwind JIT wasn't generating CSS for arbitrary values (text-[11px])
• Spun up multiple parallel research agents investigating Tailwind config, WKWebView font minimums, WebKit button UA styles
• Built iOS simulator builds, added debug banners, compared milestone diffs
• Actual root cause: A CSS rule scoped to html.native-shell (iOS WebView class) was explicitly overriding font-size: 14px on button elements — sitting in plain sight in index.css

What should have happened

1. User says "works in browser, broken on iOS" → check platform-specific CSS (native-shell selector)
2. One grep native-shell index.css → found the override in 10 seconds
3. Fix: remove 3 CSS rules. Done in 5 minutes.

Impact

• ~70K tokens consumed (the user's entire session budget)
• Multiple hours of user's evening wasted
• User frustration from repeated failed attempts

Suggestion

When browser and device rendering disagree, Claude Code should prioritize checking platform-specific CSS overrides (conditional classes, media queries, user-agent selectors) before investigating build tooling or browser engine differences.

---
Filed on behalf of user who requested token credit consideration for the inefficient session.