feat(core): detail drawer + address book list redesign

Introduces a reusable core detail-drawer primitive that slides in from the
right and loads any view via a `*-fragment(none).phtml` endpoint. Bundles the
address book list overhaul that is its first consumer.

Core additions:
- `app-detail-drawer.js` — generic drawer with stepper, focus trap, body
  scroll-lock, URL-hash deep-linking, session-expiry detection
- `app-fragment-init.js` — auto-wires tabs/lookups/confirm/file-upload/
  fslightbox inside injected HTML; consumers do not re-initialize components
- `app-focus-trap.js` — shared focus-trap + refcounted scroll-lock, used by
  both filter-drawer and detail-drawer
- `getHtml()` in `app-http.js` + `SessionExpiredError`; drawer reloads the
  page on auth redirect instead of rendering the login form in the panel
- `DetailDrawerFragmentContractTest` enforces that every `initDetailDrawer`
  consumer ships matching `*-fragment($id).php` + `*-fragment(none).phtml`

Address book list:
- Grid collapses from 9 columns to 4 (identity / context / phone / actions)
  with a two-line identity cell (avatar + name + email)
- Tenant register tabs above the grid using the `app-list-tabs` partial;
  tenant filter wired via hidden toolbar field so grid.js forwards it on
  every data fetch
- Profile body extracted to a shared partial so the full-page view and the
  new drawer fragment share the same markup
- New i18n keys for the drawer/list labels

Also refactors `app-filter-drawer` to reuse the shared focus-trap and
scroll-lock instead of maintaining its own copy, and documents the
detail-drawer convention in CLAUDE.md.

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

web/css/components/app-detail-drawer.css

@@ -0,0 +1,132 @@
+@layer components {
+  /* Detail drawer — slide-in overlay panel for row detail view. */
+
+  html.app-detail-drawer-open {
+    overflow: hidden;
+    overscroll-behavior: none;
+  }
+
+  .app-detail-drawer {
+    position: fixed;
+    inset: 0;
+    z-index: 2050;
+    display: flex;
+    justify-content: flex-end;
+    pointer-events: none;
+  }
+
+  .app-detail-drawer[hidden] {
+    display: none;
+  }
+
+  .app-detail-drawer-backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(15, 23, 42, 0.3);
+    -webkit-backdrop-filter: blur(2px);
+    backdrop-filter: blur(2px);
+    opacity: 0;
+    transition: opacity 0.18s ease;
+    pointer-events: auto;
+  }
+
+  .app-detail-drawer.is-open .app-detail-drawer-backdrop {
+    opacity: 1;
+  }
+
+  .app-detail-drawer-panel {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: min(720px, 100vw);
+    height: 100%;
+    background: var(--app-card-background-color, #fff);
+    border-left: 1px solid var(--app-muted-border-color, rgba(148, 163, 184, 0.35));
+    box-shadow: -12px 0 30px rgba(15, 23, 42, 0.18);
+    transform: translateX(100%);
+    transition: transform 0.22s ease;
+    pointer-events: auto;
+    outline: none;
+  }
+
+  .app-detail-drawer.is-open .app-detail-drawer-panel {
+    transform: translateX(0);
+  }
+
+  .app-detail-drawer-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid var(--app-muted-border-color, rgba(148, 163, 184, 0.25));
+    background: var(--app-card-background-color, #fff);
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
+  .app-detail-drawer-stepper,
+  .app-detail-drawer-actions {
+    display: inline-flex;
+    gap: 0.25rem;
+    align-items: center;
+  }
+
+  .app-detail-drawer-stepper[hidden] {
+    display: none;
+  }
+
+  .app-detail-drawer-header button,
+  .app-detail-drawer-header a {
+    margin-bottom: 0;
+  }
+
+  .app-detail-drawer-body {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    padding: 1rem 1.25rem 2rem;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .app-detail-drawer-loading,
+  .app-detail-drawer-error {
+    padding: 2rem 1rem;
+    text-align: center;
+    color: var(--app-color-muted, #6b7280);
+  }
+
+  .app-detail-drawer-error {
+    color: var(--app-color-danger, #b91c1c);
+  }
+
+  @media (max-width: 900px) {
+    .app-detail-drawer-panel {
+      width: 100vw;
+      border-left: none;
+    }
+  }
+
+  /* Inside the drawer, force single-column layout for any .app-details-container
+     regardless of viewport width (the grid rule in app-details.css triggers on
+     viewport ≥968px, which is wrong for a 720px drawer). Any page that uses the
+     standard details container gets stacked main + aside automatically. */
+  .app-detail-drawer .app-details-container,
+  .app-detail-drawer .app-details-container:has(> aside) {
+    display: block;
+    grid-template-columns: none;
+    min-height: 0;
+  }
+
+  .app-detail-drawer .app-details-container > section {
+    width: 100%;
+  }
+
+  .app-detail-drawer .app-details-container > aside {
+    border-left: none;
+    border-top: 1px solid var(--app-border);
+    min-height: 0;
+    padding: calc(var(--app-spacing) * 1.5) 0 0;
+    margin-top: calc(var(--app-spacing) * 1.5);
+  }
+}