/*
 * Market share bar — styles for the block emitted by {echo:sc_share_bar} and
 * [sc_share_bar].
 *
 * Defaults follow the client mockup on the site's dark green background: a
 * tall flat bar whose segments run from a near-white mint for the largest
 * coin down to the brand green for the smallest and for "Other", and a legend
 * in white Inter with no rules between rows.
 *
 * Theming: set any of the public custom properties on the Bricks section (or
 * higher) that contains the block and they cascade in; the block reads them
 * through the private --_ms-* aliases below so its defaults never win over a
 * value set on an ancestor.
 *
 *   --market-share-light       fallback segment colour when the inline one is missing
 *   --market-share-other       fallback "Other" colour when the inline one is missing
 *   --market-share-track       bar background behind rounding gaps
 *   --market-share-height      bar height
 *   --market-share-radius      bar corner radius
 *   --market-share-fg          legend text colour
 *   --market-share-muted       source line colour
 *   --market-share-rule        hairline between legend rows (transparent by default)
 *   --market-share-font-family legend font
 *   --market-share-font-size   legend font size
 *   --market-share-row-gap     vertical padding of each legend row
 *
 * Segment colours come from the plugin's palette (see class-sc-share-bar.php,
 * filter `sc_share_palette`) as an inline --market-share-color per segment
 * and swatch; --market-share-i (0-based index) is also present for custom CSS.
 */

.market-share {
	--_ms-light: var(--market-share-light, #e7f0ec);
	--_ms-other: var(--market-share-other, #42806c);
	--_ms-track: var(--market-share-track, rgba(255, 255, 255, 0.08));
	--_ms-height: var(--market-share-height, 40px);
	--_ms-radius: var(--market-share-radius, 3px);
	--_ms-fg: var(--market-share-fg, #ffffff);
	--_ms-muted: var(--market-share-muted, rgba(255, 255, 255, 0.62));
	--_ms-rule: var(--market-share-rule, transparent);
	--_ms-font-family: var(--market-share-font-family, Inter, system-ui, -apple-system, "Segoe UI", sans-serif);
	--_ms-font-size: var(--market-share-font-size, 15px);
	--_ms-row-gap: var(--market-share-row-gap, 0.6em);

	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	color: var(--_ms-fg);
	font-family: var(--_ms-font-family);
}

.market-share *,
.market-share *::before,
.market-share *::after {
	box-sizing: inherit;
}

/* ---- Bar ------------------------------------------------------------- */

.market-share__bar {
	display: flex;
	width: 100%;
	height: var(--_ms-height);
	border-radius: var(--_ms-radius);
	overflow: hidden;
	background: var(--_ms-track);
}

.market-share__segment {
	/* Width comes from the inline flex-basis. Grow/shrink absorb the small
	   rounding remainder so the bar always fills exactly. */
	flex: 1 1 auto;
	min-width: 0;
	display: block;
	height: 100%;
	transition: flex-basis 400ms ease;
}

/* ---- Colour scale ---------------------------------------------------- */

/* Each segment and swatch carries an inline --market-share-color chosen by
   the plugin from the palette (lightest for the largest coin, brand green
   for "Other"; filter `sc_share_palette`). The fallbacks below only apply to
   hand-built markup that omits the inline property. */
.market-share__segment,
.market-share__swatch {
	background: var(--market-share-color, var(--_ms-light));
}

.market-share__segment--other,
.market-share__swatch--other {
	background: var(--market-share-color, var(--_ms-other));
}

/* ---- Legend ---------------------------------------------------------- */

.market-share__legend {
	width: 100%;
	margin: 1.25em 0 0;
	border-collapse: collapse;
	border-spacing: 0;
	color: var(--_ms-fg);
	font-size: var(--_ms-font-size);
	line-height: 1.3;
	table-layout: auto;
}

/* Header row exists for screen readers only. */
.market-share__head,
.market-share__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.market-share__row > td {
	padding: var(--_ms-row-gap) 0.5em;
	vertical-align: middle;
	border: 0;
	background: transparent;
	color: var(--_ms-fg);
	font-weight: 400;
}

.market-share__row + .market-share__row > td {
	border-top: 1px solid var(--_ms-rule);
}

.market-share__swatch-cell {
	width: 1%;
	padding-left: 0 !important;
	padding-right: 0.9em !important;
}

.market-share__swatch {
	display: block;
	width: 12px;
	height: 12px;
	border-radius: 2px;
}

/* Symbol hugs its text so the issuer sits right next to it, as in the mockup. */
.market-share__symbol {
	width: 1%;
	padding-inline-end: 0.9em !important;
	font-weight: 700;
	white-space: nowrap;
}

.market-share__issuer {
	width: auto;
}

.market-share__supply,
.market-share__share {
	width: 1%;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.market-share__share {
	padding-inline-start: 1.5em !important;
	padding-right: 0 !important;
}

/* ---- Source line ----------------------------------------------------- */

.market-share__source {
	margin: 1em 0 0;
	font-size: 0.8em;
	color: var(--_ms-muted);
}

/* ---- Stale ----------------------------------------------------------- */

.market-share--stale .market-share__bar {
	opacity: 0.65;
	filter: saturate(0.6);
}

.market-share--stale .market-share__source::after {
	content: " (delayed)";
}

/* ---- Responsive ------------------------------------------------------ */

@media (max-width: 480px) {
	.market-share {
		--_ms-font-size: var(--market-share-font-size, 14px);
		--_ms-height: var(--market-share-height, 28px);
	}

	.market-share__row > td {
		padding: var(--_ms-row-gap) 0.35em;
	}

	.market-share__issuer {
		overflow-wrap: anywhere;
	}
}

/* ---- Motion ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.market-share__segment {
		transition: none;
	}
}