/**
 * CryptoFrame Crypto Markets — asset page styles.
 *
 * The page lives inside whatever the theme's header and footer provide.
 */

/*
 * The container width lives in frontend.css, not here.
 *
 * This stylesheet is only enqueued when an asset page is actually rendered,
 * and that request necessarily arrives after `wp_head` has already printed —
 * the page body renders inside `template_include`, long after the head is
 * closed. WordPress does print late styles in the footer, but relying on that
 * for the page's basic layout puts the container width at the mercy of any
 * caching or optimisation layer that treats footer CSS differently.
 *
 * The width is structural, so it belongs in the stylesheet that is always
 * present. Everything below is asset-page decoration, which is safe to load
 * late.
 */

.cfxcm-asset-page__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}

.cfxcm-asset-page__identity {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-width: 0;
}

.cfxcm-asset-page__logo {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.cfxcm-asset-page__name {
	margin: 0;
	font-size: var(--cfx-fs-2xl, 1.875rem);
	line-height: 1.2;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.cfxcm-asset-page__symbol {
	font-size: 0.6em;
	font-weight: 500;
	color: var(--cfxcm-muted, #6b7280);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.cfxcm-asset-page__rank {
	margin: 0.25rem 0 0;
	color: var(--cfxcm-muted, #6b7280);
	font-size: var(--cfx-fs-sm, 0.9375rem);
}

.cfxcm-asset-page__quote {
	text-align: right;
	margin-left: auto;
}

.cfxcm-asset-page__quote .cfxcm-price {
	font-size: var(--cfx-fs-2xl, 1.875rem);
}

.cfxcm-asset-page__quote .cfxcm-quote {
	justify-content: flex-end;
}

.cfxcm-asset-page__section {
	margin-bottom: 2rem;
}

.cfxcm-asset-page__heading {
	margin: 0 0 0.75rem;
	font-size: var(--cfx-fs-lg, 1.125rem);
}

.cfxcm-asset-page .cfxcm-disclaimer {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--cfxcm-border, rgba(0, 0, 0, 0.08));
	text-align: center;
}

@media (max-width: 600px) {
	.cfxcm-asset-main__inner {
		padding: 1.25rem 1rem;
	}

	.cfxcm-asset-page__header {
		gap: 1rem;
	}

	.cfxcm-asset-page__quote {
		text-align: left;
		margin-left: 0;
		width: 100%;
	}

	.cfxcm-asset-page__quote .cfxcm-quote {
		justify-content: flex-start;
	}
}

/* -------------------------------------------------------------------------
 * Analysis layout
 *
 * Depth comes from the theme: cards carry `cfx-card`, so the CryptoFrame
 * depth setting (3D through 9D) drives the elevation without this stylesheet
 * having any opinion about it. Under another theme the plain card styling
 * applies and nothing looks broken.
 * ---------------------------------------------------------------------- */

.cfxcm-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 1.5rem;
	margin-bottom: 1rem;
}

.cfxcm-hero__identity {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-width: 0;
}

.cfxcm-hero__logo {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.cfxcm-hero__name {
	margin: 0;
	font-size: var(--cfx-fs-2xl, 1.875rem);
	line-height: 1.15;
}

.cfxcm-hero__badges {
	display: flex;
	gap: 0.35rem;
	flex-wrap: wrap;
	margin: 0.35rem 0 0;
}

.cfxcm-badge--symbol {
	font-weight: 700;
	letter-spacing: 0.03em;
}

.cfxcm-hero__quote {
	text-align: right;
	margin-left: auto;
}

.cfxcm-hero__quote .cfxcm-price {
	margin: 0;
	font-size: var(--cfx-fs-2xl, 1.875rem);
}

.cfxcm-hero__quote .cfxcm-freshness {
	justify-content: flex-end;
}

/* -------------------------------------------------------------------------
 * Signal
 * ---------------------------------------------------------------------- */

.cfxcm-signal--bullish,
.cfxcm-signal--mildly-bullish {
	--cfxcm-signal-color: var(--cfxcm-up, #16a34a);
}

.cfxcm-signal--bearish,
.cfxcm-signal--mildly-bearish {
	--cfxcm-signal-color: var(--cfxcm-down, #dc2626);
}

.cfxcm-signal--neutral {
	--cfxcm-signal-color: #ca8a04;
}

.cfxcm-hero__signal {
	border-left: 1px solid var(--cfxcm-border, rgba(0, 0, 0, 0.1));
	padding-left: 1.5rem;
}

.cfxcm-hero__signal-label,
.cfxcm-signal__eyebrow {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cfxcm-muted, #6b7280);
}

.cfxcm-hero__signal-value {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0.25rem 0 0.5rem;
	font-size: var(--cfx-fs-xl, 1.5rem);
	font-weight: 700;
	color: var(--cfxcm-signal-color, #6b7280);
}

.cfxcm-signal__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

.cfxcm-hero__signal-score {
	font-size: var(--cfx-fs-sm, 0.9375rem);
	font-weight: 500;
	color: var(--cfxcm-muted, #6b7280);
}

.cfxcm-signal__meter {
	position: relative;
	height: 0.4rem;
}

.cfxcm-signal__track {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		var(--cfxcm-down, #dc2626) 0%,
		#ca8a04 50%,
		var(--cfxcm-up, #16a34a) 100%
	);
	opacity: 0.35;
}

.cfxcm-signal__marker {
	position: absolute;
	top: 50%;
	left: calc(var(--cfxcm-signal, 50) * 1%);
	width: 0.85rem;
	height: 0.85rem;
	border: 2px solid var(--cfxcm-surface, #fff);
	border-radius: 50%;
	background: var(--cfxcm-signal-color, #6b7280);
	transform: translate(-50%, -50%);
}

.cfxcm-signal__scale {
	display: flex;
	justify-content: space-between;
	margin: 0.35rem 0 0;
	font-size: 0.6875rem;
	color: var(--cfxcm-muted, #6b7280);
}

/* -------------------------------------------------------------------------
 * Statistics band
 * ---------------------------------------------------------------------- */

.cfxcm-statband {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1rem;
	margin: 0 0 1rem;
	padding: 1rem 1.25rem;
	list-style: none;
}

.cfxcm-statband__item {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.cfxcm-statband__label {
	font-size: var(--cfx-fs-xs, 0.8125rem);
	color: var(--cfxcm-muted, #6b7280);
}

.cfxcm-statband__value {
	font-size: var(--cfx-fs-lg, 1.125rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
 * Section navigation
 * ---------------------------------------------------------------------- */

.cfxcm-sectionnav {
	margin: 0 0 1.5rem;
	border-bottom: 1px solid var(--cfxcm-border, rgba(0, 0, 0, 0.1));
	overflow-x: auto;
}

.cfxcm-sectionnav ul {
	display: flex;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cfxcm-sectionnav a {
	display: block;
	padding: 0.6rem 0.9rem;
	color: var(--cfxcm-muted, #6b7280);
	font-size: var(--cfx-fs-sm, 0.9375rem);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}

.cfxcm-sectionnav a:hover,
.cfxcm-sectionnav a:focus-visible {
	color: var(--cfxcm-accent, #2563eb);
	border-bottom-color: currentColor;
}

/* Anchor targets must not land under a sticky theme header. */
.cfxcm-asset-page__section {
	scroll-margin-top: 6rem;
}

/* -------------------------------------------------------------------------
 * Signal analysis
 * ---------------------------------------------------------------------- */

.cfxcm-signal__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--cfxcm-border, rgba(0, 0, 0, 0.08));
}

.cfxcm-signal__title {
	margin: 0.25rem 0 0.5rem;
	font-size: var(--cfx-fs-xl, 1.5rem);
}

.cfxcm-signal__summary {
	margin: 0;
	max-width: 46ch;
	color: var(--cfxcm-muted, #6b7280);
}

.cfxcm-signal__headline {
	text-align: right;
	margin-left: auto;
}

.cfxcm-signal__pill {
	display: inline-block;
	padding: 0.25rem 0.85rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: var(--cfxcm-signal-color, #6b7280);
	font-weight: 700;
	font-size: var(--cfx-fs-sm, 0.9375rem);
}

.cfxcm-signal__number {
	margin: 0.4rem 0 0;
	font-size: var(--cfx-fs-2xl, 1.875rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.cfxcm-signal__outof {
	margin-left: 0.25rem;
	font-size: 0.55em;
	font-weight: 500;
	color: var(--cfxcm-muted, #6b7280);
}

.cfxcm-signal__coverage {
	margin: 0;
	font-size: var(--cfx-fs-xs, 0.8125rem);
	color: var(--cfxcm-muted, #6b7280);
}

.cfxcm-signal__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 2rem;
	padding: 1.25rem 0;
}

.cfxcm-signal__subhead {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cfxcm-muted, #6b7280);
}

.cfxcm-signal__axis {
	display: flex;
	justify-content: space-between;
	margin: 0 0 0.35rem;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.cfxcm-signal__axis-left {
	color: var(--cfxcm-down, #dc2626);
}

.cfxcm-signal__axis-right {
	color: var(--cfxcm-up, #16a34a);
}

/* -------------------------------------------------------------------------
 * Drivers
 * ---------------------------------------------------------------------- */

.cfxcm-drivers {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cfxcm-drivers__row {
	display: grid;
	/* The bar column is split down the middle by the centre line, so a
	   negative contribution grows left and a positive one grows right. */
	grid-template-columns: minmax(9rem, 1fr) minmax(0, 1.4fr) auto;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--cfxcm-border, rgba(0, 0, 0, 0.06));
}

.cfxcm-drivers__label {
	display: flex;
	flex-direction: column;
	font-weight: 600;
}

.cfxcm-drivers__weight {
	font-size: var(--cfx-fs-xs, 0.8125rem);
	font-weight: 400;
	color: var(--cfxcm-muted, #6b7280);
}

.cfxcm-drivers__bar {
	position: relative;
	display: block;
	height: 0.55rem;
	border-left: 1px solid var(--cfxcm-border, rgba(0, 0, 0, 0.35));
}

.cfxcm-drivers__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--cfxcm-bar, 0%);
	border-radius: 2px;
}

.cfxcm-drivers__fill--up {
	left: 0;
	background: var(--cfxcm-up, #16a34a);
}

.cfxcm-drivers__fill--down {
	right: 100%;
	background: var(--cfxcm-down, #dc2626);
}

.cfxcm-drivers__points {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}

.cfxcm-drivers__row.is-unavailable {
	opacity: 0.65;
}

.cfxcm-drivers__missing {
	grid-column: 2 / -1;
	font-size: var(--cfx-fs-xs, 0.8125rem);
	color: var(--cfxcm-muted, #6b7280);
	font-style: italic;
}

/* -------------------------------------------------------------------------
 * Historical position
 * ---------------------------------------------------------------------- */

.cfxcm-position__ends {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: var(--cfx-fs-xs, 0.8125rem);
}

.cfxcm-position__ends > span {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cfxcm-position__now {
	text-align: center;
}

.cfxcm-position__high {
	text-align: right;
}

.cfxcm-position__cap {
	color: var(--cfxcm-muted, #6b7280);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.6875rem;
}

.cfxcm-position__track {
	position: relative;
	height: 0.45rem;
	margin: 0.6rem 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--cfxcm-up, #16a34a), var(--cfxcm-accent, #2563eb), #7c3aed);
}

.cfxcm-position__marker {
	position: absolute;
	top: 50%;
	left: var(--cfxcm-position, 50%);
	width: 0.95rem;
	height: 0.95rem;
	border: 3px solid var(--cfxcm-surface, #fff);
	border-radius: 50%;
	background: #7c3aed;
	transform: translate(-50%, -50%);
}

.cfxcm-position__figure {
	margin: 0.75rem 0 0;
	text-align: center;
}

.cfxcm-position__figure strong {
	display: block;
	font-size: var(--cfx-fs-2xl, 1.875rem);
	color: #7c3aed;
	line-height: 1.1;
}

.cfxcm-position__figure span {
	font-size: var(--cfx-fs-xs, 0.8125rem);
	color: var(--cfxcm-muted, #6b7280);
}

/* -------------------------------------------------------------------------
 * Momentum evidence
 * ---------------------------------------------------------------------- */

.cfxcm-momentum {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 0.5rem;
	margin: 0;
	padding: 1rem 0 0;
	border-top: 1px solid var(--cfxcm-border, rgba(0, 0, 0, 0.08));
	list-style: none;
}

.cfxcm-momentum__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	text-align: center;
}

.cfxcm-momentum__label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cfxcm-muted, #6b7280);
}

.cfxcm-momentum__item .cfxcm-change {
	font-size: var(--cfx-fs-lg, 1.125rem);
}

.cfxcm-momentum__flag {
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: var(--cfxcm-surface-alt, #f6f7f9);
	font-size: 0.6875rem;
	color: var(--cfxcm-muted, #6b7280);
}

/* -------------------------------------------------------------------------
 * Methodology
 * ---------------------------------------------------------------------- */

.cfxcm-signal__method {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--cfxcm-border, rgba(0, 0, 0, 0.08));
	font-size: var(--cfx-fs-sm, 0.9375rem);
	color: var(--cfxcm-muted, #6b7280);
}

.cfxcm-signal__method summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--cfxcm-text, inherit);
}

.cfxcm-signal__model {
	font-weight: 600;
}

@media (max-width: 900px) {
	.cfxcm-hero {
		grid-template-columns: 1fr;
	}

	.cfxcm-hero__signal {
		border-left: 0;
		border-top: 1px solid var(--cfxcm-border, rgba(0, 0, 0, 0.1));
		padding-left: 0;
		padding-top: 1rem;
	}

	.cfxcm-hero__quote {
		text-align: left;
		margin-left: 0;
	}

	.cfxcm-hero__quote .cfxcm-freshness {
		justify-content: flex-start;
	}

	.cfxcm-signal__grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.cfxcm-signal__headline {
		text-align: left;
		margin-left: 0;
	}

	.cfxcm-drivers__row {
		grid-template-columns: 1fr auto;
	}

	.cfxcm-drivers__bar {
		grid-column: 1 / -1;
	}
}