refactor: Add strategic comments to organize CSS (Step 5 of 6)

Added inline comments throughout myai.css to:
- Clarify complex CSS selectors (input:not selectors, specificity explanations)
- Explain design patterns (.is-invalid error state pattern)
- Document focus and error states
- Describe layout decisions (sticky result panel, hamburger dropdown)
- Clarify responsive breakpoints and what changes at each
- Explain the relationship between CSS and JS (e.g., .is-open, .is-invalid)

Comments are strategic and concise—added to complex/non-obvious sections
without bloating the file. All CSS rules remain unchanged—purely additive
documentation.

Key sections now have better context:
- Form field selectors and state handling
- Hamburger menu responsive behavior
- Result panel sticky positioning strategy
- Responsive grid layout changes at 900px and 560px
- Cookie banner and loader overlay behavior

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

web/wwwroot/css/myai.css

@@ -152,7 +152,7 @@ img {
             color: #fff
         }
 
-/* Hamburger — hidden on desktop, shown via media query */
+/* Hamburger menu button — hidden on desktop, shown in responsive via media query */
 .menu-toggle {
     display: none;
     background: transparent;
@@ -160,6 +160,7 @@ img {
     padding: 8px
 }
 
+    /* Three horizontal lines that make up the hamburger icon */
     .menu-toggle span {
         display: block;
         width: 24px;
@@ -168,7 +169,7 @@ img {
         margin: 5px 0
     }
 
-/* Language selector */
+/* Language selector (right side of header) */
 .nav-actions {
     display: flex;
     align-items: center;
@@ -430,13 +431,15 @@ img {
         margin-bottom: 18px
     }
 
-        .ai-panel label span, .contact-form label span {
+        /* Label text styling */
+    .ai-panel label span, .contact-form label span {
             display: block;
             margin-bottom: 8px;
             color: #c3d4f2;
             font-weight: 700
         }
 
+    /* Input fields: text, textarea, email. Excludes checkboxes and file inputs. */
     .ai-panel input:not([type="checkbox"]):not([type="file"]),
     .ai-panel textarea,
     .contact-form input:not([type="checkbox"]):not([type="file"]),
@@ -455,6 +458,7 @@ img {
         transition: border-color .15s ease, box-shadow .15s ease
     }
 
+        /* Placeholder text color */
         .ai-panel input:not([type="checkbox"]):not([type="file"])::placeholder,
         .ai-panel textarea::placeholder,
         .contact-form input:not([type="checkbox"]):not([type="file"])::placeholder,
@@ -463,6 +467,7 @@ img {
             color: #97a4b8
         }
 
+        /* Focus state: blue border and glow */
         .ai-panel input:not([type="checkbox"]):not([type="file"]):focus,
         .ai-panel textarea:focus,
         .contact-form input:not([type="checkbox"]):not([type="file"]):focus,
@@ -472,6 +477,7 @@ img {
             box-shadow: 0 0 0 3px rgba(95,160,255,.18)
         }
 
+        /* Error state (is-invalid): red border and red glow when parent has .is-invalid class */
         .ai-panel label.is-invalid input:not([type="checkbox"]):not([type="file"]),
         .ai-panel label.is-invalid textarea,
         .contact-form label.is-invalid input:not([type="checkbox"]):not([type="file"]),
@@ -498,6 +504,7 @@ img {
     color: #ff8a8a
 }
 
+/* File upload drop zone */
 .file-drop {
     display: block;
     border: 1px dashed rgba(143,184,255,.45);
@@ -507,6 +514,7 @@ img {
     cursor: pointer
 }
 
+/* File drop zone error state */
 .file-drop.is-invalid {
     border-color: #ff8a8a;
     background: rgba(255,138,138,.06)
@@ -544,12 +552,13 @@ img {
         margin: 0
     }
 
-/* Result panel */
+/* Match result panel — sticky positioning keeps it visible while scrolling the form */
 .result-panel {
     position: sticky;
     top: 110px
 }
 
+/* Empty state message (before results generated) */
 .empty-result {
     color: var(--muted);
     line-height: 1.8;
@@ -558,6 +567,7 @@ img {
     background: rgba(0,0,0,.25)
 }
 
+/* Large circular match score percentage badge */
 .score-badge {
     display: inline-flex;
     align-items: center;
@@ -571,6 +581,7 @@ img {
     margin: 10px 0 20px
 }
 
+/* Bulleted lists for strengths, gaps, evidence */
 .result-list {
     padding-left: 18px;
     color: #d7e3fb;
@@ -862,18 +873,20 @@ img {
 
 /* ============================================================
    RESPONSIVE — tablets and below (≤900px)
+   Changes: Single-column layouts, hamburger nav, adjusted spacing
    ============================================================ */
 @media (max-width:900px) {
-    /* Single-column layouts */
+    /* All grids switch from multi-column to single column */
     .hero-grid, .matcher-grid, .contact-grid, .demo-grid {
         grid-template-columns: 1fr
     }
 
+    /* Result panel no longer sticky on tablets (would interfere with form) */
     .result-panel {
         position: static
     }
 
-    /* Nav becomes a dropdown */
+    /* Navigation becomes a hidden dropdown, shown on hamburger click via .is-open class */
     .nav {
         position: absolute;
         top: 84px;
@@ -889,10 +902,12 @@ img {
         z-index: 30
     }
 
+        /* .is-open class added by JS on hamburger click */
         .nav.is-open {
             display: flex
         }
 
+    /* Show hamburger button on tablets */
     .menu-toggle {
         display: block;
         order: 4
@@ -906,11 +921,13 @@ img {
         position: relative
     }
 
+    /* Cookie banner stacks vertically on tablets */
     .cookie-box {
         align-items: flex-start;
         flex-direction: column
     }
 
+    /* Language flags get smaller */
     .lang-switch {
         padding: 4px
     }
@@ -923,8 +940,10 @@ img {
 
 /* ============================================================
    RESPONSIVE — mobile (≤560px)
+   Changes: Reduced padding, smaller text, full-width buttons, hide subtitle
    ============================================================ */
 @media (max-width:560px) {
+    /* Tighter padding on small screens */
     .hero {
         padding-top: 46px
     }
@@ -933,16 +952,19 @@ img {
         padding: 56px 0
     }
 
+    /* Footer goes vertical on mobile */
     .footer-wrap {
         align-items: flex-start;
         flex-direction: column
     }
 
+    /* Action buttons take full width */
     .hero-actions .btn {
         width: 100%;
         text-align: center
     }
 
+    /* Brand logo smaller, subtitle hidden */
     .brand-text {
         font-size: 1.35rem
     }
@@ -956,6 +978,7 @@ img {
         height: 42px
     }
 
+    /* Tighter gaps in nav and language selector */
     .nav-actions {
         gap: 6px
     }
@@ -969,6 +992,7 @@ img {
         height: 27px
     }
 
+    /* Slightly smaller banner border radius on mobile */
     .showcase-banner {
         border-radius: 18px
     }