.inventory {
  padding: 0 1em;
}

.inventory h2 {
  font-size: 1.5em;
  margin-top: 1em;
  margin-bottom: .2em;
}


.inventory h2.doc {
  margin-top: 1.5em;
  font-weight: 900;
}

.inventory-list {
  display: flex;
  gap: .5em;
  flex-wrap : wrap;
}

.inventory .item {
  background: #fff;
  border: solid 1px #777;
  padding: .1em .5em;
}

.inventory .item.locked,
.inventory .item.disabled {
  border: solid 1px #ccc;
  color: #ccc;
}


.inventory .item:not(.locked):not(.disabled) {
  cursor: pointer;
}

.tab-bar {
  border-bottom: 0.1em solid var(--clr-dark-gray);
  margin-bottom: 0.5em;
}

.tab {
  color: var(--clr-darker-gray);
  line-height: inherit;
  text-decoration: none;
  padding: 0.2rem .6em;
  font-size: 1rem;
  margin: 0 .1em;
  border: 0;
  cursor: pointer;
  display: inline-block;
}

.tab.active {
  color: black;
  border-bottom: 0.3em solid var(--clr-primary);
}