/**
 * CT Live — Race-status header ([ctlive_race_status]).
 *
 * A countdown/clock band + a row of field-count tiles. Themed entirely off the
 * shared --ltf-ct-* custom properties (same palette as the leaderboard, so the
 * Styling presets carry over). Sizes are in px/em on purpose: Leadville's root is
 * 10px, so rem would mislead. Font is inherited from the page (no AI-tiny defaults).
 */

.ltf-ct-status {
	font-family: var( --ltf-ct-font, inherit );
	color: var( --ltf-ct-text, #1b1b1b );
	background: var( --ltf-ct-bg, #ffffff );
	/* No outline and no gold top rule, by instruction (Aaron, 2026-08-21): the card
	   reads as a solid block on the page, not a boxed module. Same rule as the CTA. */
	border: 0;
	border-radius: var( --ltf-ct-radius, 0 );
	overflow: hidden;
	box-sizing: border-box;
}

.ltf-ct-status *,
.ltf-ct-status *::before,
.ltf-ct-status *::after {
	box-sizing: border-box;
}

/* --- Title ---------------------------------------------------------------- */

.ltf-ct-status__title {
	padding: 16px 18px 0;
	text-align: center;
}

.ltf-ct-status__kicker {
	display: block;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --ltf-ct-text-light, #6a6a6a );
}

.ltf-ct-status__name {
	display: block;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	margin-top: 2px;
}

/* --- Clock band ----------------------------------------------------------- */

.ltf-ct-status__clock {
	background: var( --ltf-ct-header-bg, #25264a );
	color: var( --ltf-ct-header-text, #ffffff );
	text-align: center;
	padding: 18px 18px 20px;
	margin-top: 16px;
}

.ltf-ct-status__clock-label {
	display: block;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.8;
	margin-bottom: 6px;
}

.ltf-ct-status__clock-value {
	display: block;
	font-size: 44px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	letter-spacing: 0.02em;
}

/* Live: tint the clock value with the brand accent + a pulsing dot. */
.ltf-ct-status.is-live .ltf-ct-status__clock-value {
	color: var( --ltf-ct-primary, #c2a14d );
}

.ltf-ct-status.is-live .ltf-ct-status__clock-label::after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 8px;
	border-radius: 50%;
	background: var( --ltf-ct-live-dot, #e23b3b );
	vertical-align: middle;
	animation: ltf-ct-status-pulse 1.4s ease-in-out infinite;
}

@keyframes ltf-ct-status-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.25; }
}

/* --- Stat tiles ----------------------------------------------------------- */

.ltf-ct-status__tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	background: var( --ltf-ct-border, #e3e3e3 );
}

.ltf-ct-status__tile {
	flex: 1 1 0;
	min-width: 25%;
	background: var( --ltf-ct-bg, #ffffff );
	padding: 14px 8px;
	text-align: center;
}

.ltf-ct-status__tile[hidden] {
	display: none;
}

.ltf-ct-status__num {
	display: block;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var( --ltf-ct-text, #1b1b1b );
}

.ltf-ct-status__stat-label {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --ltf-ct-text-light, #6a6a6a );
}

/* --- Rollover: one widget, countdown → live board ------------------------- */
/* When [ctlive_leaderboard start=".."] is used, the status block is embedded in
   the leaderboard card and the whole thing rolls over at the gun. */

.ltf-ct-leaderboard--rollover {
	border: 0;
	border-radius: var( --ltf-ct-radius, 0 );
	overflow: hidden;
}

/* Embedded status drops its own frame so it's the top section of the one card. */
.ltf-ct-status--embedded {
	border: 0;
	border-radius: 0;
}

/* Pre-race: show only the countdown state; the board + its chrome stay hidden. */
.ltf-ct-leaderboard--rollover.is-prerace .ltf-ct-leaderboard__tabs,
.ltf-ct-leaderboard--rollover.is-prerace .ltf-ct-leaderboard__header,
.ltf-ct-leaderboard--rollover.is-prerace .ltf-ct-leaderboard__search-wrap,
.ltf-ct-leaderboard--rollover.is-prerace .ltf-ct-table {
	display: none;
}

/* Live: the countdown collapses to a compact strip and the board takes over. */
.ltf-ct-leaderboard--rollover.is-live .ltf-ct-status__title {
	display: none;
}
.ltf-ct-leaderboard--rollover.is-live .ltf-ct-status__clock {
	padding: 10px 14px;
	margin-top: 0;
}
.ltf-ct-leaderboard--rollover.is-live .ltf-ct-status__clock-value {
	font-size: 26px;
}
.ltf-ct-leaderboard--rollover.is-live .ltf-ct-status__num {
	font-size: 20px;
}
.ltf-ct-leaderboard--rollover.is-live .ltf-ct-status__tile {
	padding: 9px 6px;
}

/* --- Results-board rollover ------------------------------------------------ */
/* [ctlive_results countdown="true"]: a framed countdown card sits between the
   distance tabs and the board. Tabs stay visible pre-race (each race counts to
   its own gun); the board area is hidden until the selected race starts; past
   the planned cutoff the widget retires and the plain board returns. */

.ltf-ct-results--rollover .ltf-ct-status {
	margin-bottom: 14px;
}
.ltf-ct-results--rollover.is-prerace .ltf-ct-results__inner {
	display: none;
}
.ltf-ct-results--rollover.is-live .ltf-ct-status__clock {
	padding: 10px 14px;
	margin-top: 0;
}
.ltf-ct-results--rollover.is-live .ltf-ct-status__clock-value {
	font-size: 26px;
}
.ltf-ct-results--rollover.is-live .ltf-ct-status__num {
	font-size: 20px;
}
.ltf-ct-results--rollover.is-live .ltf-ct-status__tile {
	padding: 9px 6px;
}
.ltf-ct-results--rollover.is-post .ltf-ct-status {
	display: none;
}

/* Pre-race with the Registered tile disabled (Styling toggle) the row would
   hold only "0 Finished" — meaningless under a countdown. Hide the row until
   the gun; it returns with the live board. */
.ltf-ct-results--rollover.is-prerace .ltf-ct-status__tiles:not(:has(.ltf-ct-status__tile[data-stat="registered"])) {
	display: none;
}

/* --- Mobile --------------------------------------------------------------- */

@media ( max-width: 480px ) {
	.ltf-ct-status__clock-value { font-size: 34px; }
	.ltf-ct-status__num         { font-size: 22px; }
	.ltf-ct-status__name        { font-size: 18px; }
}