Fix mobile sidebar closed state

[ootakazuhiko]

Summary

• keep the mobile/tablet sidebar drawer off-canvas in its closed state even though main.css later declares the desktop .book-sidebar { transform: translateX(0); }
• keep the opened mobile drawer above the backdrop overlay while staying below the fixed header
• document why the mobile transform and z-index rules must be explicit in this import order

Note: AGENTS.md says docs/assets/ should generally not be hand-edited. For this Issue #168 public CSS defect, the configured Pages source is main /docs, and no mobile-responsive.css source template exists under templates/styles/; therefore this PR updates the published CSS directly and keeps the change to one file.

Validation

• npm ci
• npm run check:security
• npm run check:metadata
• npm run lint:light
• npm run build with workspace-local BUNDLE_PATH
• git diff --check
• local Pages visual check: books=1 pages=10 ok=10 warn=0 fail=0
• local direct Playwright z-index probe: 480/768/820/1024px closed drawer off-canvas; opened drawer sidebarZ=999, overlayZ=950; desktop unchanged

Part of itdojp/it-engineer-knowledge-architecture#168.

[ootakazuhiko]

@copilot review

[Copilot]

Pull request overview

This PR fixes a mobile/tablet layout regression where the sidebar drawer could appear open (or layered incorrectly) due to later .book-sidebar desktop rules in main.css overriding the mobile rules imported earlier.

Changes:

• Make the mobile closed-state transform: translateX(-100%) explicit and !important to prevent later desktop transform: translateX(0) from leaking into mobile/tablet widths.
• Set the mobile sidebar z-index to 999 !important to ensure it stays above the overlay (950) while remaining below the fixed header (1000).
• Add inline documentation explaining why !important is required given the current CSS import/order and desktop defaults.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.