/* DepartmentTabs — understated chips in the wiki's own panel style.
   Department colour comes from the --deptab-* variables set inline by
   {{ColorPaletteStyles|Color|deptab}}; it only accents the tab that matters. */

.department-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	overflow: auto;
}

.department-tab {
	position: relative;
	display: inline-flex;
	flex: 1 1 auto;
	min-width: 0;
}

.department-tab a {
	position: relative;
	overflow: hidden;
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	padding: 0.3em 0.9em;
	font-size: 0.85rem;
	font-weight: bold;
	line-height: 1.4;
	white-space: nowrap;
	text-align: center;
	color: var(--ink);
	background-color: var(--panel);
	border: 1px solid var(--border);
	border-radius: 6px;
	transition-property: background-color, border-color;
	transition-duration: 0.15s;
}

.department-tab a:hover {
	background-color: var(--deptab-25);
	border: 1px solid var(--deptab-50);
	color: var(--ink);
	text-decoration: none;
}

.department-tab a.mw-selflink {
	background-color: var(--deptab-25) !important;
	border: 1px solid var(--deptab-50) !important;
	color: var(--ink) !important;
}

.department-tab a.mw-selflink:after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3px;
	background-color: var(--deptab-75);
}

@media (prefers-reduced-motion: reduce) {
	.department-tab a {
		transition-duration: 0s;
	}
}