/* ═══════════════════════════════════════════════════════════════════════ FAQ-Ways of Working slide-out drawer (2026-08-17) Built per Harding's ask: the 16 sidebar deep-links under "GS4D FAQ-Ways of Working" used to navigate away to tazzogram.com/#section. Now they open this in-app panel instead, so a visitor mid-diagram never loses their tab/session to go read documentation. tazzogram.com itself is being stripped down separately (video + Register/Sign In only, per Harding -- "not giving the secret sauce to casual visitors who haven't even logged in yet") -- this drawer is the ONLY place this content lives going forward, restricted to people already inside the app (same "already cleared the gate" reasoning as the 2026-08-16 sidebar swap that removed Register/Sign In from sampler.tazzogram.com). Overlay, not push-layout: the panel floats on top of the diagram canvas. Closing it leaves the diagram/editor exactly as it was, nothing reflows. Colors are hardcoded, matching the same palette as gs4d-landing's guide content this was migrated from (#185FA5 blue, #1D9E75 teal, #BA7517 amber, #1a1a18 ink, #f5f4f0 surface) -- no CSS variables here, per this project's standing rule. 2026-08-18 UPDATE, per Harding (verbatim): "Besides the mobility of it, I don't want the tone down (or 'smoked/cloudy' effect that the sidebar menu goes through once the drawer-like panel is open. There is no need... keep it 100% live and vivid." Two changes from the original build: 1. The panel is now freely draggable anywhere on screen (by its header), not just resizable-width from a fixed right anchor. See js/faq-drawer.js -- position state is separate from the existing width state, its own localStorage key, clamped so the header always stays at least partly on-screen and grabbable (confirmed with Harding: never let it get lost off-screen). 2. The dimming/backdrop is gone. `.faq-drawer-overlay` still exists and still covers the full viewport (so click-outside-to-close keeps working exactly as before, confirmed with Harding), it's just visually transparent now -- the sidebar and everything else stays 100% normal-brightness while the drawer is open. ═══════════════════════════════════════════════════════════════════ */ .faq-drawer-overlay { display: none; position: fixed; inset: 0; background: transparent; /* 2026-08-18: was rgba(26,26,24,0.6) -- Harding wants zero dimming of the sidebar/app behind the drawer. Element still covers the full viewport so click-outside-to-close (faq-drawer.js's `if (e.target === overlay) closeDrawer()`) keeps working unchanged. */ z-index: 9999; } .faq-drawer-overlay.open { display: block; } .faq-drawer-panel { /* 2026-08-18: no longer anchored to the right edge (top/right/bottom:0) -- top/left are now set inline by js/faq-drawer.js so the panel can be dragged anywhere. Floating panel needs its own height + rounded corners + shadow-all-around now that it's not flush against a viewport edge. */ position: fixed; width: 640px; /* max-width re-clamped in JS against window.innerWidth on open/resize, since vw-based CSS alone can't be read back as a px value for the drag-resize math in faq-drawer.js. */ max-width: 96vw; height: 80vh; max-height: 92vh; background: #ffffff; border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,0.30), 0 0 0 1px rgba(0,0,0,0.08); opacity: 0; transform: scale(0.97); transition: opacity 0.18s ease, transform 0.18s ease; display: flex; flex-direction: column; overflow: hidden; z-index: 10000; } .faq-drawer-overlay.open .faq-drawer-panel { opacity: 1; transform: scale(1); } /* Draggable resize handle, left edge of the panel -- width only, unchanged behavior from the original build (drag left/toward the sidebar to widen). */ .faq-drawer-resize { position: absolute; left: -5px; top: 0; bottom: 0; width: 10px; cursor: col-resize; z-index: 10001; touch-action: none; } .faq-drawer-resize::after { content: ''; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: transparent; } .faq-drawer-resize:hover::after, .faq-drawer-resize.dragging::after { background: #185FA5; } .faq-drawer-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; flex-shrink: 0; border-bottom: 1px solid rgba(0,0,0,0.12); background: #1c3461; cursor: move; /* 2026-08-18: header doubles as the drag-to-move handle */ touch-action: none; } .faq-drawer-header.dragging { cursor: grabbing; } .faq-drawer-title { flex: 1; min-width: 0; font-size: 16px; font-weight: 800; color: #ffffff; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; } .faq-drawer-close { background: none; border: none; color: rgba(255,255,255,0.85); font-size: 20px; line-height: 1; cursor: pointer; padding: 6px 8px; border-radius: 6px; flex-shrink: 0; } .faq-drawer-close:hover { background: rgba(255,255,255,0.14); color: #ffffff; } .faq-drawer-body { flex: 1; overflow-y: auto; padding: 8px 36px 70px; } .faq-drawer-body::-webkit-scrollbar { width: 9px; } .faq-drawer-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 5px; } /* ── Content typography, migrated from gs4d-landing/index.html's inline