/*
 * Happy Tunes Songs - songlist. Builds on the Happy Tunes theme
 * (.ht-chip, .ht-btn and the --ht-* colours).
 */
.ht-content:has(.hts-songlist) { max-width: none; }

.hts-songlist { --hts-gap: 10px; margin: 0 0 1.2em; }
.hts-bar { display: flex; flex-wrap: wrap; gap: var(--hts-gap); margin-bottom: 14px; }
/* The field's frame sits on the label, so theme input styles cannot move the icon. */
.hts-songlist .hts-search {
	display: flex; align-items: center; gap: 10px; flex: 1 1 260px; margin: 0; padding: 0 14px;
	border-radius: 14px; border: 1px solid var(--ht-border2, #ccc); background: var(--ht-surface2, #fff);
}
.hts-songlist .hts-search:focus-within { border-color: var(--ht-pink, #e11d74); }
.hts-songlist .hts-search i { flex: none; color: var(--ht-mute, #888); }
.hts-songlist .hts-search input[type="search"] {
	flex: 1; width: auto; min-width: 0; margin: 0; padding: 12px 0; border: 0; border-radius: 0;
	background: transparent; box-shadow: none; outline: none; color: var(--ht-text, #222); font: inherit; font-weight: 700;
}
.hts-songlist .hts-bar select.hts-sort {
	flex: 0 0 auto; width: auto; margin: 0; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--ht-border2, #ccc);
	background: var(--ht-surface2, #fff); color: var(--ht-text, #222); font: inherit; font-weight: 700;
}

.hts-songlist .ht-chips { margin-bottom: 10px; gap: 7px; }
.hts-songlist .ht-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; font-size: 13px; text-transform: none; letter-spacing: normal; }
.hts-songlist .ht-chip[hidden] { display: none; }
.hts-chip-count { font-size: 11px; font-weight: 800; opacity: .7; }
.hts-more-tags { border-style: dashed; }
.hts-quick .ht-chip i { font-size: 12px; }

.hts-info { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; font-size: 13px; font-weight: 800; color: var(--ht-mute, #888); }
.hts-songlist .hts-reset {
	padding: 0; border: 0; background: none; color: var(--ht-pink, #e11d74); font: inherit; font-weight: 800;
	text-transform: none; letter-spacing: normal; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}

.hts-songlist .hts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ht-content .hts-list li { margin: 0; }
.hts-song {
	display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1.2fr) minmax(0, 1.6fr) 62px;
	align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px;
	background: var(--ht-surface, #fff); border: 1px solid var(--ht-border, #e5e5e5);
}
.hts-songlist.is-ready .hts-song { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1.2fr) minmax(0, 1.6fr) 62px 34px; }
.hts-song[hidden] { display: none; }
.hts-title { font-weight: 800; color: var(--ht-text, #222); overflow-wrap: anywhere; }
.hts-artist { color: var(--ht-dim, #666); font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.hts-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.hts-songlist .hts-tag {
	padding: 2px 9px; border-radius: 999px; border: 1px solid var(--ht-border2, #ccc); background: transparent;
	color: var(--ht-dim, #666); font: inherit; font-size: 11.5px; font-weight: 800; line-height: 1.5;
	text-transform: none; letter-spacing: normal; cursor: pointer;
}
.hts-songlist .hts-tag:hover { border-color: var(--ht-pink, #e11d74); color: var(--ht-text, #222); }
.hts-dur { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 13px; color: var(--ht-mute, #888); }
.hts-new {
	display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; vertical-align: 2px;
	background: var(--ht-pink, #e11d74); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.hts-songlist .hts-copy {
	display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0;
	border-radius: 10px; border: 1px solid var(--ht-border2, #ccc); background: var(--ht-surface2, #f5f5f5);
	color: var(--ht-dim, #666); cursor: pointer; transition: .15s;
}
.hts-songlist .hts-copy:hover { border-color: var(--ht-pink, #e11d74); color: var(--ht-text, #222); }
.hts-songlist .hts-copy.is-copied { background: var(--ht-pink, #e11d74); border-color: transparent; color: #fff; }

.hts-empty { margin: 16px 0; padding: 26px; text-align: center; border-radius: 16px; background: var(--ht-surface, #fff); border: 1px dashed var(--ht-border2, #ccc); color: var(--ht-dim, #666); font-weight: 700; }
.hts-showmore { display: flex; margin: 18px auto 0; }
.hts-showmore[hidden] { display: none; }

@media (max-width: 760px) {
	.hts-songlist.is-ready .hts-song,
	.hts-song {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "title dur" "artist copy" "tags tags";
		gap: 4px 10px;
	}
	.hts-title { grid-area: title; }
	.hts-artist { grid-area: artist; font-size: 13px; }
	.hts-tags { grid-area: tags; margin-top: 4px; }
	.hts-dur { grid-area: dur; }
	.hts-copy { grid-area: copy; justify-self: end; }
	.hts-tags:empty { display: none; }
}