IntroducingCrystalWindow

<!-- 1. Overlay (placed before nav in DOM) -->
<div id="cw-overlay" aria-hidden="true"></div>

<!-- 2. CrystalWindow panel (anchored below nav via top: var(--cw-nav-h)) -->
<div id="crystalwindow"
  role="dialog" aria-modal="true"
  aria-labelledby="cw-title"
  style="top: var(--cw-nav-h)">
  <div class="cw-glass">
    <div class="cw-handle" id="cw-handle">
      <div class="cw-handle-bar"></div>
    </div>
    <div class="cw-inner">
      <div class="cw-header">
        <h2 id="cw-title">Panel Title</h2>
        <button class="cw-close" id="cw-close" aria-label="Close">✕</button>
      </div>
      <div class="cw-body" id="cw-body"></div>
    </div>
    <div class="cw-reflect" aria-hidden="true"></div>
  </div>
</div>

<!-- 3. Nav must be sibling AFTER both #cw-overlay and #crystalwindow -->
<nav class="nav" id="nav">...</nav>

// Open with a panel ID (matches data-cw-panel="…" on content)
CrystalWindow.open('my-panel-id');

// Open with dynamic title + HTML content
CrystalWindow.open({
  id: 'dynamic',
  title: 'Hello from JS',
  badge: 'New Feature',
  content: `<p>Rendered at runtime.</p>`,
  onOpen: () => console.log('opened'),
});

// Close programmatically
CrystalWindow.close();

// Query current state
const isOpen = CrystalWindow.isOpen();
const panelId = CrystalWindow.currentPanel();

// Register a panel programmatically (React, Vue, etc.)
CrystalWindow.register('settings', {
  title: 'Settings',
  badge: 'Config',
  html:  '<div class="cw-body"><p>Settings content</p></div>',
});

// Listen to global events
window.addEventListener('cw:open', (e) => {
  console.log('Panel opened:', e.detail.id);
});
window.addEventListener('cw:close', (e) => {
  console.log('Panel closed:', e.detail.id);
});