/* v1597 startup guard.
   These selectors are cross-feature primitives despite living in
   13-search-head-analytics.css in the canonical v1584 cascade.
   Stats and mobile Chronicle render them before Search CSS is requested.
   Keep this block byte-for-byte equivalent in declarations to the canonical
   source; the full source may still lazy-load later for Search. */
.artist-chart-mode-switch {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: var(--nuam-radius-xl);
  border: 1px solid var(--accent-primary-border-faint);
  background: var(--surface-panel);
  background-image: var(--grain-bg);
  background-size: 20px 20px;
  background-blend-mode: overlay;
  box-shadow: 0 10px 28px var(--shadow-color-faint);
}

.artist-chart-mode-btn {
  appearance: none;
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--nuam-radius-lg);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--app-font-family);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.artist-chart-mode-btn:hover,
.artist-chart-mode-btn:focus-visible {
  color: var(--text-primary);
  border-color: var(--state-hover-accent-border);
  background: var(--accent-primary-bg-faint);
  outline: none;
}

.artist-chart-mode-btn.is-active {
  color: var(--text-primary);
  border-color: var(--accent-primary-border-emphasis);
  background: var(--state-selected-bg);
  box-shadow: inset 0 1px 0 var(--border-subtle);
}