/* NSE Stock Ticker — colours are set from Settings as CSS variables. */

.nse-ticker {
	--nse-badge: #e5262c;
	--nse-accent: #e5262c;
	--nse-up: #1a8a3a;
	--nse-down: #d62828;
	--nse-flat: #1a8a3a;
	--nse-text: #111;
	--nse-label: #8a8f98;
	--nse-divider: #e5e7eb;
	--nse-bg: transparent;

	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 0;
	box-sizing: border-box;
	width: 100%;
	padding: 16px 24px;
	background: var(--nse-bg);
	color: var(--nse-text);
	font-family: inherit;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.nse-ticker *,
.nse-ticker *::before,
.nse-ticker *::after { box-sizing: border-box; }

/* Groups, separated by thin vertical rules */
.nse-ticker__id,
.nse-ticker__price,
.nse-ticker__stats {
	display: flex;
	align-items: center;
	padding: 0 32px;
}
.nse-ticker__id { padding-left: 0; gap: 14px; }
.nse-ticker__price,
.nse-ticker__stats { border-left: 1px solid var(--nse-divider); }

/* Identity */
.nse-ticker__badge {
	display: inline-block;
	padding: 6px 10px;
	border-radius: 3px;
	background: var(--nse-badge);
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .06em;
}
.nse-ticker__symbol { font-size: 22px; font-weight: 800; }
.nse-ticker__name   { font-size: 17px; color: var(--nse-label); }

/* Price */
.nse-ticker__price { align-items: baseline; gap: 10px; }
.nse-ticker__ccy   { font-size: 19px; color: var(--nse-label); font-weight: 500; }
.nse-ticker__value { font-size: 38px; font-weight: 800; letter-spacing: -.01em; }
.nse-ticker__change { font-size: 20px; font-weight: 600; margin-left: 8px; color: var(--nse-flat); }
.nse-ticker__pct   { margin-left: 4px; font-size: .85em; }
.nse-ticker[data-direction="up"]   .nse-ticker__change { color: var(--nse-up); }
.nse-ticker[data-direction="down"] .nse-ticker__change { color: var(--nse-down); }

/* Stats */
.nse-ticker__stats { gap: 36px; margin: 0; }
.nse-ticker__stat  { margin: 0; }
.nse-ticker__stat dt {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--nse-label);
}
.nse-ticker__stat dd { margin: 0; font-size: 18px; font-weight: 500; white-space: nowrap; }

/* Meta */
.nse-ticker__meta {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-left: auto;
	padding-left: 32px;
	font-size: 17px;
}
.nse-ticker__status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.nse-ticker__status i {
	width: 9px; height: 9px; border-radius: 50%;
	background: currentColor;
}
.nse-ticker__status.is-open   { color: var(--nse-up); }
.nse-ticker__status.is-open i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--nse-up) 20%, transparent); }
.nse-ticker__status.is-closed { color: var(--nse-label); }
.nse-ticker__time { color: var(--nse-label); }
.nse-ticker__more,
.nse-ticker__more:visited {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--nse-accent);
	font-weight: 700;
	text-decoration: none;
}
.nse-ticker__more:hover svg { transform: translateX(3px); }
.nse-ticker__more svg { transition: transform .15s; }

.nse-ticker.is-stale .nse-ticker__time::after { content: " · delayed"; }

.nse-ticker--empty { color: var(--nse-label, #8a8f98); padding: 16px 24px; }

/* Tablet: meta drops to its own line */
@media (max-width: 1200px) {
	.nse-ticker__meta { margin-left: 0; padding-left: 0; width: 100%; }
	.nse-ticker__stats { gap: 24px; }
}

/* Phone: stack everything, stats in a grid */
@media (max-width: 782px) {
	.nse-ticker { padding: 16px; }
	.nse-ticker__id,
	.nse-ticker__price,
	.nse-ticker__stats { padding: 0; border-left: 0; width: 100%; }
	.nse-ticker__id { flex-wrap: wrap; gap: 8px 12px; }
	.nse-ticker__value { font-size: 32px; }
	.nse-ticker__stats {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 14px 12px;
		padding-top: 14px;
		border-top: 1px solid var(--nse-divider);
	}
	.nse-ticker__stat dd { font-size: 16px; }
	.nse-ticker__meta { gap: 16px; font-size: 15px; flex-wrap: wrap; }
	.nse-ticker__more { margin-left: auto; }
}

@media (max-width: 420px) {
	.nse-ticker__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}