/* Racing Fans Live — self-contained, theme-agnostic.
   Every colour is a custom property: override :root in your theme (or the
   Customizer's Additional CSS) to swap the mockup's orange for the official
   RF palette — Deep Navy #0A1628, Neon Green #39FF14, Electric Blue #2FAFFB. */

.rf-hub,
.rf-panel {
	--rf-bg:        #0d1623;
	--rf-panel:     #131e2e;
	--rf-panel-2:   #18243a;
	--rf-line:      #223046;
	--rf-text:      #e7eef7;
	--rf-muted:     #8fa1b8;
	--rf-accent:    #f26a21;
	--rf-accent-2:  #ff8a3d;
	--rf-pos:       #35d07f;
	--rf-neg:       #f0556b;
	--rf-radius:    10px;

	font-family: inherit;
	color: var(--rf-text);
}

.rf-hub {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 210px 280px;
	gap: 12px;
	align-items: start;
}
.rf-hub > * { min-width: 0; }

@media (max-width: 1100px) {
	.rf-hub { grid-template-columns: minmax(0, 1fr) 240px; }
	.rf-hub__updates { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
	.rf-hub { grid-template-columns: 1fr; }
	.rf-hub__next, .rf-hub__updates { grid-column: auto; }
}

.rf-panel {
	background: var(--rf-panel);
	border: 1px solid var(--rf-line);
	border-radius: var(--rf-radius);
	padding: 12px 14px;
	box-sizing: border-box;
}
/* Theme reset. Block themes and page builders style bare h2/h3/table/a
   elements, often with a dark colour that disappears on this panel — that is
   what made the track name invisible. These few !importants are deliberate:
   they stop an unknown theme from breaking a widget it knows nothing about. */
.rf-panel h1, .rf-panel h2, .rf-panel h3, .rf-panel h4, .rf-panel h5, .rf-panel h6 {
	color: var(--rf-text) !important;
	font-family: inherit;
	margin: 0;
	padding: 0;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.25;
}
.rf-panel p { color: var(--rf-text); }
.rf-panel table, .rf-panel th, .rf-panel td {
	background: transparent !important;
	color: inherit;
}
.rf-panel a { box-shadow: none; text-decoration: none; }

.rf-panel__title {
	margin: 0 0 8px;
	font-size: 12px !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	color: var(--rf-muted) !important;
	font-weight: 700;
}
.rf-empty { color: var(--rf-muted); font-size: 13px; margin: 12px 0; }

/* ---------- Meeting board ---------- */

.rf-board__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--rf-line);
}
.rf-badge--live {
	background: var(--rf-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .1em;
	padding: 3px 7px;
	border-radius: 4px;
}
.rf-board__track {
	margin: 0;
	font-size: 18px !important;
	font-weight: 800;
	letter-spacing: -.01em;
	color: #fff !important;   /* never inherit a theme's heading colour */
}
.rf-board__state {
	font-size: 11px; font-weight: 700; letter-spacing: .06em;
	color: var(--rf-muted); text-transform: uppercase;
}
.rf-board__date  { color: var(--rf-muted); font-size: 12px; }

/* Racing-code badge on the meeting strip */
.rf-badge--code {
	font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	padding: 3px 7px; border-radius: 4px;
	border: 1px solid var(--rf-line); color: var(--rf-text);
	background: var(--rf-panel-2);
}
.rf-badge--t { border-color: rgba(242, 106, 33, .55); color: var(--rf-accent-2); }
.rf-badge--h { border-color: rgba(47, 175, 251, .55); color: #6cc5ff; }
.rf-badge--g { border-color: rgba(53, 208, 127, .55); color: var(--rf-pos); }

/* Racing-code switcher */
.rf-codes {
	display: flex; flex-wrap: wrap; gap: 6px;
	padding: 0 0 10px; margin: 0 0 2px;
	border-bottom: 1px solid var(--rf-line);
}
.rf-code {
	appearance: none;
	background: transparent;
	border: 1px solid var(--rf-line);
	border-radius: 999px;
	color: var(--rf-muted);
	padding: 4px 12px;
	font: inherit; font-size: 12px; font-weight: 600;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.rf-code:hover { color: var(--rf-text); border-color: var(--rf-accent); }
.rf-code.is-active {
	background: var(--rf-accent); border-color: var(--rf-accent); color: #fff;
}
.rf-board__cond  { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto; }
.rf-cond {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: 12px; color: var(--rf-muted);
}
.rf-cond strong { color: var(--rf-text); font-weight: 600; }
.rf-cond svg { width: 14px; height: 14px; }
.rf-board__full, .rf-board__more, .rf-updates__more {
	color: var(--rf-accent) !important; font-size: 12px; font-weight: 600; text-decoration: none;
}
.rf-board__full:hover, .rf-board__more:hover, .rf-updates__more:hover { text-decoration: underline; }

/* Race tabs */
.rf-tabs {
	display: flex; flex-wrap: wrap; gap: 6px;
	padding: 10px 0; margin: 0 -2px;
}
.rf-tab {
	flex: 0 0 auto; min-width: 0;
	display: flex; align-items: baseline; gap: 5px;
	background: var(--rf-panel-2);
	border: 1px solid var(--rf-line);
	border-radius: 6px;
	color: var(--rf-muted);
	padding: 5px 9px;
	font: inherit; font-size: 12px;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.rf-tab:hover { color: var(--rf-text); border-color: var(--rf-accent); }
.rf-tab__n { font-weight: 700; color: var(--rf-text); }
.rf-tab.is-active { background: var(--rf-accent); border-color: var(--rf-accent); color: #fff; }
.rf-tab.is-active .rf-tab__n { color: #fff; }
.rf-tab.is-done { opacity: .5; }

/* Race header */
.rf-racehead {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	padding: 6px 0 10px;
}
.rf-racehead__n { font-weight: 800; font-size: 14px; }
.rf-racehead__name { font-size: 13px; color: var(--rf-text); text-transform: uppercase; letter-spacing: .02em; }
.rf-chip {
	font-size: 11px; color: var(--rf-muted);
	border: 1px solid var(--rf-line); border-radius: 4px; padding: 2px 6px;
}

/* Runner table */
.rf-tablewrap { overflow-x: auto; scrollbar-width: thin; }
.rf-tablewrap::-webkit-scrollbar { height: 4px; }
.rf-tablewrap::-webkit-scrollbar-thumb { background: var(--rf-line); border-radius: 4px; }
.rf-runners { width: 100%; border-collapse: collapse; font-size: 13px; }
.rf-runners td { white-space: nowrap; }
.rf-runners th {
	text-align: left; font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
	color: var(--rf-muted); font-weight: 600;
	padding: 6px 8px; border-bottom: 1px solid var(--rf-line);
}
.rf-runners td { padding: 7px 6px; border-bottom: 1px solid rgba(34, 48, 70, .6); vertical-align: middle; }
.rf-col-person { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
.rf-horse { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.rf-runners tbody tr:hover { background: var(--rf-panel-2); }
.rf-runners tbody tr.is-scratched { opacity: .45; text-decoration: line-through; }
.rf-col-num  { width: 28px; color: var(--rf-muted); font-variant-numeric: tabular-nums; }
.rf-col-silk { width: 26px; }
.rf-silk { display: inline-block; width: 20px; height: 20px; border-radius: 4px; border: 1px solid var(--rf-line); vertical-align: middle; }
.rf-horse { font-weight: 700; white-space: nowrap; }
.rf-form { font-variant-numeric: tabular-nums; color: var(--rf-muted); letter-spacing: .04em; }
.rf-col-edge, .rf-col-conf, .rf-col-win, .rf-col-odds { text-align: right; white-space: nowrap; }
.rf-edge { font-weight: 700; font-variant-numeric: tabular-nums; }
.rf-edge.is-pos { color: var(--rf-pos); }
.rf-edge.is-neg { color: var(--rf-neg); }
.rf-conf, .rf-win {
	display: inline-block; min-width: 42px; text-align: center;
	font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
	padding: 2px 6px; border-radius: 4px;
	background: linear-gradient(to right, rgba(53, 208, 127, .28) var(--rf-conf, 0%), rgba(255, 255, 255, .04) var(--rf-conf, 0%));
}
.rf-odds {
	display: inline-block; min-width: 46px; text-align: center;
	background: var(--rf-panel-2); border: 1px solid var(--rf-line); border-radius: 5px;
	padding: 3px 7px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.rf-adv {
	display: inline-block; margin-left: 4px;
	font-size: 11px; font-weight: 700; color: var(--rf-pos);
	font-variant-numeric: tabular-nums;
}
.rf-valuetag {
	display: inline-block; margin-left: 6px; vertical-align: middle;
	font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	color: #0c1a12; background: var(--rf-pos);
	border-radius: 3px; padding: 1px 5px;
}
/* The compact board has three numeric columns to fit beside the name. The word
   costs about fifty pixels there and pushes Best Odds off the edge, so it
   becomes a dot — the RF Pick panel directly above already names the runner. */
.rf-board .rf-runners .rf-valuetag {
	width: 8px; height: 8px; padding: 0; border-radius: 50%;
	font-size: 0; line-height: 0; margin-left: 5px;
}
.rf-runners tbody tr.is-value { background: rgba(53, 208, 127, .07); }
.rf-stalecount { display: block; margin-top: 3px; font-size: 11px; color: var(--rf-muted); }

/* The two selections. Kept visually distinct because they answer different
   questions: who wins, and whether the price is worth taking. */
.rf-picks {
	display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
	margin: 0 0 10px;
}
.rf-picks__item {
	display: flex; flex-direction: column; gap: 2px;
	padding: 8px 10px; border-radius: 8px;
	background: var(--rf-panel-2); border: 1px solid var(--rf-line);
}
/* A bet that cleared every test looks different from the best of a bad race,
   because they are different claims and the reader has to be able to tell. */
.rf-picks__item.is-value { border-color: var(--rf-pos); background: rgba(53, 208, 127, .09); }
.rf-picks__item.is-best  { border-color: rgba(242, 106, 33, .4); }
.rf-picks__item.is-none  { opacity: .8; }
.rf-picks__label {
	display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
	font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
	color: var(--rf-muted);
}
.rf-picks__item.is-value .rf-picks__label { color: var(--rf-pos); }
.rf-picks__item.is-best  .rf-picks__label { color: var(--rf-accent-2); }
.rf-picks__runner { font-weight: 800; font-size: 14px; line-height: 1.25; }
.rf-picks__meta { font-size: 11px; color: var(--rf-muted); font-variant-numeric: tabular-nums; }
.rf-picks__stake { display: block; margin-top: 2px; }
.rf-picks__note {
	display: block; margin-top: 4px;
	font-variant-numeric: normal; line-height: 1.4;
}
.rf-valuetag--inline { letter-spacing: .06em; }

/* ---------- info popups ----------

   Built on <details>/<summary>, so the open-and-close works with no stylesheet
   and no script at all — the failure mode that broke this twice was a cached
   page pointing at week-old assets. A short copy of the rules that matter is
   also printed inline with the panel (see RF_Render::critical_css), so these
   are the enhancement, not the load-bearing part.

   The declarations holding the button's shape are marked important because a
   theme that styles bare summary or button elements will otherwise turn a 15px
   circle into a full-width block — which is what Kadence did. Same reasoning as
   the heading and table resets above. */

.rf-info {
	display: inline-block;
	margin-left: 4px;
	vertical-align: middle;
}
.rf-panel .rf-info > summary,
.rf-racing .rf-info > summary {
	list-style: none !important;
	box-sizing: border-box !important;
	cursor: pointer;
	width: 15px !important; height: 15px !important;
	min-width: 0 !important; min-height: 0 !important;
	max-width: 15px !important; max-height: 15px !important;
	padding: 0 !important; margin: 0 !important;
	border: 1px solid var(--rf-line) !important; border-radius: 50% !important;
	background: var(--rf-panel-2) !important;
	color: var(--rf-muted) !important;
	font-family: Georgia, "Times New Roman", serif !important;
	font-size: 10px !important; font-weight: 700 !important; font-style: italic !important;
	line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important;
	box-shadow: none !important; text-decoration: none !important;
	display: inline-flex !important; align-items: center; justify-content: center;
}
.rf-info > summary::-webkit-details-marker { display: none; }
.rf-info > summary::marker { content: ""; }
.rf-panel .rf-info > summary:hover,
.rf-panel .rf-info > summary:focus-visible,
.rf-racing .rf-info > summary:hover,
.rf-racing .rf-info > summary:focus-visible {
	color: var(--rf-text) !important;
	border-color: var(--rf-accent) !important;
	outline: none;
}
.rf-panel .rf-info[open] > summary,
.rf-racing .rf-info[open] > summary {
	color: #fff !important;
	background: var(--rf-accent) !important;
	border-color: var(--rf-accent) !important;
}

/* Placed over the page rather than inside the table: the table scrolls
   sideways inside .rf-tablewrap and would clip it, and opening an explanation
   must never move a price. Script sets the exact coordinates. */
.rf-info__bubble {
	position: fixed !important;
	left: 12px; top: 12px;
	z-index: 2147483000 !important;
	width: 300px; max-width: calc(100vw - 24px);
	box-sizing: border-box;
	background: #0b1421 !important;
	color: var(--rf-text) !important;
	border: 1px solid var(--rf-line); border-radius: 10px;
	padding: 12px 14px 10px;
	font-family: inherit;
	font-size: 12.5px !important; font-weight: 400 !important;
	line-height: 1.5 !important;
	letter-spacing: normal !important; text-transform: none !important; text-align: left !important;
	box-shadow: 0 16px 42px rgba(0, 0, 0, .7);
	white-space: normal !important;
}
.rf-info__title {
	display: block; margin-bottom: 4px;
	font-size: 12px !important; font-weight: 800 !important;
	letter-spacing: .05em !important; text-transform: uppercase !important;
	color: var(--rf-accent-2) !important;
}
.rf-info__text { display: block; color: var(--rf-text); }
.rf-panel .rf-info__close,
.rf-racing .rf-info__close {
	appearance: none !important; -webkit-appearance: none !important;
	display: block !important; margin: 9px 0 0 auto !important;
	padding: 4px 12px !important;
	background: var(--rf-panel-2) !important;
	border: 1px solid var(--rf-line) !important; border-radius: 5px !important;
	color: var(--rf-text) !important;
	font-family: inherit !important; font-size: 11px !important; font-weight: 600 !important;
	line-height: 1.4 !important; text-transform: none !important; letter-spacing: 0 !important;
	width: auto !important; cursor: pointer;
}
.rf-info__close:hover { border-color: var(--rf-accent) !important; }

/* Tapping anywhere else closes it. Only rendered on touch, by script. */
.rf-info-scrim {
	position: fixed; inset: 0; z-index: 2147482999;
	background: rgba(4, 9, 17, .45);
}

/* ---------- the same explanations as a block, for phones ---------- */

.rf-guide { margin: 10px 0 0; font-size: 11.5px; }
.rf-guide > summary {
	cursor: pointer; color: var(--rf-accent);
	font-size: 12px; font-weight: 600; list-style: none;
	padding: 6px 0;
}
.rf-guide > summary::-webkit-details-marker { display: none; }
.rf-guide > summary::before { content: "i"; font-family: Georgia, serif; font-style: italic; margin-right: 6px; }
.rf-guide__body { display: grid; gap: 9px; padding: 4px 0 2px; }
.rf-guide__row strong {
	display: block; color: var(--rf-text);
	font-size: 11.5px; line-height: 1.4;
}
.rf-guide__row span {
	display: block; color: var(--rf-muted);
	font-size: 11.5px; line-height: 1.5;
}

.rf-board__more { display: inline-block; margin-top: 10px; }

/* On phones, drop the two least critical columns so the key data fits
   without a sideways scroll. */
/* The board sits in the hub's narrow middle column between 720px and 1100px,
   where three numeric columns no longer fit beside a name, a jockey and a
   trainer. Shed the columns the full race card still carries, rather than
   letting the price scroll off the edge. */
@media (max-width: 1340px) {
	.rf-board .rf-runners .rf-col-trainer { display: none; }
}
@media (max-width: 1100px) and (min-width: 721px) {
	.rf-board .rf-runners .rf-col-person { display: none; }
	.rf-board .rf-horse { max-width: 92px; }
	/* The tooltip buttons are what tips this band over; the collapsible guide
	   below the table carries the same text. */
	.rf-board .rf-runners th .rf-info { display: none; }
	.rf-board .rf-guide { display: block; }
	.rf-board .rf-runners .rf-valuetag {
		width: 8px; height: 8px; padding: 0; border-radius: 50%;
		font-size: 0; line-height: 0; margin-left: 5px;
	}
}

@media (max-width: 600px) {
	.rf-runners .rf-col-trainer,
	.rf-runners .rf-form { display: none; }
	/* Three numeric columns plus a name will not fit a phone alongside the
	   jockey, and the price is the reason anyone opened the page. The full
	   race card keeps every column. */
	/* The feed carries no real silk colours — these are generated placeholders —
	   so they are the first thing to go when the price needs the room. */
	.rf-board .rf-runners .rf-col-person,
	.rf-board .rf-runners .rf-col-silk { display: none; }
	.rf-runners .rf-valuetag {
		width: 8px; height: 8px; padding: 0; border-radius: 50%;
		font-size: 0; line-height: 0; margin-left: 5px;
	}
	.rf-col-person { max-width: 70px; }
	.rf-horse { max-width: 110px; }
	.rf-board .rf-horse { max-width: 88px; }
	.rf-runners { font-size: 12px; }
	.rf-runners td, .rf-runners th { padding: 7px 4px; }
	.rf-board .rf-runners td, .rf-board .rf-runners th { padding: 7px 3px; }
	.rf-odds { min-width: 40px; padding: 3px 5px; }
	.rf-conf, .rf-win { min-width: 34px; padding: 2px 4px; }
	.rf-board .rf-conf, .rf-board .rf-win, .rf-board .rf-edge { font-size: 11px; }
	.rf-board .rf-conf, .rf-board .rf-win { min-width: 28px; padding: 2px 3px; }
	.rf-board .rf-odds { min-width: 36px; padding: 3px 4px; }
	.rf-picks { grid-template-columns: 1fr; }
	.rf-adv { display: block; margin-left: 0; }
	/* Three tooltip buttons cost more width than the prices can spare on the
	   compact board, so the headers lose theirs and the collapsible guide
	   underneath carries the same text. The pick panels keep theirs — they
	   have the room, and they are the two most easily confused. */
	.rf-board .rf-runners th .rf-info { display: none; }
}
@media (min-width: 601px) {
	.rf-board .rf-guide { display: none; }
}

.rf-compliance {
	margin: 10px 0 0; padding-top: 8px;
	border-top: 1px solid var(--rf-line);
	font-size: 10.5px; line-height: 1.5; color: var(--rf-muted);
}

/* ---------- Next to jump ---------- */

.rf-ntj { text-align: center; background: linear-gradient(180deg, var(--rf-panel-2), var(--rf-panel)); }
.rf-ntj__meet { margin: 0 0 2px; font-size: 15px; font-weight: 800; color: #fff; }
.rf-ntj__code {
	margin: 0 0 2px; font-size: 11px; font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase; color: var(--rf-muted);
}
.rf-ntj__clock {
	margin: 2px 0 4px;
	font-size: clamp( 38px, 5.2vw, 52px );
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--rf-accent) !important;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 0 22px rgba(242, 106, 33, .35);
}
.rf-ntj.is-tomorrow .rf-panel__title { color: var(--rf-accent-2) !important; }
.rf-ntj.is-tomorrow .rf-ntj__clock { font-size: clamp( 30px, 4vw, 40px ); }
.rf-ntj__clock.is-soon { color: var(--rf-accent-2); animation: rf-pulse 1.4s ease-in-out infinite; }
@keyframes rf-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .rf-ntj__clock.is-soon { animation: none; } }
.rf-ntj__meta { margin: 0 0 10px; font-size: 12px; color: var(--rf-muted); }
.rf-btn {
	display: inline-block; width: 100%; box-sizing: border-box;
	background: var(--rf-accent); color: #fff; text-decoration: none;
	font-size: 12px; font-weight: 700; padding: 8px 10px; border-radius: 6px;
}
.rf-btn:hover { background: var(--rf-accent-2); color: #fff; }

/* ---------- Live updates ---------- */

.rf-updates__head { display: flex; align-items: center; justify-content: space-between; }
.rf-updates__all { font-size: 11px; color: var(--rf-muted); }
.rf-updates__list { list-style: none; margin: 0; padding: 0; }
.rf-update {
	display: grid; grid-template-columns: 38px 22px 1fr; gap: 6px;
	align-items: start; padding: 8px 0; border-bottom: 1px solid rgba(34, 48, 70, .6);
	font-size: 12px;
}
.rf-update:last-child { border-bottom: 0; }
.rf-update time { color: var(--rf-muted); font-variant-numeric: tabular-nums; }
.rf-update__icon svg { width: 15px; height: 15px; color: var(--rf-accent); }
.rf-update--scratching .rf-update__icon svg { color: var(--rf-neg); }
.rf-update--market .rf-update__icon svg { color: var(--rf-pos); }
.rf-update__body strong { display: block; font-weight: 700; color: var(--rf-text); }
.rf-update__where {
	display: block; font-size: 11px; font-weight: 600;
	color: var(--rf-accent); letter-spacing: .01em;
}
.rf-update__body em { font-style: normal; color: var(--rf-muted); }
.rf-updates__more { display: inline-block; margin-top: 8px; }

/* Loading state during a background refresh */
.rf-panel[data-rf-loading="1"] { opacity: .65; transition: opacity .2s; }

.rf-hub .screen-reader-text {
	position: absolute; width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}


/* ==================================================================
   Race card, meeting and index pages (RF_Routes templates)
   ================================================================== */

.rf-racing {
	--rf-bg:        #0d1623;
	--rf-panel:     #131e2e;
	--rf-panel-2:   #18243a;
	--rf-line:      #223046;
	--rf-text:      #e7eef7;
	--rf-muted:     #8fa1b8;
	--rf-accent:    #f26a21;
	--rf-accent-2:  #ff8a3d;
	--rf-pos:       #35d07f;
	--rf-neg:       #f0556b;
	--rf-radius:    10px;

	background: var(--rf-bg);
	color: var(--rf-text);

	/* Space for a header that sits ON TOP of the page rather than above it.
	   A transparent or overlay header normally gets cleared by padding the
	   theme adds to its own page template — which these pages never run,
	   because the plugin supplies the template. rf-live.js measures the real
	   overlap and sets this; the fallbacks below cover the moment before it
	   does, so nothing flashes underneath the nav. */
	--rf-header-offset: 0px;
	padding: calc(24px + var(--rf-header-offset)) 16px 48px;
}

body.transparent-header .rf-racing,
body.mobile-transparent-header .rf-racing,
body.has-transparent-header .rf-racing,
body.kadence-transparent-header .rf-racing { --rf-header-offset: 110px; }

@media (max-width: 1024px) {
	body.transparent-header .rf-racing,
	body.mobile-transparent-header .rf-racing,
	body.has-transparent-header .rf-racing,
	body.kadence-transparent-header .rf-racing { --rf-header-offset: 80px; }
}
.rf-racing__inner { max-width: 1120px; margin: 0 auto; }
.rf-racing h1, .rf-racing h2, .rf-racing h3 { color: var(--rf-text) !important; }
.rf-racing a { color: var(--rf-accent); }

.rf-crumbs { font-size: 12px; color: var(--rf-muted); margin-bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.rf-crumbs a { color: var(--rf-muted) !important; text-decoration: none; }
.rf-crumbs a:hover { color: var(--rf-accent) !important; }

.rf-meetstrip {
	display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
	background: var(--rf-panel);
	border: 1px solid var(--rf-line);
	border-radius: var(--rf-radius);
	padding: 12px 14px;
	margin-bottom: 14px;
}
.rf-meetstrip__track { font-size: 20px; font-weight: 800; color: #fff; }

.rf-racing .rf-tabs { margin-bottom: 16px; }
.rf-racing .rf-tab { text-decoration: none; }

.rf-cardhead { margin: 0 0 18px; }
.rf-cardhead__title { margin: 0 0 8px; font-size: clamp( 22px, 3vw, 30px ); line-height: 1.2; font-weight: 800; }
.rf-cardhead__meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.rf-cardhead__countdown {
	margin: 0; font-size: clamp( 30px, 4vw, 42px ); font-weight: 900; line-height: 1;
	color: var(--rf-accent); font-variant-numeric: tabular-nums;
}
.rf-section-title {
	font-size: 13px !important; text-transform: uppercase; letter-spacing: .08em;
	color: var(--rf-muted) !important; margin: 24px 0 10px;
}

.rf-results {
	background: var(--rf-panel); border: 1px solid var(--rf-line);
	border-radius: var(--rf-radius); padding: 12px 14px; margin-bottom: 18px;
}
.rf-results h2 { margin: 0 0 8px; font-size: 13px !important; text-transform: uppercase; letter-spacing: .08em; color: var(--rf-muted) !important; }
.rf-results__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rf-results__list li { display: flex; align-items: baseline; gap: 10px; font-size: 14px; }
.rf-results__pos {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--rf-accent); color: #fff; font-size: 11px; font-weight: 800;
}
.rf-results__num { color: var(--rf-muted); font-variant-numeric: tabular-nums; min-width: 18px; }
.rf-results__horse { font-weight: 700; }
.rf-results__who { color: var(--rf-muted); font-size: 13px; }

/* Full-field table */
.rf-runners--full { background: var(--rf-panel); border-radius: var(--rf-radius); }
.rf-runners--full td, .rf-runners--full th { padding: 9px 8px; }
.rf-col-prices { min-width: 240px; }
.rf-prices { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rf-price {
	display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
	min-width: 68px; padding: 4px 8px;
	background: var(--rf-panel-2); border: 1px solid var(--rf-line); border-radius: 6px;
	text-decoration: none; line-height: 1.2;
}
.rf-price__book { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--rf-muted); }
.rf-price__odds { font-size: 14px; font-weight: 800; color: var(--rf-text); font-variant-numeric: tabular-nums; }
.rf-price.is-best { border-color: var(--rf-accent); }
.rf-price.is-best .rf-price__odds { color: var(--rf-accent-2); }
.rf-price.is-linked:hover { background: var(--rf-accent); border-color: var(--rf-accent); }
.rf-price.is-linked:hover .rf-price__book,
.rf-price.is-linked:hover .rf-price__odds { color: #fff; }

/* Meeting page race list */
.rf-racelist, .rf-meetinglist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rf-racelist__link, .rf-meetinglist__link {
	display: flex; align-items: center; gap: 14px;
	background: var(--rf-panel); border: 1px solid var(--rf-line);
	border-radius: var(--rf-radius); padding: 12px 14px;
	text-decoration: none; color: var(--rf-text) !important;
	transition: border-color .15s, background .15s;
}
.rf-racelist__link:hover, .rf-meetinglist__link:hover { border-color: var(--rf-accent); background: var(--rf-panel-2); }
.rf-racelist__item.is-done .rf-racelist__link { opacity: .62; }
.rf-racelist__num {
	flex: 0 0 auto; min-width: 42px; text-align: center;
	font-weight: 800; font-size: 15px; color: var(--rf-accent);
}
.rf-racelist__body { flex: 1 1 auto; min-width: 0; }
.rf-racelist__name { display: block; font-weight: 700; font-size: 14px; }
.rf-racelist__meta { display: block; font-size: 12px; color: var(--rf-muted); margin-top: 2px; }
.rf-racelist__pick { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.rf-racelist__label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--rf-muted); }
.rf-racelist__horse { font-weight: 700; font-size: 13px; }

.rf-meetinglist__track { flex: 1 1 auto; font-weight: 700; font-size: 15px; display: flex; gap: 8px; align-items: baseline; }
.rf-meetinglist__meta { font-size: 12px; color: var(--rf-muted); }

.rf-nextprev { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.rf-nextprev__link {
	background: var(--rf-panel); border: 1px solid var(--rf-line); border-radius: 6px;
	padding: 8px 14px; font-size: 13px; font-weight: 600;
	text-decoration: none; color: var(--rf-text) !important;
}
.rf-nextprev__link:hover { border-color: var(--rf-accent); color: var(--rf-accent) !important; }

.rf-racing .rf-compliance { max-width: 760px; }

@media (max-width: 600px) {
	.rf-racing { padding: 16px 12px 36px; }
	.rf-prices { justify-content: flex-start; }
	.rf-racelist__pick { display: none; }
}


/* Feed-unavailable notice. Deliberately loud: aged prices must never look live. */
.rf-stalewarn {
	margin: 0 0 10px;
	padding: 8px 10px;
	border: 1px solid rgba(240, 85, 107, .45);
	border-left-width: 3px;
	border-radius: 6px;
	background: rgba(240, 85, 107, .10);
	color: var(--rf-text);
	font-size: 12px;
	line-height: 1.45;
}
.rf-racing .rf-stalewarn { max-width: 760px; }


/* ---------- Live updates archive ---------- */

.rf-lede { color: var(--rf-muted); font-size: 14px; margin: 0 0 18px; max-width: 640px; }
.rf-daygroup { margin-bottom: 26px; }

.rf-archive { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rf-archive__item {
	display: grid;
	grid-template-columns: 72px 24px 1fr;
	gap: 10px;
	align-items: start;
	background: var(--rf-panel);
	border: 1px solid var(--rf-line);
	border-radius: var(--rf-radius);
	padding: 12px 14px;
}
/* Anything written by a person stands apart from the machine-generated rows. */
.rf-archive__item.is-editorial {
	border-left: 3px solid var(--rf-accent);
	background: var(--rf-panel-2);
}
.rf-archive__time {
	color: var(--rf-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	padding-top: 2px;
	white-space: nowrap;
}
.rf-archive__icon svg { width: 16px; height: 16px; color: var(--rf-accent); margin-top: 1px; }
.rf-archive__item.rf-update--scratching .rf-archive__icon svg { color: var(--rf-neg); }
.rf-archive__item.rf-update--market .rf-archive__icon svg { color: var(--rf-pos); }
.rf-archive__body { min-width: 0; }
.rf-archive__title {
	margin: 0 0 2px !important;
	font-size: 15px !important;
	font-weight: 700;
	color: var(--rf-text) !important;
}
.rf-archive__where { margin: 0 0 4px; font-size: 12px; font-weight: 600; }
.rf-archive__where a { color: var(--rf-accent) !important; text-decoration: none; }
.rf-archive__where a:hover { text-decoration: underline; }
.rf-tagline {
	display: inline-block; margin-left: 6px;
	font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--rf-accent-2);
}
.rf-archive__detail { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--rf-muted) !important; }
.rf-archive__note {
	margin: 20px 0 0; font-size: 12px; color: var(--rf-muted) !important; max-width: 640px;
}
.rf-nextprev__count { font-size: 12px; color: var(--rf-muted); align-self: center; }

@media (max-width: 600px) {
	.rf-archive__item { grid-template-columns: 58px 20px 1fr; gap: 8px; padding: 10px 12px; }
	.rf-archive__title { font-size: 14px !important; }
}


/* Safety net: if a theme still tries to put these pages in a narrow,
   sidebar-shaped column, override it for our pages only. The race table needs
   the width, and nothing on these pages comes from a widget area. */
.rf-racing-page .content-container,
.rf-racing-page .site-container,
.rf-racing-page .content-area,
.rf-racing-page #primary {
	max-width: 100%;
	width: 100%;
	float: none;
}
.rf-racing-page #secondary,
.rf-racing-page .primary-sidebar,
.rf-racing-page .widget-area { display: none; }