.mcch-container {
  background: var(--mcch-bg, #111);
  padding: 8px 0;
  font-family: inherit;
}

.mcch-list,
.mcch-children {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.mcch-item { margin: 0; }

.mcch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: var(--mcch-fg, #ddd);
}

.mcch-row:hover .mcch-link { text-decoration: underline; }

.mcch-link {
  flex: 1;
  color: var(--mcch-fg, #ddd);
  text-decoration: none;
}

.mcch-count {
  color: var(--mcch-count, #fff); /* conteggio bianco */
  margin-left: 4px;
}

.mcch-toggle {
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  outline: none;
}

.mcch-placeholder {
  width: 20px; height: 20px;
}

.mcch-chevron {
  width: 12px;
  height: 12px;
  display: inline-block;
  transform: rotate(0deg);
  transition: transform .2s ease;
  /* caret: piccolo triangolo usando bordo */
  border-right: 2px solid var(--mcch-accent, #e6004c);
  border-bottom: 2px solid var(--mcch-accent, #e6004c);
  transform-origin: 50% 50%;
  rotate: -45deg; /* freccia verso destra */
}

.mcch-toggle[aria-expanded="true"] .mcch-chevron {
  rotate: 45deg; /* freccia verso il basso */
}

.mcch-item[aria-expanded="true"] > .mcch-row {
  background: color-mix(in srgb, var(--mcch-accent, #e6004c) 12%, transparent);
}

/* nested list spacing */
.mcch-children { padding-left: 22px; }

/* collapsed handling (for browsers moderni + progressive) */
.mcch-children.collapsed[hidden] { display: none; }