/* Only terminal names and category markers share the spectrum of their icons. */
:root {
  --terminal-rainbow: linear-gradient(105deg, #db5879 0%, #d98b43 17%, #b99c2f 33%, #4e9f80 49%, #4c91c5 65%, #a264c1 82%, #cf65a7 100%);
}

#category-list .category-button.terminal-rainbow .category-name,
.equipment-card.terminal-rainbow .card-name,
.equipment-card.terminal-rainbow .card-category,
#detail-panel.terminal-rainbow .detail-heading h3,
#detail-panel.terminal-rainbow .detail-badge,
.price-table tr.terminal-rainbow .table-item-button > span,
.price-table tr.terminal-rainbow .table-category,
.item-tooltip.terminal-rainbow h4,
.item-tooltip.terminal-rainbow .tooltip-type {
  color: #a264c1;
  font-weight: 600;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  #category-list .category-button.terminal-rainbow .category-name,
  .equipment-card.terminal-rainbow .card-name,
  .equipment-card.terminal-rainbow .card-category,
  #detail-panel.terminal-rainbow .detail-heading h3,
  #detail-panel.terminal-rainbow .detail-badge,
  .price-table tr.terminal-rainbow .table-item-button > span,
  .price-table tr.terminal-rainbow .table-category,
  .item-tooltip.terminal-rainbow h4,
  .item-tooltip.terminal-rainbow .tooltip-type {
    background-image: var(--terminal-rainbow);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

#category-list .category-button.terminal-rainbow .category-dot,
#category-list .category-button.terminal-rainbow.active::before {
  background: var(--terminal-rainbow);
}

#category-list .category-button.terminal-rainbow .category-dot {
  opacity: 1;
  box-shadow: 0 0 0 1px #a264c11f;
}

#category-list .category-button.terminal-rainbow.active::before {
  background-image: linear-gradient(180deg, #db5879 0%, #d98b43 17%, #b99c2f 33%, #4e9f80 49%, #4c91c5 65%, #a264c1 82%, #cf65a7 100%);
}

@media (forced-colors: active) {
  #category-list .category-button.terminal-rainbow .category-name,
  .equipment-card.terminal-rainbow .card-name,
  .equipment-card.terminal-rainbow .card-category,
  #detail-panel.terminal-rainbow .detail-heading h3,
  #detail-panel.terminal-rainbow .detail-badge,
  .price-table tr.terminal-rainbow .table-item-button > span,
  .price-table tr.terminal-rainbow .table-category,
  .item-tooltip.terminal-rainbow h4,
  .item-tooltip.terminal-rainbow .tooltip-type {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}