aside h3{
  margin:8px 0 6px 0;
  font-size:14px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.toolrow{ display:flex; gap:8px; flex-wrap:wrap; }

.category-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.category-header{
  display:flex;
  align-items:center;
  gap:4px;
  background:#222532;
  padding:4px 8px;
  margin:4px 0;
  font-weight:600;
  cursor:pointer;
}

.category-header .arrow{
  display:inline-block;
  width:1em;
  text-align:center;
}

.divider{ height:1px; background:#222532; margin:12px 0; }
.footer{ margin-top:10px; color:var(--muted); font-size:12px; }
.danger{ color:var(--danger); }

/* Sidebar custom scrollbar */
aside::-webkit-scrollbar {
  width: 10px;
}
aside::-webkit-scrollbar-track {
  background: var(--panel);
}
aside::-webkit-scrollbar-thumb {
  background: #2a2f43;
  border-radius: 6px;
}
aside::-webkit-scrollbar-thumb:hover {
  background: #3a4266;
}

/* Firefox */
aside {
  scrollbar-width: thin;
  scrollbar-color: #2a2f43 var(--panel);
}

/* Give dynamic panels a steady footprint to prevent layout jumps */
#typeSettings{
  min-height: 200px;         /* reserve space even when empty */
  max-height: 280px;         /* keep from growing too tall */
  overflow:auto;             /* scroll inside if content is longer */
}

#selectedPanel{
  min-height: 140px;
  max-height: 220px;
  overflow:auto;
}

/* These are usually short; still reserve a little space so the page feels steady */
#displaySettings{ min-height: 90px; }
#addTypeForm{ min-height: 140px; }

/* Buildings list can grow; cap height to keep the page stable */
#palette{
  max-height: 260px;
  overflow:auto;
}

/* Force Help to stack vertically, one tip per line */
.help-list{
  display: block;          /* override any flex inherited */
  list-style: none;
  margin: 0;
  padding: 0;
}
.help-list li{
  display: block;          /* ensure block flow */
  line-height: 1.35;
  margin: 6px 0;
  color: var(--muted);
  font-size: 13px;
  word-break: break-word;
}

/* Hide dev-only panels by default */
[data-devonly] { display: none; }