CSS extracted into separate file

AGENTS.md

@@ -209,6 +209,11 @@ labhelper/
 │   │       ├── clean_orphaned_files.py     # Cleanup orphaned ThingFile attachments
 │   │       └── clean_orphaned_images.py    # Cleanup orphaned Thing images
 │   ├── migrations/                         # Database migrations
+│   ├── static/
+│   │   └── css/
+│   │       ├── base.css                    # Base styles (layout, navbar, buttons, alerts, etc.)
+│   │       ├── edit_thing.css              # Edit thing form styles
+│   │       └── thing_detail.css            # Markdown content + lightbox styles
 │   ├── templates/
 │   │   └── boxes/
 │   │       ├── add_things.html             # Form to add multiple things
@@ -356,14 +361,21 @@ The project uses a base template system at `labhelper/templates/base.html`. All
 
 ### CSS Guidelines
 
+**Static CSS Files:**
+- Base styles live in `boxes/static/css/base.css` (loaded by `base.html` via `{% static %}`)
+- Page-specific styles live in separate static CSS files (e.g., `thing_detail.css`, `edit_thing.css`)
+- Child templates load their CSS via `{% block extra_css %}` with `<link>` tags
+- WhiteNoise serves and cache-busts static files via `CompressedManifestStaticFilesStorage`
+- Run `python manage.py collectstatic` after adding or modifying static CSS files
+
 **Naming:**
 - Use descriptive class names
 - BEM pattern encouraged for complex components
-- Inline styles allowed for template-specific styling
+- Inline styles allowed for template-specific one-off styling
 
 **Styles:**
-- Use base template styles when possible
-- Template-specific styles in `{% block extra_css %}`
+- Use base CSS classes when possible
+- Page-specific styles in dedicated static CSS files loaded via `{% block extra_css %}`
 - JavaScript in `{% block extra_js %}`
 - Smooth transitions (0.2s - 0.3s)
 - Hover effects with transform and box-shadow
@@ -410,36 +422,44 @@ The project uses a base template system at `labhelper/templates/base.html`. All
     - `title`: Page title tag
     - `page_header`: Page header with breadcrumbs
     - `content`: Main page content
-    - `extra_css`: Additional styles
+    - `extra_css`: Additional CSS via `<link>` tags to static files
+    - `extra_head`: Additional head elements
     - `extra_js`: Additional JavaScript
 
 3. **Load required template tags**
     ```django
-    {% load static %}
+    {% load static %}      {# Required when using {% static %} for CSS/asset links #}
     {% load mptt_tags %}
     {% load thumbnail %}
     {% load dict_extras %}
     ```
 
-4. **Use URL names for links**
+4. **Link page-specific CSS from static files**
+    ```django
+    {% block extra_css %}
+    <link rel="stylesheet" href="{% static 'css/thing_detail.css' %}">
+    {% endblock %}
+    ```
+
+5. **Use URL names for links**
     ```django
     <a href="{% url 'box_detail' box.id %}">
     ```
 
-5. **Use icons with Font Awesome**
+6. **Use icons with Font Awesome**
     ```django
     <i class="fas fa-box"></i>
     ```
 
-6. **Add breadcrumbs for navigation**
+7. **Add breadcrumbs for navigation**
     ```django
     <p class="breadcrumb">
-        <a href="/"><i class="fas fa-home"></i> Home</a> / 
+        <a href="/"><i class="fas fa-home"></i> Home</a> /
         <a href="/box/{{ box.id }}/"><i class="fas fa-box"></i> Box {{ box.id }}</a>
     </p>
     ```
 
-7. **Icon alignment in lists**: When using icons in list items, use fixed width containers to ensure proper alignment
+8. **Icon alignment in lists**: When using icons in list items, use fixed width containers to ensure proper alignment
     ```django
     <a href="{% url 'thing_detail' thing.id %}" style="display: inline-block; width: 20px; text-align: center;">
         <i class="fas fa-link"></i>