/* Macrolyx — Market Status cards. */

.mlx-ms {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}

.mlx-ms-toolbar {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	padding: 0 0 6px;
}

/* ---------------- Card 1: status columns ---------------- */

.mlx-ms-cols {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: stretch;
	justify-content: space-evenly;
	gap: 8px;
	overflow: auto;
}

.mlx-ms-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	flex: 1 1 0;
	min-width: 150px;
	text-align: center;
	padding: 8px 6px;
}
.mlx-ms-col + .mlx-ms-col { border-inline-start: 1px solid rgba(255, 255, 255, .06); }

.mlx-ms-word {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: .35em;
	margin-inline-end: -.35em; /* Optical centering with the tracking. */
	text-transform: uppercase;
}
.mlx-ms-word.is-open { color: var(--mlx-long); text-shadow: 0 0 14px rgba(var(--mlx-long-rgb), .55); }
.mlx-ms-word.is-closed { color: var(--mlx-short); text-shadow: 0 0 14px rgba(var(--mlx-short-rgb), .45); }

.mlx-ms-until {
	color: var(--mlx-muted);
	font-size: 12px;
}

.mlx-ms-count {
	color: var(--mlx-text);
	font-size: 13px;
}
.mlx-ms-count b {
	color: var(--mlx-accent);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.mlx-ms-label {
	margin-top: 2px;
	color: var(--mlx-muted);
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
}

/* ---------------- Card 2: session clock ---------------- */

.mlx-ms-sessions {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	gap: 8px;
	overflow: auto;
}

.mlx-ms-sess {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 8px 6px;
	min-width: 96px;
}

.mlx-ms-sess-name {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--mlx-muted);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
}
.mlx-ms-sess.is-active .mlx-ms-sess-name { color: var(--mlx-text); }

.mlx-ms-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #3a4150; /* Inactive: dark gray. */
	flex: 0 0 7px;
}
.mlx-ms-dot.is-on {
	background: var(--mlx-long);
	box-shadow: 0 0 7px 2px rgba(var(--mlx-long-rgb), .7);
	animation: mlx-glow 2.2s ease-in-out infinite;
}

.mlx-ms-sess-clock {
	color: var(--mlx-muted);
	font-size: 22px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.mlx-ms-sess.is-active .mlx-ms-sess-clock {
	color: var(--mlx-text);
	font-weight: 800;
}