/**
 * Market Moves — the /market-moves/ feed and the home-page widget.
 *
 * A timeline: each move is a dated row with a coloured type tag, the project it
 * concerns, and an old -> new delta where one exists. Reads like a changelog.
 */

/* ---- header stats ------------------------------------------------------ */
.di-movestats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-8);
	margin-top: var(--sp-6);
}
.di-movestat { display: flex; flex-direction: column; gap: 2px; }
.di-movestat__value {
	font-family: var(--font-mono);
	font-size: var(--fs-h3, 1.4rem);
	line-height: 1.1;
	color: var(--ink);
}
.di-movestat__label { color: var(--text-muted); }

/* ---- type filter ------------------------------------------------------- */
.di-movefilter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: var(--sp-8) 0 var(--sp-6);
}
.di-movefilter .di-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border: 1px solid var(--hairline);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink);
	font-size: var(--fs-sm, .9rem);
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.di-movefilter .di-chip:hover { border-color: var(--accent); }
.di-movefilter .di-chip--on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* ---- feed -------------------------------------------------------------- */
.di-movefeed { margin-top: var(--sp-4); }
.di-movemonth { margin-bottom: var(--sp-8); }
.di-movemonth__label {
	color: var(--text-muted);
	padding-bottom: var(--sp-2);
	border-bottom: 1px solid var(--hairline);
	margin-bottom: var(--sp-4);
}
.di-movelist { list-style: none; margin: 0; padding: 0; }

.di-move {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: var(--sp-4);
	padding: var(--sp-4) 0;
	border-bottom: 1px solid var(--hairline);
}
.di-move:last-child { border-bottom: 0; }
.di-move__date {
	font-family: var(--font-mono);
	font-size: var(--fs-sm, .9rem);
	color: var(--text-muted);
	padding-top: 2px;
	white-space: nowrap;
}
.di-move__body { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.di-move__tag { align-self: flex-start; }
.di-move__line { margin: 0; font-size: 1.02rem; }
.di-move__project { color: var(--ink); font-weight: 600; text-decoration: none; }
.di-move__project:hover { color: var(--accent); }
.di-move__island {
	color: var(--text-muted);
	font-weight: 400;
	font-size: var(--fs-sm, .9rem);
}
.di-move__island::before { content: "·"; margin: 0 6px; color: var(--hairline); }
.di-move__delta {
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-family: var(--font-mono);
	font-size: var(--fs-sm, .9rem);
}
.di-move__old { color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.di-move__arrow { color: var(--text-muted); }
.di-move__new { color: var(--ink); font-weight: 600; }
.di-move--price_cut .di-move__new { color: var(--positive); }
.di-move--price_up .di-move__new { color: var(--caution); }
.di-move__note { margin: 0; color: var(--text-muted); font-size: var(--fs-sm, .9rem); max-width: 60ch; }

/* Verdict tag: a dark, distinct chip since there is no ink badge tone. */
.di-badge--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---- pagination -------------------------------------------------------- */
.di-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	justify-content: center;
	margin-top: var(--sp-10, 3rem);
}
.di-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	padding: 8px 12px;
	border: 1px solid var(--hairline);
	border-radius: 8px;
	background: var(--surface);
	color: var(--ink);
	text-decoration: none;
	font-size: var(--fs-sm, .9rem);
}
.di-pagination .page-numbers:hover { border-color: var(--accent); }
.di-pagination .page-numbers.current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.di-pagination .page-numbers.dots { border: 0; background: transparent; }

/* ---- home widget ------------------------------------------------------- */
.di-moveswidget { margin: 0; }
.di-moveswidget .di-movelist { margin-top: var(--sp-4); }
.di-moveswidget__foot { margin-top: var(--sp-6); }

/* ---- mobile ------------------------------------------------------------ */
@media (max-width: 600px) {
	.di-move {
		grid-template-columns: 1fr;
		gap: 6px;
	}
	.di-move__date { order: -1; padding-top: 0; }
	.di-movestats { gap: var(--sp-6); }
	.di-movestat__value { font-size: 1.2rem; }
}