/* Phones and narrow windows (760px and under): the sidebar slides in from a
   menu button instead of taking 248px of a 390px screen, and side-by-side
   panels stack. Linked last, so these rules win over the desktop ones. */
.menu-btn, .nav-backdrop { display: none; }

@media (max-width: 760px) {
  .sidebar {
    position: fixed; left: 0; top: 0; height: 100vh; height: 100dvh; z-index: 400;
    transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: none;
  }
  body.nav-open .sidebar { transform: none; box-shadow: 0 10px 40px rgba(0,0,0,0.25); }
  body.nav-open .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 399; background: rgba(17,24,39,0.35); }
  body.nav-open { overflow: hidden; }

  .content-header { position: relative; padding: 1rem 3.5rem; }
  .content-header h1 { font-size: 1.15rem; }
  .menu-btn {
    display: flex; align-items: center; justify-content: center;
    position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
    width: 2.4rem; height: 2.4rem; border-radius: 10px; cursor: pointer;
    background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.35); color: #fff; font-size: 1.15rem;
  }
  .content-logo-strip { padding-top: 0.8rem; }
  .logo-mark-banner { height: 2.4rem; }
  .content-body { padding: 1rem 0.75rem 2rem; }
  section.panel { padding: 1rem; border-radius: 12px; }

  .section-head, .section-head-group { flex-wrap: wrap; gap: 0.5rem; }
  .split-pane, .dual-pane { flex-direction: column; }
  .split-pane > .split-col, .dual-pane > .pane { flex: 1 1 auto; width: 100%; }

  /* A wide table scrolls sideways inside its own box; the page itself never does. */
  .content-body table { display: block; max-width: 100%; overflow-x: auto; }
  .page-tabs { gap: 1rem; overflow-x: auto; }
  .page-tab { flex-shrink: 0; }
  .sync-map-org-header { max-width: 100%; }
}