XL landscape polish: btn-primary sizing, tray from right, footer bg, layout fixes

- .btn-xl removed; .btn-primary absorbs 4rem sizing (same as PICK SIGS/PICK ROLES)
- Landscape navbar .btn-primary: 3rem → 4rem to match base; XL stays 4rem (consistent)
- _button-pad.scss XL: base .btn ×1.2 (2.4rem); .btn-xl block deleted
- _tray.scss XL (≥1800px): portrait-style tray (slides from right, z-95)
- tray.js: _isLandscape() returns false at ≥1800px; portrait code paths run throughout
- Footer sidebar: background-color added so opaque footer masks tray sliding behind it
- Copyright .footer-container: bottom → top in landscape sidebar
- #id_room_menu: right: 2.5rem override in _room.scss XL block (cascade fix)
- navbar-text XL: 0.65rem × 1.2 = 0.78rem
- All landscape media queries: max-width: 1440px cutoff removed (already done prior)
- btn-xl class stripped from all 5 templates; test_navbar.py assertion updated

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/static_src/scss/_tray.scss

@@ -329,10 +329,76 @@ $handle-r:         1rem;
     }
 }
 
-// ── XL landscape: tray spans between doubled 8rem sidebars ─────────────────
+// ── XL landscape (≥1800px): portrait-style tray — slides in from right ─────
+// Overrides all landscape rules above.  JS also returns false from _isLandscape()
+// at this width so portrait code paths run throughout.
 @media (orientation: landscape) and (min-width: 1800px) {
     #id_tray_wrap {
-        left:  8rem;
-        right: 8rem;
+        flex-direction: row;
+        top:    0;
+        bottom: 0;
+        left:   auto;   // JS controls left; width set to innerWidth so wrap fills viewport
+        right:  auto;
+        height: auto;
+        width:  auto;
+        z-index: 95;    // below footer/nav sidebars (z-100) — opaque footer masks the tray
+        transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+
+        &.wobble { animation: tray-wobble      0.45s ease; }
+        &.snap   { animation: tray-snap        0.30s ease; }
+    }
+
+    #id_tray_handle {
+        width:  $handle-exposed;   // 48px portrait strip
+        height: auto;
+    }
+
+    #id_tray_grip {
+        top:    50%;
+        bottom: auto;
+        left:   calc(#{$handle-exposed} / 2 - 0.125rem);
+        transform: translateY(-50%);
+        width:  $handle-rect-w;   // 10000px extends leftward
+        height: $handle-rect-h;   // 72px
+    }
+
+    #id_tray {
+        border-left:   2.5rem solid rgba(var(--quaUser), 1);
+        border-top:    2.5rem solid rgba(var(--quaUser), 1);
+        border-bottom: 2.5rem solid rgba(var(--quaUser), 1);
+        border-right:  none;
+        margin-left:   0.5rem;
+        margin-bottom: 0;
+        width:         auto;
+        max-width:     none;
+        align-self:    auto;
+        flex:          1;
+        height:        auto;
+        overflow:      hidden;
+        box-shadow:
+            -0.25rem 0 0.5rem rgba(0, 0, 0, 0.55),
+            inset 0 0 0 0.3rem rgba(var(--quiUser), 0.45),
+            inset 0.6rem 0 1.5rem -0.5rem rgba(0, 0, 0, 1),
+            inset 0.6rem 0 1.5rem -0.5rem rgba(var(--quiUser), 0.5),
+            inset 0 0.6rem 1.5rem -0.5rem rgba(0, 0, 0, 1),
+            inset 0 0.6rem 1.5rem -0.5rem rgba(var(--quiUser), 0.5),
+            inset 0 -0.6rem 1.5rem -0.5rem rgba(0, 0, 0, 1),
+            inset 0 -0.6rem 1.5rem -0.5rem rgba(var(--quiUser), 0.5)
+        ;
+    }
+
+    #id_tray_grid {
+        grid-template-columns: none;
+        grid-template-rows: repeat(8, var(--tray-cell-size, 48px));
+        grid-auto-flow: column;
+        grid-auto-columns: var(--tray-cell-size, 48px);
+        grid-auto-rows: auto;
+        position: static;
+    }
+
+    .tray-cell {
+        border-top:    none;
+        border-right:  2px dotted rgba(var(--priUser), 0.35);
+        border-bottom: 2px dotted rgba(var(--priUser), 0.35);
     }
 }