feat(responsive): mobile polish — topbar, drawer, footer, tabs, notification dropdown

Unifies the breakpoint system and fixes cross-layer CSS bugs that kept
the old mobile hide rules from ever taking effect.

Breakpoints:
- Document canonical xs/sm/md/lg/xl/2xl scale in variables.base.css
- Replace 968px one-offs with 1024px (app-details, app-page-editor)
- Make details tab-panel max-width responsive (min(70ch, 100%))

Topbar (< md):
- Hide breadcrumb in components layer so cross-layer overrides actually win
- Dock search icon alongside right-column icons via flex layout
- Add xs (400px) tightening for hit-area preservation
- Hide brand divider alongside hidden brand name
- Switch hover states to theme-aware --app-dropdown-hover-background-color

Mobile drawer:
- Icon-bar now vertical like desktop (was horizontal top strip, effectively invisible)
- Sidebar shifted 52px right so icon-bar and sidebar slide in as one 280px unit
- Add breathing room above first nav item (20px top padding)

List tabs:
- Rewrite .app-list-tabs to horizontal scroll with hidden scrollbar, snap,
  and mask-image gradient fades; add initListTabs to scroll active into view
- Register as runtime component in app-init.js

List toolbar:
- Stack wide controls (multi-select, search/text inputs) full-width below sm,
  keep compact controls at natural width

Footer:
- New dedicated app-footer.css with mobile-first stacking, border-top separator,
  theme-aware hover; remove redundant rules from app-shell.css

Notification dropdown:
- Width with min(360px, 100vw - 2rem) and min-width: 0 override global
  details > ul rule; switch to position: fixed below md so it hugs the
  viewport right edge instead of the non-rightmost bell button

Content spacing:
- Add padding-block-start to .app-main-content on mobile (was 0)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

web/css/layout/app-topbar.css

@@ -116,11 +116,11 @@
     flex-shrink: 0;
   }
 
-  @media (max-width: 576px) {
-    .app-topbar-left .app-breadcrumb {
-      display: none;
-    }
+  /* Breadcrumb mobile-hide lives in components/app-breadcrumb.css — cross-layer
+     overrides from the layout layer do not win against .app-breadcrumb's own
+     display:flex in the components layer. */
 
+  @media (max-width: 576px) {
     .app-topbar-search-trigger-text,
     .app-topbar-search-trigger-shortcut {
       display: none;
@@ -128,9 +128,47 @@
 
     .app-topbar-search-trigger {
       width: auto;
+      min-width: 2.25rem;
+      min-height: 2.25rem;
       padding: var(--app-topbar-item-padding);
       border: none;
     }
+
+    /* Dock the search icon alongside the right-column icons:
+       swap grid \u2192 flex so left flex-grows and center+right cluster on the right. */
+    .app-header nav.app-topbar {
+      display: flex;
+      grid-template-columns: unset;
+      gap: var(--app-topbar-list-gap);
+      align-items: center;
+    }
+
+    .app-topbar-left {
+      flex: 1 1 0%;
+      min-width: 0;
+    }
+
+    .app-topbar-center,
+    .app-topbar-right {
+      flex: 0 0 auto;
+    }
+
+    .app-topbar-center {
+      justify-content: flex-end;
+    }
+  }
+
+  /* xs — very narrow phones (iPhone SE 375, Pixel 4a portrait).
+     Tighten topbar chrome so every item keeps its 2.25rem hit area without overflow. */
+  @media (max-width: 400px) {
+    .app-header {
+      --app-topbar-list-gap: 2px;
+      padding-inline: calc(var(--app-spacing) * 0.5);
+    }
+
+    .app-header nav.app-topbar {
+      gap: calc(var(--app-spacing) * 0.5);
+    }
   }
 
   .app-topbar-menu-item-detail-sidebar {
@@ -192,24 +230,24 @@
   .app-topbar-right > li > a:hover,
   .app-topbar-right > li > button:hover,
   .app-header details.dropdown > summary:not([role]):hover {
-    background-color: color-mix(in srgb, var(--app-contrast) 8%, transparent);
+    background-color: var(--app-dropdown-hover-background-color);
     color: var(--app-color);
-    --app-background-color: color-mix(
-      in srgb,
-      var(--app-contrast) 8%,
-      transparent
-    );
+    --app-background-color: var(--app-dropdown-hover-background-color);
     --app-color: var(--app-color);
   }
 
   .app-topbar-right > li > a:active,
   .app-topbar-right > li > button:active,
   .app-header details.dropdown > summary:not([role]):active {
-    background-color: color-mix(in srgb, var(--app-contrast) 12%, transparent);
+    background-color: color-mix(
+      in srgb,
+      var(--app-dropdown-hover-background-color) 70%,
+      var(--app-contrast) 30%
+    );
     --app-background-color: color-mix(
       in srgb,
-      var(--app-contrast) 12%,
-      transparent
+      var(--app-dropdown-hover-background-color) 70%,
+      var(--app-contrast) 30%
     );
   }
 
@@ -372,7 +410,7 @@
   }
 
   .app-topbar-hamburger:hover {
-    background: color-mix(in srgb, var(--app-contrast) 8%, transparent);
+    background: var(--app-dropdown-hover-background-color);
     color: var(--app-color);
   }
 
@@ -427,6 +465,11 @@
     .app-topbar-brand-name {
       display: none;
     }
+
+    /* With brand-name hidden, the divider bar is pointless chrome — drop it. */
+    .app-topbar-brand::after {
+      display: none;
+    }
   }
 
   .app-header details.dropdown[open] > summary::before {