.type-index-wrapper {
	display: flex;
	overflow-x: auto;
	width: 100%;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scroll-behavior: auto;
	justify-content: center;
	/* center wrapper itself */
}

.nav-list {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	margin: 0;
	list-style: none;
	justify-content: flex-start;
	/* default: left-aligned for scroll */
	max-width: var(--max-width);
	/* match letter index centering */
	width: 100%;
}

@media (min-width: 768px) {
	.nav-list {
		justify-content: center;
		/* center on desktop */
	}
}


.nav-list li a {
	display: inline-block;
	padding: 0.35rem 0.6rem;
	border-radius: var(--radius);
	background: var(--card-bg);
	box-shadow: 1px 1px 0 var(--section-bg);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	line-height: 1.2;
}

.nav-list li.selected a {
	background: var(--text);
	color: #2a2a2a;
	/* darker text for contrast */
}

.nav-list a {
	color: var(--link-color);
	text-decoration: none;
	transition: color 0.2s ease;
}

.nav-list a:hover {
	color: var(--link-hover);
	text-decoration: underline;
}

.nav-list .nav-spacer {
	min-width: 1rem;
	pointer-events: none;
}

ul.index-list {
	list-style: none;
	padding: 0;
	text-align: left;
}

ul.index-list li {
	display: block;
	background: var(--card-bg);
	margin-bottom: .75rem;
	padding: .75rem 1rem;
	border-radius: var(--radius);
	box-shadow: 2px 2px 0 var(--section-bg);
	cursor: pointer;
	position: relative;
}

ul.index-list li .album-list li {
	margin-bottom: 0rem;
	padding-bottom: .5rem;
	padding-top: 0rem;
}

.album-list li div {
	margin-top: 0rem;
	font-size: .9rem;
}

.album-list {
	margin-top: .5rem;
}

.album-entry {
	content-visibility: auto;
	contain-intrinsic-size: 120px;
	/* fallback estimate */
}

html {
	scroll-padding-top: 3.5em;
	/* adjust based on header height */
}

#indexList li[id] {
	scroll-margin-top: 15em;
	/* adjust based on your sticky header height */
}

#resultsSection {
	padding-top: 1rem;
}

.letter-index-wrapper {
	display: flex;
	justify-content: center;
	overflow-x: auto;
	width: 100%;
}

.letter-index {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.4rem;
	padding: 0.5rem 1rem;
	margin: 0 auto;
	list-style: none;
	border-bottom: 1px solid #ccc;
	max-width: var(--max-width);
	/* centers content */
}

#letterIndex {
	position: sticky;
	top: 7.5em;
	/* or whatever matches your header height */
	z-index: 20;
	/* increase from 10 to ensure it's above results */
	border-bottom: 1px solid #ccc;
}

ul#letterIndex {
	display: flex;
	flex-wrap: nowrap;
	/* prevent wrapping */
	overflow-x: auto;
	/* enable horizontal scroll */
	-webkit-overflow-scrolling: touch;
	/* smooth scroll on iOS */
	scrollbar-width: thin;
	/* Firefox */
	gap: 0.4rem;
	padding: 0.5rem 1rem;
	margin: 0;
	list-style: none;
	border-bottom: 1px solid #ccc;
}

ul#letterIndex::-webkit-scrollbar {
	height: 6px;
}

ul#letterIndex::-webkit-scrollbar-thumb {
	background-color: #888;
	border-radius: 3px;
}


ul#letterIndex li {
	display: inline-block;
	background: var(--card-bg);
	padding: 0.3rem 0.5rem;
	/* reduced from 0.4rem 0.6rem */
	border-radius: var(--radius);
	box-shadow: 1px 1px 0 var(--section-bg);
	/* already subtle, keep as-is or reduce to 0.5px */
	cursor: pointer;
	font-size: 0.8rem;
	/* slightly smaller type */
	font-weight: 600;
	letter-spacing: 0.02em;
	/* tighter tracking */
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

@media (min-width: 600px) {
	ul#letterIndex li {
		padding: 0.25rem 0.4rem;
		/* tighter on desktop */
		font-size: 0.75rem;
		letter-spacing: 0.01em;
	}
}

ul#letterIndex li.selected,
ul#letterIndex li.selected a {
	background-color: var(--text);
	color: #2a2a2a;
	/* darker text for contrast */
}

ul#letterIndex a {
	color: var(--link-color);
	text-decoration: none;
	transition: color 0.2s ease;
}

ul#letterIndex a:hover {
	color: var(--link-hover);
	text-decoration: underline;
}


.letter-index-wrapper {
	display: flex;
	justify-content: center;
	overflow-x: auto;
	width: 100%;
	position: relative;
}



#indexList li[id] {
	scroll-margin-top: 5em;
}

.album-sublist,
#indexList li[id] {
	scroll-margin-top: 18em;
	/* adjust based on combined sticky header + letter bar height */
}

ul.album-sublist {
	list-style: none;
	margin-top: .5rem;
}

.expandable-name {
	white-space: nowrap;
	cursor: pointer;
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
}

.expandable-name .composer-links {
	white-space: normal;
	flex-shrink: 1;
}

.expandable-name .indicator {
	font-size: 0.9rem;
	transition: transform 0.2s ease;
}

.expandable-name.expanded .indicator {
	transform: rotate(90deg);
}