css

 Love this question — and let me first name what "this" actually was, because the roadmap follows from it. What happened in the CSS today was three separate skills:

1. A mental model of layout algorithms — knowing stretch exists, that height opts out of it, that content drives size when nothing else does.
2. Debugging discipline — predicting from code, and switching to measurement the moment reality disagreed twice.
3. Defensive intent-writing — replacing coincidences with declared rules (min-height + align-items: stretch).

Most people try to learn CSS as "1000 properties." That fails. You learn it as a handful of layout algorithms + a measurement habit. Here's the sequence I'd give a younger me:

Phase 1 — Mental models (2–3 weeks, free)

• web.dev "Learn CSS" — Google's free course. Do the box model, cascade, and sizing units modules first.
• Josh Comeau's free interactive articles — start with "An Interactive Guide to Flexbox." This one article would have let you diagnose today's bug yourself. Then "Rules of Margin Collapse."
• Drill games: Flexbox Froggy and Grid Garden (30 min each, genuinely useful muscle memory).

Self-test for this phase: pick any element on a page and answer "why is this exactly this tall?" If you can't trace it to content, constraint, or stretch — keep going.

Phase 2 — The measurement habit (1 week, free, highest ROI)

This is what separated guessing from knowing today:

• Learn the DevTools Computed tab (what actually applied, not what you wrote) and the flex/grid inspector badges (click the flex badge next to an element — it draws the stretch behavior on screen).
• Adopt the rule we lived today: one failed prediction = re-read the code; two = stop and measure. Never three guesses.

Phase 3 — The book (1–2 months, worth paying for)

• 📘 CSS in Depth (2nd ed.) — Keith J. Grant. The book for what you asked. It teaches cascade, box model, flexbox, and grid as systems with reasons, not recipes. This is the CSS equivalent of the Fowler recommendation I gave you for the backend.
• If you prefer interactive over books: Josh Comeau's "CSS for JavaScript Developers" course — built exactly for React devs like you. Pick one of these two, not both.

Phase 4 — Defensive CSS (this maps 1:1 to today)

• 🎯 "Defensive CSS" — Ahmad Shadeed (defensivecss.dev, plus his blog ishadeed.com). This resource is literally about today's bug class: layouts that break when content changes — long names, empty states, loaders. Every tip is "what enforces this when the content misbehaves?" If you read only one thing from this whole list, make it this.
• Every Layout (Pickering & Bell) — teaches layouts as reusable algorithms that declare intent, the philosophical home of our align-items: stretch fix.

Phase 5 — The design eye (ongoing)

• Refactoring UI (Wathan & Schoger) — short, visual, teaches you why the uneven cards looked wrong before you could articulate it. You spotted the unevenness instantly today; this book sharpens that instinct into vocabulary.

Practice ground: your own codebase

Best exercises are free and sitting in your repo:

• Grep the CQ/Agents SCSS for other fixed height: values — each one is a potential "today's bug" waiting for a content change. Ask of each: rule or coincidence?
• Notice the codebase already uses BEM-ish naming (top-agent-card__stat-value) — Phase 3 will teach you why that convention exists.

That's it — deliberately short. One course, one book, one defensive-CSS site, one habit. The habit (Phase 2) is the one you already started building today; the rest just gives it vocabulary and speed.