:root { font-family: system-ui, sans-serif; }

.app-layout {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

#screenMenu {
  width: 260px;
  min-height: 72vh;
  position: sticky;
  top: 0.75rem;
  flex-shrink: 0;
  transition: width 0.2s ease;
}

.app-panels {
  flex: 1;
  min-width: 0;
}

.panel { display: none; }
.panel.active { display: block; }

.list { margin-top: .75rem; }
#insightOutput { max-height: 220px; }

#screenMenu .menu-text,
#screenMenu summary {
  display: inline-block;
}

#appShell .menu-group { margin-bottom: 0.5rem; }

#appShell.menu-collapsed #screenMenu {
  width: 82px;
}

#appShell.menu-collapsed #screenMenu .menu-text,
#appShell.menu-collapsed #screenMenu summary {
  display: none;
}

#appShell.menu-collapsed #screenMenu .btn {
  text-align: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

#appShell.menu-collapsed #screenMenu details > summary::marker {
  display: none;
}

#appShell.menu-collapsed #screenMenu details {
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

#appShell.menu-collapsed #screenMenu details[open] > summary::after {
  content: '▸';
  display: inline;
  margin-left: 0.35rem;
}

#screenMenu [data-tab].active {
  font-weight: 600;
  background-color: var(--bs-primary, #0d6efd);
  color: white;
}