/* Shared slide-in drawer (extracted from resume1.css, 04-12-2025 original; made shared 01-08-2026 for reuse on EN_whatsNew.html's Release Health Snapshot tray). Keep this in sync if the resume page's drawer styling changes, or migrate resume1.css to reference this file instead of its own copy next time either is touched. */ .role-drawer { position: fixed; inset: 0; z-index: 1200; /* higher than header & helper card */ display: flex; justify-content: flex-end; align-items: stretch; pointer-events: none; /* disabled until opened */ font-size: 0.95rem; } .role-drawer-backdrop { flex: 1; background: rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.2s ease-out; } .role-drawer-panel { width: 100%; max-width: 560px; /* desktop max width */ background: #ffffff; box-shadow: -16px 0 32px rgba(0, 0, 0, 0.25); transform: translateX(100%); transition: transform 0.25s ease-out; display: flex; flex-direction: column; max-height: 100vh; outline: none; } /* Wider variant for richer content (e.g. the Release Health Snapshot infographic) that needs more room than the resume drawer's original text-only 560px. The snapshot's own CSS uses container queries, so it still degrades gracefully at this width rather than looking cramped. */ .role-drawer-panel.is-wide { max-width: 960px; } /* Open state */ .role-drawer.is-open { pointer-events: auto; } .role-drawer.is-open .role-drawer-backdrop { opacity: 1; } .role-drawer.is-open .role-drawer-panel { transform: translateX(0); } /* Header layout – sticky at top of the panel */ .role-drawer-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 1rem; background: #ffffff; border-bottom: 1px solid #e0e4ea; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); } .role-drawer-header-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .role-drawer-context { margin: 0 0 0.15rem 0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: #7a8288; } .role-drawer-title { margin: 0; font-size: 0.95rem; font-weight: 600; color: #20497f; } /* Scroll area – only this part scrolls */ .role-drawer-content { flex: 1; padding: 1rem 1.1rem 1.25rem; overflow-y: auto; /* 06-08-2026: macOS trackpad scroll-chaining fix. On macOS (Safari and Chrome both — this is OS-level momentum/rubber-band scroll physics, not a browser-engine quirk, which is why it reproduces on both macOS browsers and not on Windows), scrolling over a nested scrollable region can "chain" through to the nearest scrollable ancestor once the browser judges this element isn't consuming the scroll — which in this drawer's case is the host page underneath the fixed overlay. overscroll-behavior: contain tells the browser this element owns its own scroll and must never hand it off. */ overscroll-behavior: contain; } /* Close button */ .role-drawer-close { border: none; background: transparent; font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0.1rem 0.4rem; color: #4d555b; } .role-drawer-close:hover, .role-drawer-close:focus-visible { color: #20497f; } /* Mobile-first: full width on very small screens */ @media (max-width: 480px) { .role-drawer-panel { max-width: 100%; } .role-drawer-content { padding: 0.75rem 0.8rem 1rem; } } /* 05-08-2026 [START] IW-235: print-from-tray pagination fix. position:fixed + overflow-y:auto (this drawer's panel + its internal scroll region) is a known cross-browser print-pagination failure, and a @media print override scoped to .role-drawer wasn't reliable enough to fix it (see IW-235). Instead, relhsnap_script.js reparents the snapshot content out of the drawer into a plain in-flow node (#relhsnap-print-root, appended directly to ) right before printing, and restores it afterward. These rules only take effect while body.printing-snapshot is present, so they can never affect normal drawer viewing or leak onto the standalone EN_relHSnap.html page — same scoping discipline as the earlier CSS-leak fix. */ @media print { body.printing-snapshot > *:not(#relhsnap-print-root) { display: none !important; } #relhsnap-print-root { display: block !important; position: static !important; } } /* 05-08-2026 [END] IW-235 fix */