Group the stylesheet import lists by component stream

tailwind.css and components.css now hold one block per audit group, and the new
layout.css gathers the layout components, so the parallel rewrites of plan steps
35 and 36 each edit their own lines. .browser-lock is the lock that keeps those
streams to one browser at a time.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

.gitignore

@@ -10,3 +10,4 @@
 
 # Planning notes stay local
 /docs/plans
+.browser-lock

resources/css/components.css

@@ -2,10 +2,19 @@
  * The component stylesheets already written without Tailwind (plan step 36), while the rest are
  * still in tailwind.css. Each lives in `material.components`, so it can be imported anywhere in
  * the entry: the layer statement, not the import order, decides where its rules rank. Step 37
- * replaces this file with all.css.
+ * replaces this file with all.css. One block per stream, so parallel rewrites merge cleanly.
  */
 
 @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
 
+/* Foundation components */
 @import './components/icon.css';
 @import './components/shape.css';
+
+/* Actions and communication */
+
+/* Inputs, selection and data */
+
+/* Containment */
+
+/* Navigation */

resources/css/layout.css

@@ -0,0 +1,7 @@
+/*
+ * The layout components (plan step 35): the scaffold, panes, the canonical layouts, surfaces and
+ * the arrangements inside a pane, each in `material.layout`, with the visibility props in
+ * `material.visibility`. Step 37 folds this file into all.css.
+ */
+
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;

resources/css/material.css

@@ -26,6 +26,7 @@
 @import './tokens/font.css';
 @import './tokens/state.css';
 @import './foundation/hidden.css';
+@import './layout.css';
 @import './components.css';
 @import './tailwind.css';
 

resources/css/tailwind.css

@@ -16,19 +16,26 @@
 
 @import './tokens/theme.css';
 @import './tokens/utilities.css';
+/* Actions and communication — leaving in step 36 */
 @import './components/actions.css';
 @import './components/groups.css';
-@import './components/list.css';
-@import './components/collapse.css';
-@import './components/dialog.css';
-@import './components/field.css';
 @import './components/menu.css';
+
+/* Inputs, selection and data — leaving in step 36 */
+@import './components/field.css';
 @import './components/selection.css';
 @import './components/search.css';
 @import './components/datepicker.css';
 @import './components/timepicker.css';
+@import './components/table.css';
+
+/* Containment — leaving in step 36 */
+@import './components/list.css';
+@import './components/collapse.css';
+@import './components/dialog.css';
+
+/* Navigation — leaving in step 36 */
 @import './components/tabs.css';
 @import './components/app-bar.css';
 @import './components/navigation.css';
 @import './components/toolbar.css';
-@import './components/table.css';

workbench/resources/css/app.css

@@ -3,6 +3,7 @@
    `material` layers are declared first and sit below Tailwind's; tailwind.css brings the
    components still written for Tailwind, without declaring the tokens a second time. */
 @import '../../../resources/css/foundation.css';
+@import '../../../resources/css/layout.css';
 @import '../../../resources/css/components.css';
 @import 'tailwindcss' source(none);
 @import '../../../resources/css/tailwind.css';