.generator-keywords-map {
  display: grid;
  gap: var(--space-card-stack);
}

.generator-keywords-map__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-stack);
}

.generator-keywords-map__bar + .shell__note:empty {
  display: none;
}

.generator-keywords-map[data-filter="placed"] [data-empty] {
  display: none;
}

.generator-keywords-map__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-hair) var(--space-3);
}

.generator-keywords-map__count {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

.generator-keywords-map__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.generator-keywords-map__row {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--space-hair) var(--space-grid);
  padding-block: var(--space-row);
  border-block-start: 1px solid var(--color-border-light);
}

.generator-keywords-map__page,
.generator-keywords-map__terms {
  display: grid;
  align-content: start;
  gap: var(--space-hair);
  min-inline-size: 0;
}

.generator-keywords-map__terms {
  gap: var(--space-2);
}

.generator-keywords-map__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generator-keywords-map__address {
  overflow: hidden;
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generator-keywords-map__terms-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin: 0;
}

.generator-keywords-map__label {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

.generator-keywords-map__main,
.generator-keywords-map__supporting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  min-inline-size: 0;
  margin: 0;
}

.generator-keywords-map__marks {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.generator-keywords-map__term {
  min-inline-size: 0;
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}

.generator-keywords-map__supporting {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.generator-keywords-map__extra:not(:last-child)::after {
  content: ",";
}

.generator-keywords-map__none {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

.generator-keywords-map__rows {
  display: grid;
}

.generator-keywords-map__note {
  display: grid;
  gap: var(--space-hair);
  padding-block: var(--space-row);
  border-block-start: 1px solid var(--color-border-light);
}

.generator-keywords-map__note-text,
.generator-keywords-map__note-meta {
  margin: 0;
}

.generator-keywords-map__note-meta {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

@media (max-width: 768px) {
  .generator-keywords-map__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .generator-keywords-map__bar > * {
    flex: 1 1 100%;
  }
}