/**
 * plugins/generic/articleStats/css/articleStats.css
 *
 * Badge sits at the right edge of the article title. The script wraps the
 * title's own content in .articleStats-title-text so inline markup keeps
 * laying out inline while the title becomes a flex row.
 */

.articleStats-badge {
	display: inline-flex;
	flex: 0 0 auto;
	gap: 14px;
	align-items: center;
	color: #6b7280;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	white-space: nowrap;
}

.articleStats-stat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	cursor: default;
}

.articleStats-badge svg {
	flex: 0 0 auto;
}

.articleStats-title-host {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.articleStats-title-host > .articleStats-title-text,
.articleStats-title-host > a {
	flex: 1 1 auto;
	min-width: 0;
}

/* Article page: counters at the top of the details column (jsmsci layout). */
.articleStats-detail-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin: 8px 0 12px;
	color: #4b5563;
	font-size: 0.88rem;
	line-height: 1.5;
}

.articleStats-detail-meta .articleStats-stat {
	gap: 5px;
	background: #f3f4f6;
	color: #1f2937;
	padding: 4px 10px;
	border-radius: 6px;
	font-weight: 500;
}

.articleStats-detail-meta .articleStats-views svg {
	stroke: #2563eb;
}

.articleStats-detail-meta .articleStats-downloads svg {
	stroke: #16a34a;
}

.articleStats-detail-meta .articleStats-views .articleStats-count::after {
	content: " Views";
}

.articleStats-detail-meta .articleStats-downloads .articleStats-count::after {
	content: " Downloads";
}

/* Listing meta row: pages, counters and DOI below the authors. */
.obj_article_summary .sm_meta_row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
	margin-top: 6px;
	font-size: 0.8125rem;
	color: #56656f;
}

.obj_article_summary .meta .authors {
	padding-right: 0;
}

.obj_article_summary .sm_meta_row .pages {
	position: static;
	top: auto;
	right: auto;
	line-height: inherit;
	color: #56656f;
}

.sm_vc_item {
	display: inline-flex;
	align-items: center;
}

.sm_vc_item:empty {
	display: none;
}

.sm_vc_item .articleStats-badge {
	margin: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* Listing counters use the same highlighted pills as the abstract page. */
.obj_article_summary .sm_meta_row .articleStats-stat {
	gap: 5px;
	background: #f3f4f6;
	color: #1f2937;
	padding: 3px 9px;
	border-radius: 6px;
	font-weight: 500;
}

.obj_article_summary .sm_meta_row .articleStats-views svg {
	stroke: #2563eb;
}

.obj_article_summary .sm_meta_row .articleStats-downloads svg {
	stroke: #16a34a;
}

.obj_article_summary .sm_meta_row .articleStats-views .articleStats-count::after {
	content: " Views";
}

.obj_article_summary .sm_meta_row .articleStats-downloads .articleStats-count::after {
	content: " Downloads";
}

.sm_doi {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
}

.sm_doi a {
	color: #3f4e58;
	overflow-wrap: anywhere;
}

.sm_doi a:hover,
.sm_doi a:focus {
	color: #134e62;
	text-decoration: underline;
}

.sm_doi_label {
	display: inline-block;
	padding: 1px 6px;
	background: #e0e8eb;
	border-radius: 4px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.5;
	color: #0d3644;
}

@media (max-width: 768px) {
	.articleStats-title-host {
		flex-wrap: wrap;
	}

	.articleStats-badge {
		gap: 10px;
		font-size: 13px;
	}
}