/* KICAP Sound Profile library — scoped composition preserving `sp-*` hooks. */
#kc-sp .kicap-sp-library { padding-bottom: var(--kicap-section-space); background: var(--kicap-page); color: var(--kicap-text); }

#kc-sp .kicap-sp-library__nav { display: flex; align-items: center; min-height: 46px; gap: var(--kicap-space-6); margin: 0 0 var(--kicap-space-7); border-bottom: 1px solid var(--kicap-border); color: var(--kicap-text-muted); font-size: var(--kicap-font-size-xs); font-weight: 650; }
#kc-sp .kicap-sp-library__nav a { display: inline-flex; min-height: 44px; align-items: center; border-bottom: 2px solid transparent; color: inherit; text-decoration: none; white-space: nowrap; }
#kc-sp .kicap-sp-library__nav a[aria-current="page"],
#kc-sp .kicap-sp-library__nav a:hover,
#kc-sp .kicap-sp-library__nav a:focus-visible { border-color: var(--kicap-color-accent); color: var(--kicap-text); }

#kc-sp .kicap-sp-library__header { display: flex; align-items: end; justify-content: space-between; gap: var(--kicap-space-7); padding: var(--kicap-space-7) 0; background: transparent; }
#kc-sp .kicap-sp-library__eyebrow { display: block; margin-bottom: var(--kicap-space-4); color: var(--kicap-color-accent-strong); font: 700 var(--kicap-font-size-xs) / 1 var(--kicap-font-sans); letter-spacing: .12em; text-transform: uppercase; }
#kc-sp .kicap-sp-library__header h1 { max-width: 19ch; margin: 0; color: var(--kicap-text); font: 700 clamp(2.4rem, 4.5vw, 4.25rem) / .98 var(--kicap-font-sans); letter-spacing: -.055em; }
#kc-sp .kicap-sp-library__header p { margin: var(--kicap-space-4) 0 0; color: var(--kicap-text-muted); line-height: var(--kicap-line-height-relaxed); }
#kc-sp .kicap-sp-library__header .kicap-button { flex: none; background: var(--kicap-button-primary-bg); color: var(--kicap-button-primary-text); text-decoration: none; }

#kc-sp .kicap-sp-library__toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--kicap-space-3); align-items: center; padding: var(--kicap-space-3); border: 1px solid var(--kicap-border); border-radius: var(--kicap-radius-md); background: var(--kicap-surface); }
#kc-sp .kicap-sp-library__search { position: relative; display: flex; min-width: 0; align-items: center; }
#kc-sp .kicap-sp-library__search > .kicap-icon { position: absolute; left: var(--kicap-space-4); width: 1rem; height: 1rem; color: var(--kicap-text-subtle); pointer-events: none; }
#kc-sp .kicap-sp-library__search .kicap-input { width: 100%; min-height: 44px; padding-left: 2.6rem; }
#kc-sp .kicap-sp-library__sort .kicap-select { min-width: 10rem; min-height: 44px; }
#kc-sp .kicap-sp-library__status { margin: 0; color: var(--kicap-text-subtle); font-size: var(--kicap-font-size-xs); white-space: nowrap; }
#kc-sp .kicap-sp-library__filter-open { display: none; }

#kc-sp .kicap-sp-library__active-filters { display: flex; flex-wrap: wrap; gap: var(--kicap-space-2); margin: var(--kicap-space-4) 0 var(--kicap-space-6); }
#kc-sp .kicap-sp-library__active-filters .kicap-chip { min-height: 32px; border-color: var(--kicap-border); background: var(--kicap-surface); color: var(--kicap-text-muted); }
#kc-sp .kicap-sp-library__active-filters .kicap-chip.is-active { border-color: transparent; background: var(--kicap-color-accent-subtle); color: var(--kicap-color-accent-strong); }

#kc-sp .kicap-sp-library__layout { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: var(--kicap-space-6); align-items: start; }
#kc-sp .kicap-sp-library__sidebar { position: sticky; top: var(--kicap-space-5); padding: var(--kicap-space-5); border: 1px solid var(--kicap-border); border-radius: var(--kicap-radius-md); background: var(--kicap-surface); }
#kc-sp .kicap-sp-library__sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: var(--kicap-space-3); margin-bottom: var(--kicap-space-4); color: var(--kicap-text); font-size: var(--kicap-font-size-sm); }
#kc-sp .kicap-sp-library__sidebar-head button { min-height: 32px; border: 0; background: transparent; color: var(--kicap-color-accent-strong); font: 650 var(--kicap-font-size-xs) / 1 var(--kicap-font-sans); cursor: pointer; }
#kc-sp .kicap-sp-library__filters { display: grid; gap: var(--kicap-space-2); }
#kc-sp .kicap-sp-library__filters button { display: flex; width: 100%; min-height: 40px; align-items: center; padding: var(--kicap-space-3) var(--kicap-space-4); border: 1px solid transparent; border-radius: var(--kicap-radius-sm); background: transparent; color: var(--kicap-text-muted); font: 600 var(--kicap-font-size-sm) / var(--kicap-line-height-base) var(--kicap-font-sans); text-align: left; cursor: pointer; }
#kc-sp .kicap-sp-library__filters button:hover { background: var(--kicap-surface-elevated); color: var(--kicap-text); }
#kc-sp .kicap-sp-library__filters button.is-active { border-color: var(--kicap-border); background: var(--kicap-color-accent-subtle); color: var(--kicap-color-accent-strong); }

#kc-sp .kicap-sp-library__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kicap-space-5); }
#kc-sp .kicap-sp-library__grid[aria-busy="true"] { pointer-events: none; }
#kc-sp .kicap-sp-library__skeleton { min-height: 25rem; padding: var(--kicap-space-5); border: 1px solid var(--kicap-border); border-radius: var(--kicap-radius-md); background: var(--kicap-surface); }
#kc-sp .kicap-sp-library__skeleton span { display: block; height: .8rem; margin-top: var(--kicap-space-4); border-radius: var(--kicap-radius-pill); background: var(--kicap-skeleton); }
#kc-sp .kicap-sp-library__skeleton span:first-child { height: 13rem; margin-top: 0; }
#kc-sp .kicap-sp-library__skeleton span:last-child { width: 58%; }

#kc-sp .kicap-sp-library-card { min-width: 0; }
#kc-sp .kicap-sp-library-card .sp-profile-card__body { gap: var(--kicap-space-3); }
#kc-sp .kicap-sp-library-card__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kicap-space-2); align-items: stretch; padding-top: var(--kicap-space-3); border-top: 1px solid var(--kicap-border); }
/* The legacy `.sp-profile-card button` rule absolutely positions every card
   button over the media play control. Restore normal flow only for the two
   namespaced library actions. */
#kc-sp .kicap-sp-library-card__actions .kicap-button {
	position: static;
	inset: auto;
	display: inline-flex;
	width: 100%;
	height: auto;
	min-width: 0;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	padding-inline: var(--kicap-space-3);
	border-radius: var(--kicap-radius-sm);
	font-size: var(--kicap-font-size-xs);
	transform: none;
	white-space: nowrap;
}
#kc-sp .kicap-sp-library-card__actions .kicap-button > span:not(.kicap-icon) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#kc-sp .kicap-sp-library-card__actions .kicap-button--secondary { border-color: var(--kicap-button-secondary-border); background: var(--kicap-button-secondary-bg); color: var(--kicap-button-secondary-text); }
#kc-sp .kicap-sp-library-card__actions .kicap-icon { width: 1rem; height: 1rem; }
#kc-sp .kicap-sp-library-card .sp-build-link { color: var(--kicap-text-muted); font-size: var(--kicap-font-size-xs); }

#kc-sp .kicap-sp-library__load-error,
#kc-sp .kicap-sp-library__grid > .sp-empty-state { grid-column: 1 / -1; padding: var(--kicap-space-8) var(--kicap-space-5); border: 1px dashed var(--kicap-border-strong); border-radius: var(--kicap-radius-md); background: var(--kicap-surface); color: var(--kicap-text-muted); text-align: center; }
#kc-sp .kicap-sp-library__load-error strong,
#kc-sp .kicap-sp-library__grid > .sp-empty-state strong { display: block; color: var(--kicap-text); }
#kc-sp .kicap-sp-library__load-error p,
#kc-sp .kicap-sp-library__grid > .sp-empty-state p { margin: var(--kicap-space-3) 0 var(--kicap-space-5); }

#kc-sp .kicap-sp-library__pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--kicap-space-2); margin-top: var(--kicap-space-7); }
#kc-sp .kicap-sp-library__pagination button { min-width: 44px; min-height: 44px; padding: var(--kicap-space-3); border: 1px solid var(--kicap-border); border-radius: var(--kicap-radius-sm); background: var(--kicap-surface); color: var(--kicap-text); font: 650 var(--kicap-font-size-sm) / 1 var(--kicap-font-sans); cursor: pointer; }
#kc-sp .kicap-sp-library__pagination button:hover:not([disabled]) { border-color: var(--kicap-border-strong); background: var(--kicap-surface-elevated); }
#kc-sp .kicap-sp-library__pagination button.is-active { border-color: transparent; background: var(--kicap-color-accent-subtle); color: var(--kicap-color-accent-strong); }

#kc-sp .kicap-sp-library__share-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--kicap-space-5); margin-top: var(--kicap-section-space); padding: var(--kicap-space-6); border: 1px solid var(--kicap-border); border-radius: var(--kicap-radius-md); background: var(--kicap-surface); }
#kc-sp .kicap-sp-library__share-cta strong { color: var(--kicap-text); }
#kc-sp .kicap-sp-library__share-cta p { margin: var(--kicap-space-2) 0 0; color: var(--kicap-text-muted); font-size: var(--kicap-font-size-sm); }
#kc-sp .kicap-sp-library__share-cta .kicap-button { flex: none; text-decoration: none; }

#kc-sp .kicap-sp-library__compare-tray { position: sticky; z-index: var(--kicap-z-sticky); bottom: var(--kicap-space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--kicap-space-4); margin-top: var(--kicap-space-6); padding: var(--kicap-space-3); border: 1px solid var(--kicap-border-strong); border-radius: var(--kicap-radius-md); background: var(--kicap-surface-elevated); box-shadow: var(--kicap-shadow-elevated); }
#kc-sp .kicap-sp-library__compare-slots { display: grid; min-width: 0; flex: 1 1 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kicap-space-3); }
#kc-sp .kicap-sp-library__compare-slot { display: grid; min-width: 0; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: var(--kicap-space-3); align-items: center; min-height: 44px; padding: var(--kicap-space-2) var(--kicap-space-3); border: 1px solid var(--kicap-border); border-radius: var(--kicap-radius-sm); background: var(--kicap-surface); }
#kc-sp .kicap-sp-library__compare-slot.is-empty { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; grid-template-columns: none; color: var(--kicap-text-subtle); }
#kc-sp .kicap-sp-library__compare-slot img { width: 2.5rem; height: 2.5rem; border-radius: var(--kicap-radius-sm); object-fit: cover; }
#kc-sp .kicap-sp-library__compare-slot > div { min-width: 0; }
#kc-sp .kicap-sp-library__compare-slot b { display: block; color: var(--kicap-color-accent-strong); font-size: var(--kicap-font-size-xs); }
#kc-sp .kicap-sp-library__compare-slot strong { display: block; overflow: hidden; color: var(--kicap-text); font-size: var(--kicap-font-size-xs); text-overflow: ellipsis; white-space: nowrap; }
#kc-sp .kicap-sp-library__compare-slot .kicap-icon-button { width: 2.75rem; min-width: 2.75rem; height: 2.75rem; min-height: 2.75rem; }
#kc-sp .kicap-sp-library__compare-tray > .kicap-button { flex: none; }
#kc-sp .kicap-sp-library__compare-stage:empty { display: none; }

#spLibraryFilterDrawer .kicap-drawer__panel { border-color: var(--kicap-border); background: var(--kicap-surface); color: var(--kicap-text); }
#spLibraryFilterDrawer .kicap-drawer__header,
#spLibraryFilterDrawer .kicap-drawer__footer { border-color: var(--kicap-border); }

@media (max-width: 1023px) {
	#kc-sp .kicap-sp-library__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	#kc-sp .kicap-sp-library__nav { gap: var(--kicap-space-5); margin-inline: calc(var(--kicap-container-gutter) * -1); padding-inline: var(--kicap-container-gutter); overflow-x: auto; white-space: nowrap; }
	#kc-sp .kicap-sp-library__header { display: block; padding-top: var(--kicap-space-6); }
	#kc-sp .kicap-sp-library__header h1 { font-size: clamp(2.25rem, 12vw, 3.4rem); }
	#kc-sp .kicap-sp-library__header .kicap-button { margin-top: var(--kicap-space-5); }
	#kc-sp .kicap-sp-library__toolbar { grid-template-columns: minmax(0, 1fr) auto; }
	#kc-sp .kicap-sp-library__status { display: none; }
	#kc-sp .kicap-sp-library__sort { grid-column: 1 / -1; }
	#kc-sp .kicap-sp-library__sort .kicap-select { width: 100%; }
	#kc-sp .kicap-sp-library__filter-open { display: inline-flex; min-width: 44px; min-height: 44px; padding-inline: var(--kicap-space-3); }
	#kc-sp .kicap-sp-library__filter-open span { display: none; }
	#kc-sp .kicap-sp-library__active-filters,
	#kc-sp .kicap-sp-library__sidebar { display: none; }
	#kc-sp .kicap-sp-library__layout { display: block; }
	#kc-sp .kicap-sp-library__grid { grid-template-columns: 1fr; }
	#kc-sp .kicap-sp-library__share-cta { display: block; }
	#kc-sp .kicap-sp-library__share-cta .kicap-button { width: 100%; margin-top: var(--kicap-space-5); }
	#kc-sp .kicap-sp-library__compare-tray { align-items: stretch; flex-direction: column; bottom: var(--kicap-space-2); }
	#kc-sp .kicap-sp-library__compare-slots { gap: var(--kicap-space-2); }
	#kc-sp .kicap-sp-library__compare-slot { grid-template-columns: minmax(0, 1fr) auto; }
	#kc-sp .kicap-sp-library__compare-slot img { display: none; }
	#kc-sp .kicap-sp-library__compare-tray > .kicap-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) { #kc-sp .kicap-sp-library * { scroll-behavior: auto; } }