Fix mobile sidebar visibility guard

[ootakazuhiko]

Summary

• Reinforce the mobile/tablet sidebar closed state with visibility: hidden and a delayed visibility transition.
• Keep the opened sidebar visible and above the overlay while preserving the existing off-canvas transform fix.
• Apply the same guard to each tracked mobile-responsive.css copy in this repository to avoid asset drift.

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

Verification

• git diff --check
• Static CSS guard check for z-index: 999 !important, closed transform: translateX(-100%) !important, closed visibility: hidden, delayed visibility transition, and opened visibility: visible.

[ootakazuhiko]

@copilot review

[Copilot]

Pull request overview

This PR adjusts the mobile/tablet off-canvas sidebar CSS so the closed state is fully non-visible (not just translated off-screen), and so visibility changes are coordinated with the slide transition to avoid edge “peeking”/flash issues. The same guard is applied to both duplicated mobile-responsive.css copies in the repo.

Changes:

• Force the closed sidebar to visibility: hidden with a delayed visibility transition that aligns with the transform animation.
• Ensure the opened sidebar becomes immediately visible and stays stacked above the overlay by setting z-index with !important.
• Mirror the updates across the repository’s duplicated CSS files.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
IT-engineer-communication-book/docs/assets/css/mobile-responsive.css	Adds a visibility guard + delayed visibility transition for the closed sidebar and ensures proper stacking above the overlay.
docs/assets/css/mobile-responsive.css	Mirrors the same sidebar visibility/transition/z-index guard changes for the duplicated stylesheet.

---

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

[ootakazuhiko]

@copilot review