/**
 * SignalMind — Platform overview
 *
 * A bento grid of six feature cards, each carrying a miniature of the product
 * surface it describes. Loaded on the front page only.
 *
 * The miniatures share one small vocabulary — `.sm-mini__label`, `__meter`,
 * `__side`, `__status` — so six different previews cost one set of primitives
 * rather than six.
 *
 * @package SignalMind
 */

/* ==========================================================================
   Section
   ========================================================================== */

.sm-platform {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

/* One soft light behind the grid, so the cards read as lit rather than flat. */
.sm-platform__glow {
	position: absolute;
	top: 8%;
	left: 50%;
	z-index: var(--sm-z-behind);
	width: min(70rem, 120%);
	aspect-ratio: 2 / 1;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, var(--sm-alpha-primary-8) 0%, transparent 68%);
	pointer-events: none;
}

.sm-platform__head {
	margin-bottom: var(--sm-space-14);
}

.sm-platform__title {
	max-width: 46rem;
}

/* ==========================================================================
   Bento grid
   Twelve columns: 7 + 5 on the first two rows, 4 + 4 + 4 on the third.
   ========================================================================== */

.sm-platform__grid {
	display: grid;
	gap: var(--sm-grid-gap);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
	.sm-platform__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* The scanner and the performance card each earn the full width at tablet,
	   the other four pair up. */
	.sm-pcard--lg,
	.sm-pcard--performance {
		grid-column: span 2;
	}
}

/*
 * Twelve columns, three rows, nothing spanning vertically:
 *
 *   8 + 4
 *   4 + 4 + 4
 *   12
 *
 * An earlier version gave the scanner two rows, which looked right on paper but
 * left a void — a card can only fill the height its own content has, and the
 * column beside it was always taller. Asymmetry now comes from the widths.
 */
@media (min-width: 1100px) {
	.sm-platform__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.sm-pcard--lg {
		grid-column: span 8;
	}

	.sm-pcard--md,
	.sm-pcard--sm {
		grid-column: span 4;
	}

	/* The closing card runs the full width and turns side-on, so the chart gets
	   room to read as a chart rather than a thumbnail. */
	.sm-pcard--performance {
		grid-column: span 12;
	}

	.sm-pcard--performance .sm-pcard__inner {
		flex-direction: row;
		align-items: center;
		gap: var(--sm-space-12);
	}

	.sm-pcard--performance .sm-pcard__head {
		flex: 0 1 26rem;
	}

	.sm-pcard--performance .sm-pcard__ui {
		flex: 1 1 auto;
		margin-top: 0;
	}

	.sm-pcard--performance .sm-mini-perf__chart {
		height: 6.5em;
	}
}

/* ==========================================================================
   Card
   ========================================================================== */

.sm-pcard {
	position: relative;
	display: flex;
	border-radius: var(--sm-radius-2xl);
	background-color: var(--sm-color-surface-glass);
	backdrop-filter: blur(var(--sm-blur-md));
	-webkit-backdrop-filter: blur(var(--sm-blur-md));
	box-shadow: var(--sm-shadow-lg);
	transition: transform var(--sm-duration-base) var(--sm-ease-out),
		box-shadow var(--sm-duration-base) var(--sm-ease-standard);
}

/*
 * Gradient border. A 1px ring painted on a pseudo-element and masked to its
 * own edge — `border-image` cannot do a gradient and a rounded corner at the
 * same time, and an inset shadow cannot be a gradient at all.
 */
.sm-pcard::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(150deg, var(--sm-alpha-white-16) 0%, var(--sm-alpha-white-4) 38%, transparent 62%, var(--sm-alpha-primary-24) 100%);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	pointer-events: none;
	transition: background var(--sm-duration-base) var(--sm-ease-standard);
}

/* Hover glow: a second, larger halo behind the card. */
.sm-pcard::after {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: var(--sm-z-behind);
	border-radius: inherit;
	opacity: 0;
	background: radial-gradient(60% 60% at 50% 0%, var(--sm-alpha-primary-16), transparent 70%);
	transition: opacity var(--sm-duration-slow) var(--sm-ease-standard);
	pointer-events: none;
}

.sm-pcard:hover {
	transform: translateY(-4px);
	box-shadow: var(--sm-shadow-xl), 0 0 40px -16px var(--sm-alpha-primary-40);
}

.sm-pcard:hover::before {
	background: linear-gradient(150deg, var(--sm-alpha-white-24) 0%, var(--sm-alpha-white-6) 38%, transparent 58%, var(--sm-alpha-primary-40) 100%);
}

.sm-pcard:hover::after {
	opacity: 1;
}

.sm-pcard__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-6);
	width: 100%;
	padding: var(--sm-space-7);
}

.sm-pcard__head {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-3);
}

.sm-pcard__icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin-bottom: var(--sm-space-1);
	border-radius: var(--sm-radius-lg);
	border: var(--sm-border-width) solid var(--sm-color-border);
	background-image: var(--sm-gradient-brand-soft);
	color: var(--sm-color-primary);
}

.sm-pcard__title {
	font-size: var(--sm-text-h4);
	font-weight: var(--sm-weight-semibold);
	line-height: var(--sm-leading-snug);
	letter-spacing: var(--sm-tracking-snug);
	color: var(--sm-color-text);
}

.sm-pcard__text {
	font-size: var(--sm-text-sm);
	line-height: var(--sm-leading-relaxed);
	color: var(--sm-color-text-muted);
	max-width: 34rem;
}

.sm-pcard__ui {
	margin-top: auto;
}

/*
 * The large card spans two grid rows, so pinning its preview to the bottom
 * leaves a void the width of the card. Let the preview take the slack instead
 * and spread its rows over it, which is how the real panel behaves.
 */
.sm-pcard--lg .sm-pcard__ui {
	display: flex;
	flex: 1 1 auto;
	margin-top: 0;
}

.sm-pcard--lg .sm-mini {
	flex: 1 1 auto;
}

/* Rows stay at their natural height and stay anchored to the top — spreading
   them to fill would leave a table with gaps between its own rows. The footer
   strip below takes up the slack instead. */
.sm-pcard--lg .sm-mini-scanner__rows {
	flex: 0 0 auto;
}

.sm-pcard--lg .sm-mini-scanner__row {
	padding-block: 0.62em;
}

/* ==========================================================================
   Miniature primitives — shared by every preview
   ========================================================================== */

.sm-mini {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	font-size: 12px;
	line-height: 1.4;
	padding: 0.95em;
	border: var(--sm-border-width) solid var(--sm-alpha-white-8);
	border-radius: var(--sm-radius-lg);
	background-color: var(--sm-alpha-white-2);
	box-shadow: inset 0 1px 0 var(--sm-alpha-white-4);
}

.sm-mini__label {
	font-size: 0.82em;
	letter-spacing: var(--sm-tracking-wide);
	color: var(--sm-color-text-subtle);
}

.sm-mini__bar {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding-bottom: 0.7em;
	border-bottom: var(--sm-border-width) solid var(--sm-alpha-white-6);
}

.sm-mini__bar-title {
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-text-secondary);
}

.sm-mini__bar-meta {
	margin-left: auto;
	font-size: 0.82em;
	color: var(--sm-color-text-subtle);
}

.sm-mini__dot {
	width: 0.5em;
	height: 0.5em;
	border-radius: var(--sm-radius-circle);
	background-color: var(--sm-color-primary);
}

.sm-mini__dot.is-live {
	animation: sm-pulse 2.2s var(--sm-ease-in-out) infinite;
}

.sm-mini__side {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.2em 0.5em;
	border-radius: 0.35em;
	font-size: 0.78em;
	font-weight: var(--sm-weight-bold);
	letter-spacing: 0.05em;
}

.sm-mini__side.is-buy {
	background-color: var(--sm-color-success-surface);
	color: var(--sm-color-bull);
}

.sm-mini__side.is-sell {
	background-color: var(--sm-color-danger-surface);
	color: var(--sm-color-bear);
}

/* A pair with no signal yet: the slot keeps its width so the column stays
   aligned, but nothing reads as a call to act. */
.sm-mini__side.is-none {
	background: none;
	color: var(--sm-color-text-disabled);
	font-weight: var(--sm-weight-regular);
}

.sm-mini__meter {
	display: block;
	width: 100%;
	height: 0.34em;
	border-radius: var(--sm-radius-pill);
	background-color: var(--sm-alpha-white-8);
	overflow: hidden;
}

.sm-mini__meter-fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background-image: var(--sm-gradient-brand);
}

.sm-mini__meter-fill.is-warn {
	background-image: linear-gradient(90deg, var(--sm-warning-500), var(--sm-warning-400));
}

.sm-mini__meter-fill.is-w92 { width: 92%; }
.sm-mini__meter-fill.is-w81 { width: 81%; }
.sm-mini__meter-fill.is-w74 { width: 74%; }
.sm-mini__meter-fill.is-w66 { width: 66%; }
.sm-mini__meter-fill.is-w58 { width: 58%; }

.sm-mini__conf {
	display: flex;
	align-items: center;
	gap: 0.5em;
	min-width: 0;
}

.sm-mini__conf .sm-mini__meter {
	flex: 1 1 auto;
	min-width: 1.5em;
}

.sm-mini__conf-value {
	flex: none;
	font-size: 0.82em;
	font-variant-numeric: tabular-nums;
	color: var(--sm-color-text-muted);
}

.sm-mini__conf-value.is-muted {
	color: var(--sm-color-text-disabled);
}

.sm-mini__status {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.82em;
	color: var(--sm-color-text-subtle);
	white-space: nowrap;
}

.sm-mini__status i {
	width: 0.42em;
	height: 0.42em;
	border-radius: var(--sm-radius-circle);
	background-color: currentColor;
	flex: none;
}

.sm-mini__status.is-open { color: var(--sm-color-bull); }
.sm-mini__status.is-locked { color: var(--sm-color-accent); }
.sm-mini__status.is-idle { color: var(--sm-color-text-disabled); }

/* ==========================================================================
   1 — Live Market Scanner
   ========================================================================== */

/* The signal column is sized to its header label, not to the BUY/SELL pill —
   a 3.2em column fits the pill but lets "SIGNAL" collide with the next
   heading. */
.sm-mini-scanner__head,
.sm-mini-scanner__row {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) 4.4em minmax(0, 1.5fr) minmax(0, 1.15fr);
	gap: 0.8em;
	align-items: center;
}

.sm-mini-scanner__head {
	font-size: 0.76em;
	letter-spacing: var(--sm-tracking-wider);
	text-transform: uppercase;
	color: var(--sm-color-text-disabled);
}

.sm-mini-scanner__rows {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sm-mini-scanner__rows li + li {
	margin-top: 0;
}

.sm-mini-scanner__row {
	padding: 0.45em 0;
	border-top: var(--sm-border-width) solid var(--sm-alpha-white-4);
	font-size: 1em;
	transition: background-color var(--sm-duration-fast) var(--sm-ease-standard);
}

.sm-mini-scanner__row:hover {
	background-color: var(--sm-alpha-white-2);
}

/* Sits at the foot of the panel and absorbs the height the bento grid gives
   the large card beyond what the rows need. */
.sm-mini-scanner__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.7em;
	margin-top: auto;
	padding-top: 0.75em;
	border-top: var(--sm-border-width) solid var(--sm-alpha-white-6);
	font-size: 0.82em;
	color: var(--sm-color-text-subtle);
}

.sm-mini-scanner__foot b {
	font-weight: var(--sm-weight-semibold);
	font-variant-numeric: tabular-nums;
	color: var(--sm-color-text-secondary);
}

.sm-mini-scanner__coin {
	font-weight: var(--sm-weight-semibold);
	font-size: 0.9em;
	color: var(--sm-color-text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ==========================================================================
   2 — AI Trade Analysis
   ========================================================================== */

.sm-mini-ai__scores {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.9em;
}

.sm-mini-ai__score {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
}

.sm-mini-ai__value {
	font-size: 1.65em;
	font-weight: var(--sm-weight-bold);
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--sm-color-primary);
}

.sm-mini-ai__value small {
	font-size: 0.5em;
	font-weight: var(--sm-weight-semibold);
	margin-left: 0.1em;
}

.sm-mini-ai__value.is-warn {
	color: var(--sm-color-warning);
}

.sm-mini-ai__reasons {
	display: flex;
	flex-direction: column;
	gap: 0.42em;
	margin: 0;
	padding-top: 0.7em;
	border-top: var(--sm-border-width) solid var(--sm-alpha-white-6);
	list-style: none;
}

.sm-mini-ai__reasons li {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	margin-top: 0;
	font-size: 0.86em;
	line-height: 1.45;
	color: var(--sm-color-text-muted);
}

.sm-mini-ai__reasons .sm-icon {
	margin-top: 0.2em;
	color: var(--sm-color-primary);
}

/* ==========================================================================
   3 — Market Intelligence
   ========================================================================== */

.sm-mini-intel {
	gap: 0.6em;
}

.sm-mini-intel__widget {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	padding: 0.6em 0.7em;
	border: var(--sm-border-width) solid var(--sm-alpha-white-6);
	border-radius: var(--sm-radius-md);
	background-color: var(--sm-alpha-white-2);
}

.sm-mini-intel__value {
	font-size: 1.05em;
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-text);
}

.sm-mini-intel__value small {
	font-size: 0.72em;
	font-weight: var(--sm-weight-medium);
	color: var(--sm-color-text-subtle);
	margin-left: 0.2em;
}

.sm-mini-intel__pill {
	align-self: flex-start;
	padding: 0.16em 0.55em;
	border-radius: var(--sm-radius-sm);
	font-size: 0.86em;
	font-weight: var(--sm-weight-semibold);
	background-color: var(--sm-color-success-surface);
	color: var(--sm-color-bull);
}

.sm-mini-intel__note {
	font-size: 0.78em;
	color: var(--sm-color-text-subtle);
}

/* Fear & greed: a fixed sentiment ramp with a marker at the current reading. */
.sm-mini-intel__gauge {
	position: relative;
	display: block;
	height: 0.42em;
	margin-top: 0.15em;
	border-radius: var(--sm-radius-pill);
	background-image: linear-gradient(90deg,
		var(--sm-danger-500) 0%,
		var(--sm-warning-500) 42%,
		var(--sm-primary-500) 100%);
}

.sm-mini-intel__gauge i {
	position: absolute;
	top: 50%;
	left: 62%;
	width: 0.72em;
	height: 0.72em;
	border-radius: var(--sm-radius-circle);
	background-color: var(--sm-neutral-0);
	box-shadow: 0 0 0 2px rgba(6, 7, 10, 0.9);
	transform: translate(-50%, -50%);
}

/* ==========================================================================
   4 — Track Record Analytics
   ========================================================================== */

.sm-mini-paper__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.6em;
}

.sm-mini-paper__stat {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	padding: 0.55em 0.6em;
	border: var(--sm-border-width) solid var(--sm-alpha-white-6);
	border-radius: var(--sm-radius-md);
	background-color: var(--sm-alpha-white-2);
	min-width: 0;
}

.sm-mini-paper__stat .sm-mini__label {
	font-size: 0.74em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sm-mini-paper__value {
	font-size: 1.05em;
	font-weight: var(--sm-weight-bold);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	color: var(--sm-color-text);
}

.sm-mini-paper__value.is-down,
.sm-mini-perf__stat b.is-down {
	color: var(--sm-color-bear);
}

.sm-mini-paper__note {
	font-size: 0.78em;
	color: var(--sm-color-text-subtle);
}

/* ==========================================================================
   5 — Smart Alerts
   ========================================================================== */

.sm-mini-alerts__list {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sm-mini-alerts__list li + li {
	margin-top: 0;
}

.sm-mini-alerts__row {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.4em 0;
	font-size: 0.92em;
}

.sm-mini-alerts__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 1.85em;
	height: 1.85em;
	border-radius: var(--sm-radius-sm);
	background-color: var(--sm-alpha-white-4);
	color: var(--sm-color-text-muted);
}

.sm-mini-alerts__name {
	flex: 1 1 auto;
	color: var(--sm-color-text-secondary);
}

.sm-mini-alerts__switch {
	position: relative;
	flex: none;
	width: 1.9em;
	height: 1.05em;
	border-radius: var(--sm-radius-pill);
	background-color: var(--sm-alpha-white-12);
	transition: background-color var(--sm-duration-base) var(--sm-ease-standard);
}

.sm-mini-alerts__switch i {
	position: absolute;
	top: 0.12em;
	left: 0.14em;
	width: 0.8em;
	height: 0.8em;
	border-radius: var(--sm-radius-circle);
	background-color: var(--sm-neutral-0);
	transition: transform var(--sm-duration-base) var(--sm-ease-spring);
}

.sm-mini-alerts__switch.is-on {
	background-color: var(--sm-color-primary);
}

.sm-mini-alerts__switch.is-on i {
	transform: translateX(0.82em);
}

.sm-mini-alerts__toast {
	display: flex;
	align-items: center;
	gap: 0.55em;
	margin-top: 0.2em;
	padding: 0.55em 0.6em;
	border: var(--sm-border-width) solid var(--sm-color-border-brand);
	border-radius: var(--sm-radius-md);
	background-color: var(--sm-color-primary-subtle);
	font-size: 0.86em;
	color: var(--sm-color-text-muted);
}

.sm-mini-alerts__toast strong {
	color: var(--sm-color-text);
	font-weight: var(--sm-weight-semibold);
}

.sm-mini-alerts__toast-body {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ==========================================================================
   6 — Performance Dashboard
   ========================================================================== */

.sm-mini-perf__chart {
	display: flex;
	align-items: flex-end;
	gap: 0.3em;
	height: 4.2em;
}

.sm-mini-perf__chart i {
	flex: 1 1 0;
	min-width: 0;
	border-radius: 0.15em 0.15em 0 0;
	background-image: linear-gradient(180deg, var(--sm-alpha-primary-40), var(--sm-alpha-primary-8));
	box-shadow: inset 0 1px 0 var(--sm-color-primary);
	transition: background-image var(--sm-duration-base) var(--sm-ease-standard);
}

.sm-pcard--performance:hover .sm-mini-perf__chart i {
	background-image: linear-gradient(180deg, var(--sm-alpha-primary-40), var(--sm-alpha-primary-16));
}

.sm-mini-perf__chart i.is-h36 { height: 36%; }
.sm-mini-perf__chart i.is-h42 { height: 42%; }
.sm-mini-perf__chart i.is-h49 { height: 49%; }
.sm-mini-perf__chart i.is-h55 { height: 55%; }
.sm-mini-perf__chart i.is-h58 { height: 58%; }
.sm-mini-perf__chart i.is-h62 { height: 62%; }
.sm-mini-perf__chart i.is-h71 { height: 71%; }
.sm-mini-perf__chart i.is-h77 { height: 77%; }
.sm-mini-perf__chart i.is-h84 { height: 84%; }
.sm-mini-perf__chart i.is-h93 { height: 93%; }

.sm-mini-perf__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em 0.9em;
	padding-top: 0.7em;
	border-top: var(--sm-border-width) solid var(--sm-alpha-white-6);
	font-size: 0.84em;
	color: var(--sm-color-text-subtle);
}

.sm-mini-perf__stat b {
	font-weight: var(--sm-weight-bold);
	font-variant-numeric: tabular-nums;
	color: var(--sm-color-text);
	margin-right: 0.25em;
}

/* ==========================================================================
   Responsive
   The miniatures scale from the one font-size on .sm-mini, as in the hero.
   ========================================================================== */

@media (max-width: 1099px) {
	.sm-pcard__inner {
		padding: var(--sm-space-6);
	}
}

@media (max-width: 599px) {
	.sm-mini {
		font-size: 11px;
	}

	.sm-platform__head {
		margin-bottom: var(--sm-space-10);
	}

	/* Four columns of data do not fit a phone; confidence carries the same
	   information as the number beside it, so the meter goes and the value
	   stays. */
	.sm-mini-scanner__row {
		grid-template-columns: minmax(0, 1.2fr) 3em 2.6em minmax(0, 1fr);
		gap: 0.45em;
	}

	.sm-mini-scanner .sm-mini__meter {
		display: none;
	}

	/* "CONFIDENCE" is wider than the column its data now needs, so the header
	   would collide with the one beside it. The rows carry their own meaning —
	   a pill, a percentage, a status — so the header goes instead. */
	.sm-mini-scanner__head {
		display: none;
	}

	.sm-mini-paper__stats {
		grid-template-columns: minmax(0, 1fr);
	}

	.sm-mini-paper__stat {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		gap: 0.6em;
	}
}