/* ------------------------------------------------------------------ *
 * Icon layer -- meta pill icons and filter-bar leading icons.
 * Inline SVGs, Lucide-style (stroked, currentColor). No external deps.
 * ------------------------------------------------------------------ */

/* Meta pill icons -- 12 x 12, sits left of the label. Inherits the
   pill currentColor so it shifts from teal-tinted to white on hover. */
.mcs-card-meta__icon {
	display: inline-flex;
	align-items: center;
	align-self: center;
	flex-shrink: 0;
	opacity: 0.7;
	line-height: 0;
}

.mcs-card-meta__pill:hover .mcs-card-meta__icon {
	opacity: 1;
}

/* Filter bar leading icons -- 16 x 16, absolutely positioned on the
   left edge of .mcs-filter (position:relative). The select gets extra
   left padding to clear the icon. Same pattern as .mcs-filter__chevron. */
.mcs-filter__icon {
	position: absolute;
	left: 0.875rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--global-palette1);
	pointer-events: none;
	display: flex;
	align-items: center;
	z-index: 1;
	opacity: 0.8;
}

/* Shift select text right when an icon is present. */
.mcs-filter:has(.mcs-filter__icon) .mcs-filter__select {
	padding-left: 2.25rem;
}

@media (max-width: 600px) {
	.mcs-filter:has(.mcs-filter__icon) .mcs-filter__select {
		padding-left: 2.5rem;
	}
}

/* Hide pill icons on 2-col phone grid to avoid overflow on narrow cards. */
@media (max-width: 600px) {
	.mcs-card-meta__icon {
		display: none;
	}
}