/**
 * SC Market Data — Stablecoin Pulse styles.
 *
 * Four stat tiles in a responsive grid. Everything a theme is likely to want
 * to change is a custom property on `.pulse`; override them in Bricks'
 * custom CSS or a theme stylesheet:
 *
 *   .pulse { --pulse-tile-bg: #000; --pulse-up: #3fb950; }
 *
 * Descendant rules are scoped under `.pulse` so they win over Bricks'
 * defaults for blocks (flex columns at 100% width) when the manual build
 * uses Bricks elements with these classes, regardless of stylesheet order.
 *
 * Markup (see .docs/bricks/pulse.md), emitted by {echo:sc_pulse} / [sc_pulse]:
 *   section.pulse[.pulse--stale]
 *     .pulse__grid
 *       .pulse__tile.pulse__tile--supply > .pulse__label, .pulse__value, .pulse__sub
 *       .pulse__tile.pulse__tile--growth[data-direction] > .pulse__label,
 *           .pulse__value-row > .pulse__arrow, .pulse__value[data-direction]
 *           .pulse__spark > svg.sc-sparkline (optional)
 *       .pulse__tile.pulse__tile--usdt   > .pulse__label, .pulse__value
 *       .pulse__tile.pulse__tile--usdc   > .pulse__label, .pulse__value
 *
 * Direction colour and the arrow glyph key on data-direction="up|down". Both
 * the growth tile and its value carry data-sc-dir, so sc-live.js re-sets both
 * attributes on every poll and they never disagree. The tile-level rules are
 * the primary colouring; the value-level rules below are a fallback for
 * hand-built markup that sets data-direction on the value only.
 */

.pulse {
	/* Theme hooks. Defaults: white cards, the site's dark text (#101215) and
	   primary green (#153A33) for "up"; the site has no dark cards. */
	--pulse-bg: transparent;
	--pulse-tile-bg: #ffffff;
	--pulse-tile-border: 1px solid rgba(16, 18, 21, 0.08);
	--pulse-tile-shadow: 0 1px 2px rgba(16, 18, 21, 0.04);
	--pulse-fg: #101215;
	--pulse-muted: rgba(16, 18, 21, 0.6);
	--pulse-up: #153a33;
	--pulse-down: #b42318;
	--pulse-gap: 1rem;
	--pulse-radius: 12px;
	--pulse-font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	--pulse-value-size: clamp(1.75rem, 3vw, 2.5rem);

	box-sizing: border-box;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	background: var(--pulse-bg);
	color: var(--pulse-fg);
	font-family: var(--pulse-font-family);
	line-height: 1.3;
}

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

/* ---------------------------------------------------------------------------
 * Grid: 1 column, 2 from 560px, 4 from 1024px
 * ------------------------------------------------------------------------ */

.pulse .pulse__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pulse-gap);
	width: 100%;
	margin: 0;
	padding: 0;
}

@media (min-width: 560px) {
	.pulse .pulse__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.pulse--grid .pulse__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------------------
 * Split layout (footer): three small tiles stacked on the left, the growth
 * tile spanning the full height on the right with the sparkline stretched.
 * Below 560px it falls back to the single column above in DOM order.
 * ------------------------------------------------------------------------ */

@media (min-width: 560px) {
	.pulse--split .pulse__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(3, minmax(0, auto));
	}

	.pulse--split .pulse__tile--supply {
		grid-column: 1;
		grid-row: 1;
	}

	.pulse--split .pulse__tile--usdt {
		grid-column: 1;
		grid-row: 2;
	}

	.pulse--split .pulse__tile--usdc {
		grid-column: 1;
		grid-row: 3;
	}

	.pulse--split .pulse__tile--growth {
		grid-column: 2;
		grid-row: 1 / span 3;
	}

	.pulse--split .pulse__tile--growth .pulse__value {
		font-size: calc(var(--pulse-value-size) * 1.25);
	}

	/* Let the sparkline take all remaining height of the tall tile. */
	.pulse--split .pulse__tile--growth .pulse__spark {
		display: flex;
		flex: 1 1 auto;
		min-height: 80px;
		margin-top: 1rem;
	}

	.pulse--split .pulse__tile--growth .pulse__spark svg {
		width: 100%;
		height: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * Columns layout: supply and growth stacked on the left, the two share
 * tiles stacked on the right. Single column in DOM order below 560px.
 * ------------------------------------------------------------------------ */

@media (min-width: 560px) {
	.pulse--columns .pulse__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(2, minmax(0, 1fr));
	}

	.pulse--columns .pulse__tile--supply {
		grid-column: 1;
		grid-row: 1;
	}

	.pulse--columns .pulse__tile--growth {
		grid-column: 1;
		grid-row: 2;
	}

	.pulse--columns .pulse__tile--usdt {
		grid-column: 2;
		grid-row: 1;
	}

	.pulse--columns .pulse__tile--usdc {
		grid-column: 2;
		grid-row: 2;
	}
}

/* ---------------------------------------------------------------------------
 * Tile
 * ------------------------------------------------------------------------ */

.pulse .pulse__tile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 1.25rem 1.375rem;
	border: var(--pulse-tile-border);
	border-radius: var(--pulse-radius);
	background: var(--pulse-tile-bg);
	box-shadow: var(--pulse-tile-shadow);
	color: var(--pulse-fg);
}

/* Small uppercase label; same spec as the ticker label (600, 0.28px tracking). */
.pulse .pulse__label {
	display: block;
	margin: 0;
	color: var(--pulse-muted);
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.28px;
	text-transform: uppercase;
}

.pulse .pulse__value {
	display: block;
	margin: 0;
	color: inherit;
	font-size: var(--pulse-value-size);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pulse .pulse__sub {
	display: block;
	margin: 0;
	color: var(--pulse-muted);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * Growth tile: arrow + figure on one row, colour keyed on data-direction
 * ------------------------------------------------------------------------ */

.pulse .pulse__value-row {
	display: inline-flex;
	flex-direction: row;
	align-items: baseline;
	gap: 0.3em;
	margin: 0;
	font-size: var(--pulse-value-size);
	line-height: 1.1;
}

.pulse .pulse__value-row .pulse__value {
	display: inline-block;
	font-size: 1em;
}

.pulse .pulse__arrow {
	display: inline-block;
	margin: 0;
	font-size: 0.55em;
	line-height: 1;
}

.pulse .pulse__arrow::before {
	content: "\25B2"; /* ▲ */
}

/* Tile-level direction (set at render time). */
.pulse .pulse__tile[data-direction="up"] .pulse__value,
.pulse .pulse__tile[data-direction="up"] .pulse__arrow,
.pulse .pulse__tile[data-direction="up"] .pulse__spark {
	color: var(--pulse-up);
}

.pulse .pulse__tile[data-direction="down"] .pulse__value,
.pulse .pulse__tile[data-direction="down"] .pulse__arrow,
.pulse .pulse__tile[data-direction="down"] .pulse__spark {
	color: var(--pulse-down);
}

.pulse .pulse__tile[data-direction="down"] .pulse__arrow::before {
	content: "\25BC"; /* ▼ */
}

/* Value-level direction: fallback for markup that only sets it on the value.
   Kept in standalone rules (no :has()) so browsers without :has() support do
   not drop them, and at higher specificity than the tile-level rules above. */
.pulse .pulse__tile .pulse__value[data-direction="up"] {
	color: var(--pulse-up);
}

.pulse .pulse__tile .pulse__value[data-direction="down"] {
	color: var(--pulse-down);
}

.pulse .pulse__value-row:has(.pulse__value[data-direction="up"]) .pulse__arrow,
.pulse .pulse__tile:has(.pulse__value[data-direction="up"]) .pulse__spark {
	color: var(--pulse-up);
}

.pulse .pulse__value-row:has(.pulse__value[data-direction="down"]) .pulse__arrow,
.pulse .pulse__tile:has(.pulse__value[data-direction="down"]) .pulse__spark {
	color: var(--pulse-down);
}

.pulse .pulse__value-row:has(.pulse__value[data-direction="up"]) .pulse__arrow::before {
	content: "\25B2";
}

.pulse .pulse__value-row:has(.pulse__value[data-direction="down"]) .pulse__arrow::before {
	content: "\25BC";
}

/* ---------------------------------------------------------------------------
 * Sparkline (inline SVG from SC_Sparkline; strokes with currentColor)
 * ------------------------------------------------------------------------ */

.pulse .pulse__spark {
	display: block;
	width: 100%;
	margin: 0;
}

.pulse .pulse__spark svg {
	display: block;
	width: 100%;
	height: auto;
	color: inherit;
	margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------------
 * Stale state (.pulse--stale set at render time and toggled by sc-live.js
 * via data-sc-stale)
 * ------------------------------------------------------------------------ */

.pulse--stale .pulse__value {
	opacity: 0.7;
}

.pulse--stale .pulse__sub::after {
	content: " \00B7 delayed";
	font-style: italic;
}

/* ---------------------------------------------------------------------------
 * Motion: nothing here animates; belt and braces for themes that add it.
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.pulse,
	.pulse *,
	.pulse *::before,
	.pulse *::after {
		transition: none !important;
		animation: none !important;
	}
}