/*
 * plugins/generic/articleStats/styles/stats.css
 *
 * "Article metrics" block and its 12-month trend chart.
 *
 * Series colours are categorical slots 1 and 2 of the reference palette, validated
 * against a white surface: adjacent CVD ΔE 24.7 (protan), normal-vision ΔE 33.6,
 * both ≥ 3:1 contrast on white. Identity is never colour alone — there is a legend,
 * the tooltip names each series, and a data table sits under the chart.
 */

.asx-root,
.article_stats {
	--asx-views: #2a78d6;      /* categorical slot 1 — blue */
	--asx-downloads: #eb6834;  /* categorical slot 2 — orange */
	--asx-ink: #1f1f1f;
	--asx-muted: #6b6b6b;
	--asx-grid: #e6e6e6;
	--asx-axis: #c9c9c9;
	--asx-surface: #ffffff;
}

/* ---------- totals ---------- */

.article_stats .asx-totals {
	margin: 0;
}

.article_stats .asx-total {
	display: block;
}

.article_stats .asx-k {
	color: var(--asx-muted);
}

.article_stats .asx-total b {
	font-weight: 700;
}

/* ---------- chart ---------- */

.asx {
	margin: 10px 0 0;
	padding: 0;
}

.asx-cap {
	font-size: 12px;
	color: var(--asx-muted);
	margin: 0 0 6px;
}

.asx-legend {
	list-style: none;
	margin: 0 0 4px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	font-size: 12px;
	color: var(--asx-ink);
}

.asx-legend li {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 0;
	border: 0;
	line-height: 1.4;
}

.asx-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: 0 0 9px;
}

.asx-dot-views { background: var(--asx-views); }
.asx-dot-downloads { background: var(--asx-downloads); }

.asx-plot {
	position: relative;
}

.asx-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* recessive grid and axes */
.asx-grid { stroke: var(--asx-grid); stroke-width: 1; }
.asx-axis { stroke: var(--asx-axis); stroke-width: 1; }

.asx-ytick,
.asx-xtick {
	fill: var(--asx-muted);
	font-size: 8px;
	font-family: inherit;
}

.asx-ytick { text-anchor: end; }
.asx-xtick { text-anchor: middle; }

/* The first and last ticks sit on the plot edges; centring them would hang half the
 * label outside the chart, where the surrounding column clips it. */
.asx-xtick-start { text-anchor: start; }
.asx-xtick-end { text-anchor: end; }

/* 2px lines, thin marks */
.asx-line {
	fill: none;
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.asx-line-views { stroke: var(--asx-views); }
.asx-line-downloads { stroke: var(--asx-downloads); }

/* a surface ring so overlapping markers stay separable */
.asx-pt {
	stroke: var(--asx-surface);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

.asx-pt-views { fill: var(--asx-views); }
.asx-pt-downloads { fill: var(--asx-downloads); }

.asx-cross {
	stroke: var(--asx-axis);
	stroke-width: 1;
	stroke-dasharray: 2 2;
	vector-effect: non-scaling-stroke;
}

.asx-hit {
	fill: transparent;
	cursor: crosshair;
}

.asx-hit:focus {
	outline: none;
}

.asx-hit:focus-visible {
	outline: 2px solid var(--asx-views);
	outline-offset: -1px;
}

/* ---------- tooltip ---------- */

.asx-tip {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	background: var(--asx-surface);
	border: 1px solid var(--asx-grid);
	border-radius: 3px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
	padding: 5px 8px;
	font-size: 12px;
	line-height: 1.45;
	white-space: nowrap;
	pointer-events: none;
	z-index: 5;
}

.asx-tip[hidden] { display: none; }

.asx-tip b {
	display: block;
	font-weight: 700;
	color: var(--asx-ink);
}

/* Text wears text tokens; the coloured dot beside it carries identity. */
.asx-tip .asx-tv,
.asx-tip .asx-td {
	display: flex;
	align-items: center;
	gap: 5px;
	color: var(--asx-muted);
}

.asx-tip .asx-tv::before,
.asx-tip .asx-td::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: 0 0 8px;
}

.asx-tip .asx-tv::before { background: var(--asx-views); }
.asx-tip .asx-td::before { background: var(--asx-downloads); }

/* ---------- data table ---------- */

.asx-table {
	margin-top: 8px;
	font-size: 12px;
}

.asx-table summary {
	cursor: pointer;
	color: var(--asx-muted);
}

.asx-table table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 6px;
}

.asx-table th,
.asx-table td {
	padding: 3px 4px;
	border-bottom: 1px solid var(--asx-grid);
	text-align: right;
	font-weight: 400;
}

.asx-table thead th {
	color: var(--asx-muted);
	font-weight: 700;
}

.asx-table th[scope="row"] {
	text-align: left;
	white-space: nowrap;
}

/* ---------- dark mode ----------
 *
 * Deliberately NOT keyed to `prefers-color-scheme`. The OJS default theme has no dark
 * mode — the article page is white whatever the reader's OS is set to — so flipping
 * these tokens on an OS preference puts near-white text and dark gridlines on a white
 * page. (That is exactly what happened on first deploy.) The steps below are kept for
 * the `data-theme="dark"` scope only, so they apply if the journal ever ships a dark
 * theme that sets that attribute, and never before.
 */

:root[data-theme="dark"] .article_stats {
	--asx-views: #3987e5;
	--asx-downloads: #d95926;
	--asx-ink: #f0efec;
	--asx-muted: #c3c2b7;
	--asx-grid: #343432;
	--asx-axis: #4a4a47;
	--asx-surface: #1a1a19;
}

/* ---------- forced colours / print: fall back to dash patterns ---------- */

@media (forced-colors: active) {
	.asx-line-views { stroke: CanvasText; }
	.asx-line-downloads { stroke: CanvasText; stroke-dasharray: 4 3; }
	.asx-dot-downloads { outline: 1px dashed CanvasText; }
}