.player-search[data-mode="grouped"] {
  /* Public header result controls. These do not affect page or admin searches. */
  --grouped-search-font-size: 1.3em;
  --grouped-search-name-indent: 18px;
  --grouped-search-row-padding: 4px;
  --grouped-search-row-line-height: 0.85;
  --grouped-search-name-font-size: 0.9em;
  --grouped-search-year-font-size: 0.8em;
  --grouped-search-row-gap: 9px;
  --grouped-search-year-color: #6e6e6e;
}

/* Results panel. Width and available-screen height are set in playersearch.js. */
#header .player-search[data-mode="grouped"] .autocomplete-results-2 {
  position: absolute;
  box-sizing: border-box;
  font-size: var(--grouped-search-font-size);
  background: #fff;
  overflow-y: auto;
  z-index: 9999;
}

#header .player-search[data-mode="grouped"] .autocomplete-results-2:has(.autocomplete-result) {
  border: 1px solid #ccc;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
}

/* Group titles. */
.player-search[data-mode="grouped"] .grouped-search-heading {
  padding: 4px 6px;
  font-weight: 700;
  line-height: var(--grouped-search-row-line-height);
}

.player-search[data-mode="grouped"] .grouped-search-heading a {
  color: inherit;
  text-decoration: underline;
}

/* Result rows and the clickable names. */
.player-search[data-mode="grouped"] .autocomplete-result {
  display: flex;
  align-items: baseline;
  gap: var(--grouped-search-row-gap);
  padding: var(--grouped-search-row-padding) 6px var(--grouped-search-row-padding) var(--grouped-search-name-indent);
  line-height: var(--grouped-search-row-line-height);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.player-search[data-mode="grouped"] .autocomplete-result:hover {
  background: #f0f0f0;
}

.player-search[data-mode="grouped"] .autocomplete-result.active {
  background: #eef;
}

.player-search[data-mode="grouped"] .autocomplete-result-name {
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
  font-size: var(--grouped-search-name-font-size);
  font-weight: 400;
  overflow: visible;
  line-height: inherit;
  padding-block: 2px;
  white-space: normal;
}

/* Career years at the right edge of each row. */
.player-search[data-mode="grouped"] .autocomplete-result-span {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--grouped-search-year-color);
  font-size: var(--grouped-search-year-font-size);
  font-weight: 400;
  text-align: right;
  white-space: nowrap;
}

.player-search[data-mode="grouped"] .grouped-search-gender {
  flex: 0 0 auto;
}