/**
 * Materials — Apple-style translucent surface treatments.
 *
 * Purposeful glass on structural elements only (nav, modals, sheets).
 * NOT for decorative card backgrounds — use solid --slist-surface for cards.
 *
 * Usage:
 *   <div class="slist-material">...</div>
 *   <div class="slist-material slist-material--thick">...</div>
 */

.slist-material {
	background: var(--slist-material);
	-webkit-backdrop-filter: var(--slist-blur);
	backdrop-filter: var(--slist-blur);
	border: 1px solid var(--slist-separator);
	box-shadow: var(--slist-shadow-sm);
}

.slist-material--thick {
	background: var(--slist-material-thick);
	-webkit-backdrop-filter: var(--slist-blur-thick);
	backdrop-filter: var(--slist-blur-thick);
	border-color: var(--slist-separator-medium);
	box-shadow: var(--slist-shadow-md);
}

/* Graceful degradation */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.slist-material,
	.slist-material--thick {
		background: rgba(20, 20, 20, 0.95);
	}
}