/* Group drawer: container and clickable title */
.group { margin: 10px 8px 14px; border-radius: 8px; }
.group-title{
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px; color:var(--subtext); margin:8px 6px 6px;
  text-transform:uppercase; letter-spacing:.04em;
  cursor: pointer; user-select: none;
  padding: 6px 6px;
  border-radius: 6px;
}
.group-title:focus-visible{
  outline: 2px solid #c7d2fe;
  outline-offset: 2px;
}

/* Expand/collapse container: height animation */
.group-body{
  overflow: hidden;
  transition: height .22s ease, opacity .22s ease;
  height: 0;
  opacity: 0;
}

/* Expanded state */
.group[data-open="true"] .group-body{
  height: auto; /* Let script set specific height then clear to auto */
  opacity: 1;
}

/* Hover feedback */
.group-title:hover{
  background: var(--muted);
}

/* Base: icon initial direction (pointing right) */
.group-title .chevron .icon {
  transition: transform 0.2s ease;
  transform: rotate(0deg);
  display: inline-block;
  color:#94a3b8;
}

/* Only rotate icon under current title when expanded */
.group-title[aria-expanded="true"] > .chevron .icon {
  transform: rotate(90deg);
  color:#64748b;
}

/* Optional padding and level indentation */
.group[data-level="2"] .group-title { padding-left: 16px; }
.group[data-level="3"] .group-title { padding-left: 32px; }