Answer stability round 1: 0 🔴, 1 🟡 (0 misread); test the drawer opens and a link in it navigates, keep the in-flow sidebar from stretching

public/css/styles.css

@@ -2,9 +2,6 @@
    App Shell Template — pure HTML/CSS, no JavaScript
    -------------------------------------------------------------
    Architecture
-   - Design tokens are two raw palettes picked by a theme block, so
-     the theme follows the system by default and can be forced
-     Light / Dark via radio + :has().
    - Everything is a reusable "block": .nav-item, .filter,
      .chip, .badge, .btn, .menu, .table — combine freely.
    ============================================================= */
@@ -682,13 +679,13 @@ th[aria-sort="descending"] .sort-ico { transform: rotate(180deg); }
 /* ---------- 11. RESPONSIVE / HAMBURGER --------------------- */
 .scrim { display: none; }
 
-/* Off-canvas only where :has() works: without it nothing can read #nav-toggle, so the sidebar
-   stays in the flow above the content and the hamburger stays hidden. */
 @media (max-width: 860px) {
-  .app { grid-template-columns: minmax(0, 1fr); }
-  .content { grid-column: 1; }
+  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
+  .content { grid-column: 1; grid-row: 2; }
   .search { min-width: 150px; flex: 1 1 auto; }
 
+  /* Off-canvas only where :has() works: without it nothing can read #nav-toggle, so the sidebar
+     stays in the flow above the content and the hamburger stays hidden. */
   @supports selector(:has(a)) {
     .sidebar {
       position: fixed; inset: 0 auto 0 0; width: min(86vw, var(--nav-w));