/*
 * Markets.tz (Phase 5) — data-dense components layered on top of the shared
 * design-system.css. Loaded only when the current portal is the Markets
 * platform (see functions.php::czn_enqueue_assets()).
 */

.czn-markets-hero .czn-lede { max-width: 68ch; }

.czn-markets-filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: var(--czn-space-4);
	background: var(--czn-paper-raised);
	border: 1px solid var(--czn-border);
	border-radius: var(--czn-radius-lg);
	padding: var(--czn-space-4);
	margin: var(--czn-space-5) 0;
}
.czn-markets-filter-bar label {
	display: block;
	font-size: 0.78rem;
	font-family: var(--czn-font-mono);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--czn-ink-500);
	margin-bottom: 0.3em;
}
.czn-markets-filter-bar select {
	padding: 0.5em 0.7em;
	border: 1px solid var(--czn-border);
	border-radius: var(--czn-radius);
	background: var(--czn-paper);
	color: var(--czn-ink-900);
	min-width: 11em;
	max-width: 100%;
}
@media (max-width: 620px) {
	.czn-markets-filter-bar { flex-direction: column; align-items: stretch; }
	.czn-markets-filter-bar select { width: 100%; }
}

/* Price-type badges (brief section 13) — distinct colours so the same
   commodity's farm-gate/auction/export/international prices are never
   visually mistaken for one series. */
.czn-badge-pricetype { display: inline-block; font-family: var(--czn-font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.25em 0.6em; border-radius: var(--czn-radius); margin-bottom: 0.5em; }
.czn-badge-pricetype-farm_gate     { background: #eef3e3; color: #4a6b1f; }
.czn-badge-pricetype-auction       { background: #fbeee0; color: #8a5a00; }
.czn-badge-pricetype-wholesale     { background: #e9eef8; color: #2b4c8c; }
.czn-badge-pricetype-export        { background: #f3e8f5; color: #6b2c8a; }
.czn-badge-pricetype-international { background: #e0f3f0; color: #146b5c; }
.czn-badge-pricetype-indicative    { background: var(--czn-ink-100); color: var(--czn-ink-500); }
@media (prefers-color-scheme: dark) {
	.czn-badge-pricetype-farm_gate     { background: #223018; color: #b7d98c; }
	.czn-badge-pricetype-auction       { background: #332409; color: #e3b464; }
	.czn-badge-pricetype-wholesale     { background: #1c2436; color: #9fb6e8; }
	.czn-badge-pricetype-export        { background: #2c1f34; color: #d5a6e8; }
	.czn-badge-pricetype-international { background: #123430; color: #7fd9c8; }
}

.czn-markets-series-card { margin-bottom: var(--czn-space-5); }
.czn-markets-commodity-grid .czn-commodity-card p { margin-bottom: 0; }

/* Coverage matrix: keep it scrollable rather than letting columns crush on
   mobile (brief section 49) — the wrapper already handles horizontal
   scroll; this just keeps column widths sane. */
.czn-coverage-matrix th, .czn-coverage-matrix td { white-space: nowrap; }
.czn-coverage-matrix td:first-child, .czn-coverage-matrix th:first-child { white-space: normal; min-width: 8em; }

/* Chart chrome */
.czn-chart { margin: var(--czn-space-4) 0; }
.czn-chart-svg { width: 100%; height: auto; display: block; }
.czn-chart-axis { stroke: var(--czn-border); stroke-width: 1; }
.czn-chart-axis-label { font-family: var(--czn-font-mono); font-size: 9px; fill: var(--czn-ink-500); }
.czn-chart-point { fill: var(--czn-paper); stroke-width: 2; cursor: pointer; }
.czn-chart-point { stroke: var(--czn-accent); }
.czn-chart-point:hover, .czn-chart-point:focus { r: 6; outline: none; }
.czn-chart-legend { display: flex; gap: var(--czn-space-4); margin-top: var(--czn-space-2); font-size: 0.85rem; flex-wrap: wrap; }
.czn-chart-legend-item { display: inline-flex; align-items: center; gap: 0.4em; }
.czn-chart-legend-swatch { width: 0.8em; height: 0.8em; border-radius: 2px; display: inline-block; }

/* Lightweight custom tooltip, progressively enhanced by markets-charts.js.
   Native <title> elements on each point already provide a baseline tooltip
   with zero JS and full accessibility — this is a visual upgrade only. */
.czn-chart-tooltip {
	position: fixed;
	pointer-events: none;
	background: var(--czn-ink-900);
	color: var(--czn-paper);
	font-size: 0.78rem;
	padding: 0.4em 0.6em;
	border-radius: var(--czn-radius);
	z-index: 60;
	opacity: 0;
	transition: opacity 0.1s ease;
	max-width: 220px;
}
.czn-chart-tooltip.is-visible { opacity: 1; }

.czn-tabs { display: flex; gap: var(--czn-space-2); margin-bottom: var(--czn-space-3); flex-wrap: wrap; }