/* Breakpoints — handoff §19. Priority: keep the main chart usable, collapse
 * the right panel first, then turn the sidebar into a drawer. */

@media (max-width: 1280px) {
  :root {
    --details-width: 340px;
    --sidebar-width: 220px;
  }
  #framepanel.wide { width: 38vw; }
}

@media (max-width: 1050px) {
  /* right details panel becomes a fixed drawer; the existing
     hidden/normal/wide control opens and closes it */
  #framepanel {
    position: fixed;
    top: var(--topbar-height);
    right: 0;
    z-index: 80;
    height: calc(100vh - var(--topbar-height));
    overflow-y: auto;
    width: min(420px, 90vw);
    padding: var(--space-4);
    background: var(--surface-app);
    box-shadow: var(--shadow-float);
  }
  #framepanel.wide { width: min(480px, 92vw); }
}

@media (max-width: 760px) {
  :root { --topbar-height: 52px; }

  #topbar { grid-template-columns: auto 1fr auto; gap: var(--space-3); }
  .topbar-nav { display: none; }
  .brand-logo { height: 34px; }
  .panel-size-label, #live-info { display: none; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center;
              width: 38px; height: 38px; font-size: 17px; border-radius: var(--radius-sm);
              cursor: pointer; }

  #layout { display: block; padding: var(--space-3); }

  #sidebar {
    position: fixed;
    left: 0;
    top: var(--topbar-height);
    bottom: 0;
    z-index: 90;
    width: min(280px, 88vw);
    max-height: none;
    border-radius: 0;
    transform: translateX(-100%);
    transition: transform 160ms ease;
  }
  #sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-float); }

  #main { min-height: 420px; }

  #sv-wrap, #al-wrap { flex-direction: column; }
  #sv-side, #al-ctrl, #tr-card { width: 100%; }
}