/* Generated by tools/export.py in saturday-racing-redesign from its src/css/ - do not edit here. */
html.px-on {
--lw-h2: clamp(30px, calc(1.6vw + 17px), 40px);
--lw-h3: clamp(24px, calc(0.8vw + 16.5px), 28px);
--lw-pad: clamp(20px, 5vw, 72px);
}
html.px-on #chamberVerdict,
html.px-on #chamberSignals,
html.px-on .re-decision-section,
html.px-on .re-signals-section,
html.px-on .gn-fancies-section,
html.px-on .market-movers,
html.px-on #ai-intelligence,
html.px-on .gn-course-section {
position: relative;
margin: 0;
padding: 0 clamp(10px, 3vw, 40px);
background: var(--px-ground);
border: 0;
border-image: none;
box-shadow: none;
overflow: visible;
color: var(--px-navy);
font-family: var(--px-font);
font-variant-numeric: normal;
}
html.px-on #chamberVerdict::before,
html.px-on #chamberVerdict::after,
html.px-on #chamberSignals::before,
html.px-on #chamberSignals::after {
content: none;
display: none;
}
html.px-on #chamberVerdict {
padding-top: 80px;
}
html.px-on .re-decision-section,
html.px-on .gn-fancies-section,
html.px-on #ai-intelligence {
padding-top: 28px;
}
html.px-on .gn-course-section {
padding-bottom: 96px;
}
html.px-on .cv--verdict + .cv--signals {
margin-top: 0;
padding-top: 0;
border: 0;
}
html.px-on #chamberVerdict > .gn-container,
html.px-on #chamberSignals > .gn-container,
html.px-on .re-decision-section > .gn-container,
html.px-on .re-signals-section > .gn-container,
html.px-on .gn-fancies-section > .gn-container,
html.px-on .market-movers > .market-movers__inner,
html.px-on #ai-intelligence > .gn-container,
html.px-on .gn-course-section > .gn-container {
box-sizing: border-box;
display: flow-root;
position: relative;
width: auto;
max-width: 1200px;
margin: 0 auto;
padding: 64px var(--lw-pad) 0;
background: var(--px-paper);
border: 0;
border-radius: var(--px-radius-xl) var(--px-radius-xl) 0 0;
box-shadow: none;
color: var(--px-navy);
}
html.px-on #chamberSignals > .gn-container,
html.px-on .re-signals-section > .gn-container,
html.px-on .market-movers > .market-movers__inner,
html.px-on .gn-course-section > .gn-container {
padding-top: 56px;
padding-bottom: 64px;
border-radius: 0 0 var(--px-radius-xl) var(--px-radius-xl);
}
html.px-on #chamberSignals > .gn-container::before,
html.px-on .re-signals-section > .gn-container::before,
html.px-on .market-movers > .market-movers__inner::before,
html.px-on .gn-course-section > .gn-container::before {
content: '';
display: block;
height: 1px;
margin: 0 0 48px;
background: var(--px-hair);
}
html.px-on .cv__eyebrow,
html.px-on .re-decision-kicker,
html.px-on .re-signals-header::before,
html.px-on .gn-fancies-section .gn-section-title::before,
html.px-on .market-movers__header::before,
html.px-on #ai-intelligence .gn-section-title::before,
html.px-on .gn-course-section .gn-section-title::before {
display: block;
flex: 0 0 100%;
width: auto;
margin: 0 0 14px;
padding: 0 0 0 28px;
border: 0;
border-radius: 0;
background: linear-gradient(var(--px-gold), var(--px-gold)) no-repeat 0 50% / 18px 1.5px;
box-shadow: none;
font-family: var(--px-font);
font-size: var(--px-fs-2xs);
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--px-gold-ink);
-webkit-text-fill-color: currentcolor;
}
html.px-on .cv__eyebrow-dot {
display: none;
}
html.px-on .re-signals-header::before {
content: 'The three signals';
}
html.px-on .gn-fancies-section .gn-section-title::before {
content: 'The market';
}
html.px-on .market-movers__header::before {
content: 'Price movements';
}
html.px-on #ai-intelligence .gn-section-title::before {
content: 'The analysis';
}
html.px-on .gn-course-section .gn-section-title::before {
content: 'Race conditions';
}
html.px-on .market-movers__kicker {
display: none;
}
html.px-on .cv__title,
html.px-on .re-decision-title,
html.px-on .gn-fancies-section .gn-section-title,
html.px-on #ai-intelligence .gn-section-title,
html.px-on #chamberSignals .cv__title,
html.px-on .market-movers__title,
html.px-on .gn-course-section .gn-section-title {
margin: 0;
padding: 0;
background: none;
-webkit-text-fill-color: currentcolor;
text-shadow: none;
font-family: var(--px-display);
font-size: var(--lw-h2);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--px-navy);
}
html.px-on #chamberSignals .cv__title,
html.px-on .market-movers__title,
html.px-on .gn-course-section .gn-section-title {
font-size: var(--lw-h3);
line-height: 1.15;
letter-spacing: -0.015em;
}
html.px-on .cv__title {
display: block;
}
html.px-on .cv__title,
html.px-on .re-decision-title,
html.px-on .market-movers__title,
html.px-on .cv-hero__horse,
html.px-on .cv-fold__title,
html.px-on .re-decision-card__horse,
html.px-on .re-ai-card__pick {
text-wrap: balance;
}
html.px-on
:is(
.cv-hero__summary,
.cv-side__copy,
.cv-fold__sub,
.cv-explainer p,
.cv-telem p,
.cv-footer,
.re-decision-sub,
.re-decision-card__copy,
.re-signals-intro,
.re-signal__text,
.market-movers__sub,
.re-ai-card__reason,
.re-ai-card__devil-list li,
.gn-fancy-comment
) {
text-wrap: pretty;
}
html.px-on .re-decision-title {
display: block;
}
html.px-on .gn-fancies-section .gn-section-title,
html.px-on #ai-intelligence .gn-section-title,
html.px-on .gn-course-section .gn-section-title {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 16px;
}
html.px-on .gn-section-title > .px-i {
display: none;
}
html.px-on .gn-fancies-section .gn-section-sub,
html.px-on #ai-intelligence .gn-section-sub,
html.px-on .gn-course-section .gn-section-sub {
margin: 0;
font-family: var(--px-font);
font-size: var(--px-fs-md);
font-weight: 400;
line-height: 1.5;
letter-spacing: 0;
text-transform: none;
color: var(--px-ink-3);
}
html.px-on .re-decision-sub,
html.px-on .market-movers__sub,
html.px-on .re-signals-intro {
display: block;
max-width: 62ch;
margin: 12px 0 0;
font-family: var(--px-font);
font-size: var(--px-fs-lg);
font-weight: 400;
line-height: 1.6;
letter-spacing: 0;
text-align: left;
color: var(--px-ink-3);
}
html.px-on .cv-band,
html.px-on .cv-explainers .cv-explainer .cv-explainer__band,
html.px-on .gn-sr-badge,
html.px-on .gn-votes-pill,
html.px-on .re-ai-card .re-ai-card__confidence,
html.px-on .re-ai-card__devil .re-ai-card__devil-clamp {
display: inline-flex;
align-items: center;
gap: 7px;
box-sizing: border-box;
height: 24px;
margin: 0;
padding: 0 10px;
border: 0;
border-radius: var(--px-radius-pill);
background: var(--px-pill);
box-shadow: none;
font-family: var(--px-font);
font-size: var(--px-fs-xs);
font-weight: 600;
line-height: 1;
letter-spacing: 0.02em;
text-transform: none;
white-space: nowrap;
color: var(--px-pill-ink);
-webkit-text-fill-color: currentcolor;
}
html.px-on .cv-explainers .cv-explainer .cv-explainer__band::before,
html.px-on .re-ai-card__confidence::before,
html.px-on .re-ai-card__devil-clamp::before {
content: '';
flex: none;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--lw-dot, var(--px-icon));
}
html.px-on .cv-explainer[data-band='Speculative'] {
--lw-dot: var(--px-gold);
}
html.px-on .cv-explainer[data-band='High conviction'],
html.px-on .cv-explainer[data-band='Dominant'] {
--lw-dot: var(--px-green);
}
html.px-on .cv-explainer[data-band='Low conviction'] {
--lw-dot: var(--px-quiet);
}
html.px-on .cv-explainer[data-band='Live signal'] {
--lw-dot: var(--px-navy);
}
html.px-on .re-ai-card__confidence--high {
--lw-dot: var(--px-green);
}
html.px-on .re-ai-card__confidence--medium,
html.px-on .re-ai-card__confidence--speculative {
--lw-dot: var(--px-gold);
}
html.px-on .re-ai-card__confidence--low {
--lw-dot: var(--px-quiet);
}
html.px-on .re-ai-card__devil-clamp {
--lw-dot: var(--px-claret);
}
html.px-on .cv-hero__silk span,
html.px-on .cv-ring__value,
html.px-on .cv-explainer__value,
html.px-on .cv-telem__value,
html.px-on .cv-matrix__rank,
html.px-on .cv-matrix__score,
html.px-on .cv-matrix__odds,
html.px-on .gn-fancy-silk span,
html.px-on .gn-fancy-odds,
html.px-on .gn-sr-badge,
html.px-on .gn-vote-count,
html.px-on .movers-row__was,
html.px-on .movers-row__now,
html.px-on .re-ai-card__devil-count,
html.px-on .gcf-num {
font-variant-numeric: tabular-nums;
font-feature-settings: normal;
}
html.px-on .cv-ring__value,
html.px-on .cv-explainer__value,
html.px-on .cv-telem__value,
html.px-on .re-signal__num {
font-variant-numeric: lining-nums tabular-nums;
}
html.px-on .re-signal--votes .re-signal__num {
font-family: var(--px-font);
font-weight: 700;
letter-spacing: -0.01em;
}
html.px-on .cv-side__link,
html.px-on .cv-telemetry__link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--px-font);
font-size: var(--px-fs-sm);
font-weight: 600;
font-style: normal;
color: var(--px-navy);
text-decoration: none;
}
html.px-on .cv-side__link:hover,
html.px-on .cv-telemetry__link:hover {
color: var(--px-navy-2);
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
}
html.px-on
:is(
#chamberVerdict,
#chamberSignals,
.re-decision-section,
.re-signals-section,
.gn-fancies-section,
.market-movers,
#ai-intelligence,
.gn-course-section
)
:is(a, button, summary):focus-visible {
outline: var(--px-focus-width) solid var(--px-focus-color);
outline-offset: 3px;
border-radius: var(--px-radius-sm);
}
html.px-on .cv__head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 16px 24px;
margin: 0;
}
html.px-on .cv__title-block {
gap: 0;
}
html.px-on #chamberSignals .cv__head {
margin-bottom: 28px;
}
html.px-on .cv-rerun {
display: inline-flex;
align-items: center;
gap: 8px;
box-sizing: border-box;
height: 40px;
padding: 0 18px 0 15px;
background: transparent;
border: 1px solid var(--px-strong);
border-radius: var(--px-radius-pill);
box-shadow: none;
font-family: var(--px-font);
font-size: var(--px-fs-sm);
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--px-navy);
transition:
background-color 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
}
html.px-on .cv-rerun .px-i {
width: 15px;
height: 15px;
color: currentcolor;
}
@media (hover: hover) {
html.px-on .cv-rerun:hover {
background: var(--px-navy);
border-color: var(--px-navy);
color: #fff;
}
}
html.px-on .cv-rerun:active {
transform: none;
}
html.px-on .cv__data-thin {
color: var(--px-gold-ink);
}
html.px-on .cv-hero {
display: grid;
grid-template-columns: 64px minmax(0, 1fr) clamp(176px, 17vw, 220px);
column-gap: 32px;
align-items: center;
margin: 32px 0 0;
padding: 40px 0;
background: none;
border: 0;
border-block: 1px solid var(--px-hair);
border-radius: 0;
box-shadow: none;
overflow: visible;
}
html.px-on .cv-hero::before,
html.px-on .cv-hero::after {
content: none;
display: none;
}
html.px-on .cv-hero__silk {
box-sizing: border-box;
align-self: start;
width: 64px;
height: 64px;
margin: 0;
border: 1px solid var(--px-strong);
border-radius: 50%;
background: var(--px-surface);
box-shadow: none;
font-family: var(--px-display);
font-size: var(--px-fs-4xl);
font-weight: 600;
color: var(--px-navy);
}
html.px-on .cv-hero__silk span {
color: inherit;
text-shadow: none;
}
html.px-on .cv-hero__body {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
min-width: 0;
}
html.px-on .cv-hero__horse {
margin: 0;
font-family: var(--px-display);
font-size: clamp(34px, calc(2vw + 19px), 48px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--px-navy);
}
html.px-on .cv-hero__summary {
flex: 0 0 100%;
max-width: 62ch;
margin: 12px 0 0;
padding: 0;
border: 0;
font-family: var(--px-font);
font-size: var(--px-fs-xl);
font-weight: 400;
line-height: 1.65;
color: var(--px-lead);
}
html.px-on .cv-hero__summary .px-hn {
color: var(--px-navy);
font-weight: 600;
}
html.px-on .cv-hero__summary::first-letter {
float: none;
margin: 0;
font-family: inherit;
font-size: 1em;
font-weight: inherit;
line-height: inherit;
color: inherit;
}
html.px-on .cv-hero__summary::before,
html.px-on .cv-hero__summary::after {
content: none;
}
html.px-on .cv-hero__meta {
display: flex;
flex: 0 0 100%;
flex-wrap: wrap;
gap: 6px 24px;
margin: 8px 0 0;
padding: 0;
border: 0;
font-family: var(--px-font);
font-size: var(--px-fs-sm);
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--px-ink-3);
}
html.px-on .cv-hero__meta::before {
content: none;
display: none;
}
html.px-on .cv-hero__meta .cv-pill {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 0;
background: none;
border: 0;
box-shadow: none;
font: inherit;
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
color: var(--px-navy);
font-weight: 600;
}
html.px-on .cv-hero__meta .cv-pill + .cv-pill::before {
content: none;
}
html.px-on .cv-hero__meta .cv-pill::before {
position: static;
font-weight: 500;
color: var(--px-ink-3);
}
html.px-on #cvWinnerOdds::before {
content: 'Price';
}
html.px-on #cvWinnerTrainer::before {
content: 'Trainer';
}
html.px-on #cvWinnerJockey::before {
content: 'Jockey';
}
html.px-on .cv-ring {
display: grid;
place-items: center;
align-self: stretch;
width: auto;
height: auto;
margin: 0;
padding: 0 0 0 32px;
border-left: 1px solid var(--px-hair);
}
html.px-on .cv-ring__svg {
grid-area: 1 / 1;
width: 132px;
height: 132px;
}
html.px-on .cv-ring__track {
stroke: var(--px-line);
stroke-width: 4;
}
html.px-on .cv-ring__fill {
stroke: var(--px-gold);
stroke-width: 4;
stroke-linecap: round;
filter: none;
}
html.px-on .cv-ring__inner {
grid-area: 1 / 1;
position: static;
inset: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
html.px-on .cv-ring__value {
font-family: var(--px-display);
font-size: var(--px-fs-6xl);
font-weight: 600;
line-height: 1;
letter-spacing: -0.01em;
color: var(--px-navy);
}
html.px-on .cv-ring__label {
font-family: var(--px-font);
font-size: var(--px-fs-2xs);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--px-ink-3);
}
html.px-on .cv-trio {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin: 40px 0 0;
padding: 0;
}
html.px-on .cv-trio::before {
content: none;
display: none;
}
html.px-on .cv-side {
display: flex;
flex-direction: column;
gap: 8px;
padding: 24px;
background: var(--px-surface);
border: 1px solid var(--px-line);
border-radius: var(--px-radius-lg);
box-shadow: none;
transform: none;
transition: none;
}
html.px-on .cv-side:hover {
transform: none;
box-shadow: none;
}
html.px-on .cv-side::after {
content: none;
display: none;
}
html.px-on .cv-side__label {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--px-font);
font-size: var(--px-fs-2xs);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--px-ink-3);
}
html.px-on .cv-side__label .px-i {
width: 15px;
height: 15px;
color: var(--px-icon);
}
html.px-on .cv-side--danger .cv-side__label .px-i {
color: var(--px-claret);
}
html.px-on .cv-side--value .cv-side__label .px-i {
color: var(--px-green);
}
html.px-on .cv-side__horse {
margin: 4px 0 0;
font-family: var(--px-display);
font-size: var(--px-fs-4xl);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--px-navy);
}
html.px-on .cv-side__copy {
margin: 0 0 8px;
font-size: var(--px-fs-base);
line-height: 1.55;
color: var(--px-ink-2);
}
html.px-on .cv-side__meta,
html.px-on .cv-side__link {
display: flex;
align-items: center;
box-sizing: border-box;
min-height: 40px;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--px-line);
font-family: var(--px-font);
font-size: var(--px-fs-sm);
font-weight: 600;
font-style: normal;
line-height: 1.5;
color: var(--px-navy);
}
html.px-on .cv-fold {
margin: 0;
background: none;
border: 0;
border-top: 1px solid var(--px-hair);
border-radius: 0;
box-shadow: none;
overflow: visible;
}
html.px-on .cv-fold + .cv-fold {
margin-top: 0;
}
html.px-on .cv-fold:last-of-type {
border-bottom: 1px solid var(--px-hair);
}
html.px-on .cv-fold__summary {
display: grid;
grid-template-columns: minmax(0, 1fr) 40px;
align-items: center;
gap: 4px 24px;
padding: 22px 0;
background: none;
border-radius: 0;
}
html.px-on .cv-fold__summary:hover {
background: none;
}
html.px-on .cv-fold__summary > .px-i:not(.px-i--caret) {
display: none;
}
html.px-on .cv-fold__title {
grid-column: 1;
grid-row: 1;
font-family: var(--px-display);
font-size: var(--px-fs-3xl);
font-weight: 700;
line-height: 1.25;
color: var(--px-navy);
}
html.px-on .cv-fold__sub {
grid-column: 1;
grid-row: 2;
margin: 0;
font-size: var(--px-fs-base);
line-height: 1.5;
color: var(--px-ink-3);
}
html.px-on .cv-fold__summary > .px-i--caret {
grid-column: 2;
grid-row: 1 / span 2;
box-sizing: border-box;
width: 40px;
height: 40px;
padding: 13px;
border: 1px solid var(--px-strong);
border-radius: 50%;
background: transparent;
color: var(--px-navy);
transition: transform 0.2s var(--px-ease);
}
html.px-on .cv-fold[open] > .cv-fold__summary > .px-i--caret {
background: var(--px-navy);
border-color: var(--px-navy);
color: #fff;
transform: rotate(180deg);
}
@media (hover: hover) {
html.px-on .cv-fold__summary:hover .cv-fold__title {
color: var(--px-navy-2);
}
html.px-on .cv-fold__summary:hover > .px-i--caret {
border-color: var(--px-navy);
}
}
html.px-on .cv-fold__body {
display: flex;
flex-direction: column;
gap: 32px;
padding: 8px 0 40px;
}
html.px-on .cv-telemetry {
order: -1;
padding: 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
}
html.px-on .cv-telemetry__title {
margin: 0 0 14px;
font-family: var(--px-font);
font-size: var(--px-fs-2xs);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--px-ink-3);
}
html.px-on .cv-telemetry__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
margin: 0;
border-block: 1px solid var(--px-hair);
}
html.px-on .cv-telem {
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px 24px;
background: none;
border: 0;
border-radius: 0;
}
html.px-on .cv-telem:first-child {
padding-left: 0;
}
html.px-on .cv-telem + .cv-telem {
border-left: 1px solid var(--px-hair);
}
html.px-on .cv-telem__label {
margin: 0;
font-size: var(--px-fs-2xs);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--px-ink-3);
}
html.px-on .cv-telem__value {
margin: 0;
font-family: var(--px-display);
font-size: var(--px-fs-6xl);
font-weight: 600;
line-height: 1;
color: var(--px-navy);
}
html.px-on .cv-telem p {
margin: 0;
font-size: var(--px-fs-sm);
line-height: 1.5;
color: var(--px-ink-2);
}
html.px-on .cv-telemetry__link {
min-height: 40px;
margin-top: 6px;
}
html.px-on .cv-explainers {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
}
html.px-on .cv-explainer {
display: flex;
flex-direction: column;
gap: 10px;
padding: 24px 28px 24px 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
}
html.px-on .cv-explainer::before,
html.px-on .cv-explainer::after {
content: none;
}
html.px-on .cv-explainer:not(:nth-child(3n + 1)) {
padding-left: 28px;
border-left: 1px solid var(--px-hair);
}
html.px-on .cv-explainer:nth-child(3n) {
padding-right: 0;
}
html.px-on .cv-explainer:nth-child(n + 4) {
border-top: 1px solid var(--px-hair);
}
html.px-on .cv-explainer__head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
html.px-on .cv-explainer__label {
font-family: var(--px-font);
font-size: var(--px-fs-sm);
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--px-navy);
}
html.px-on .cv-explainer__value {
margin-top: 4px;
font-family: var(--px-display);
font-size: var(--px-fs-5xl);
font-weight: 600;
line-height: 1;
letter-spacing: -0.01em;
color: var(--px-navy);
}
html.px-on .cv-explainer__bar {
height: 3px;
background: var(--px-hair);
border-radius: var(--px-radius-pill);
box-shadow: none;
}
html.px-on .cv-explainer__bar > span {
background: var(--px-navy);
border-radius: var(--px-radius-pill);
box-shadow: none;
}
html.px-on .cv-explainer__bar-meta {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: -2px;
font-size: var(--px-fs-xs);
font-weight: 500;
letter-spacing: 0;
color: var(--px-ink-3);
}
html.px-on .cv-explainer__bar-meta > span:first-child {
display: inline-flex;
align-items: center;
gap: 5px;
}
html.px-on .cv-explainer__bar-meta > span:last-child {
color: var(--px-navy);
font-weight: 600;
}
html.px-on .cv-explainer__bar-meta .px-i {
width: 13px;
height: 13px;
margin: 0;
color: var(--px-icon);
}
html.px-on .cv-explainer p {
margin: 2px 0 0;
font-size: var(--px-fs-sm);
line-height: 1.55;
color: var(--px-ink-2);
}
html.px-on .cv-matrix {
display: flex;
flex-direction: column;
gap: 0;
padding: 0 0 28px;
}
html.px-on .cv-matrix__row {
display: grid;
grid-template-columns: 32px minmax(160px, 240px) minmax(0, 1fr) 56px 56px;
align-items: center;
gap: 20px;
padding: 16px 0;
background: none;
border: 0;
border-bottom: 1px solid var(--px-hair);
border-radius: 0;
}
html.px-on .cv-matrix__row:first-child {
background: none;
border-color: var(--px-hair);
border-top: 1px solid var(--px-hair);
}
html.px-on .cv-matrix__row:last-child {
border-bottom: 0;
}
html.px-on .cv-matrix__rank {
display: block;
width: auto;
min-width: 0;
height: auto;
background: none;
border-radius: 0;
box-shadow: none;
font-family: var(--px-display);
font-size: var(--px-fs-lg);
font-weight: 600;
line-height: 1;
color: var(--px-ink-3);
}
html.px-on .cv-matrix__row:first-child .cv-matrix__rank {
background: none;
color: var(--px-gold-ink);
}
html.px-on .cv-matrix__name {
font-family: var(--px-font);
font-size: var(--px-fs-md);
font-weight: 600;
color: var(--px-navy);
}
html.px-on .cv-matrix__bar {
height: 4px;
background: var(--px-hair);
border-radius: var(--px-radius-pill);
box-shadow: none;
}
html.px-on .cv-matrix__bar > span {
background: var(--px-navy);
border-radius: var(--px-radius-pill);
box-shadow: none;
}
html.px-on .cv-matrix__row:first-child .cv-matrix__bar > span {
background: var(--px-gold);
}
html.px-on .cv-matrix__score,
html.px-on .cv-matrix__odds {
display: block;
padding: 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
text-align: right;
font-family: var(--px-display);
font-size: var(--px-fs-md);
font-weight: 700;
line-height: 1.2;
color: var(--px-navy);
}
html.px-on .cv-matrix__odds {
color: var(--px-ink-3);
font-weight: 600;
}
html.px-on .cv-footer {
display: block;
margin: 28px 0 0;
font-size: var(--px-fs-xs);
line-height: 1.6;
color: var(--px-ink-3);
}
html.px-on .cv-footer .px-i {
display: none;
}
html.px-on .cv-footer a {
padding-block: 12px;
border: 0;
color: var(--px-navy);
font-weight: 600;
text-decoration: underline;
text-decoration-color: var(--px-strong);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
html.px-on .cv-footer a:hover {
color: var(--px-navy-2);
text-decoration-color: currentcolor;
}
html.px-on .re-decision-head {
margin: 0;
}
html.px-on .re-decision-sub {
margin-top: 14px;
}
html.px-on .re-decision-grid,
html.px-on .re-decision-grid--two {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: 20px;
margin-top: 36px;
}
html.px-on .re-decision-card {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 28px 32px;
background: var(--px-surface);
border: 1px solid var(--px-line);
border-radius: var(--px-radius-lg);
box-shadow: none;
transition:
transform 0.2s var(--px-ease),
box-shadow 0.2s var(--px-ease),
border-color 0.2s var(--px-ease);
}
html.px-on .re-decision-card::before {
content: none;
display: none;
}
html.px-on .re-decision-card__label {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
font-family: var(--px-font);
font-size: var(--px-fs-2xs);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--px-ink-3);
}
html.px-on .re-decision-card__label .px-i {
width: 15px;
height: 15px;
color: var(--px-icon);
}
html.px-on .re-decision-card__horse {
margin: 6px 0 0;
background: none;
-webkit-text-fill-color: currentcolor;
font-family: var(--px-display);
font-size: var(--px-fs-6xl);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--px-navy);
}
html.px-on .re-decision-card__meta {
margin: 0;
font-size: var(--px-fs-sm);
font-weight: 500;
color: var(--px-ink-3);
}
html.px-on .re-decision-card__copy {
margin: 4px 0 18px;
max-width: 52ch;
font-size: var(--px-fs-md);
line-height: 1.6;
color: var(--px-ink-2);
}
html.px-on .re-decision-card__link {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
height: 40px;
margin-top: auto;
padding: 0 20px;
border: 1px solid var(--px-strong);
border-radius: var(--px-radius-pill);
background: transparent;
font-family: var(--px-font);
font-size: var(--px-fs-base);
font-weight: 600;
letter-spacing: 0;
text-decoration: none;
color: var(--px-navy);
transition:
background-color 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
}
html.px-on .re-decision-card--you .re-decision-card__link {
background: var(--px-navy);
border-color: var(--px-navy);
color: #fff;
}
html.px-on .re-decision-card__link::after {
content: '';
position: absolute;
inset: 0;
border-radius: var(--px-radius-lg);
}
@media (hover: hover) {
html.px-on .re-decision-card:hover {
transform: translateY(-2px);
border-color: var(--px-lift-line);
box-shadow: var(--px-shadow-lift);
}
html.px-on .re-decision-card--you:hover .re-decision-card__link {
background: var(--px-navy-2);
border-color: var(--px-navy-2);
}
html.px-on .re-decision-card--ai:hover .re-decision-card__link {
border-color: var(--px-navy);
}
}
html.px-on .re-decision-banner {
margin-top: 16px;
padding: 14px 20px;
background: var(--px-surface);
border: 1px solid var(--px-line);
border-radius: var(--px-radius-lg);
font-size: var(--px-fs-base);
color: var(--px-ink-2);
}
html.px-on .re-decision-banner__pill {
min-height: 24px;
padding: 0 10px;
border-radius: var(--px-radius-pill);
background: var(--px-pill);
font-size: var(--px-fs-xs);
font-weight: 600;
letter-spacing: 0.02em;
text-transform: none;
color: var(--px-pill-ink);
}
html.px-on .re-signals-header {
margin: 0 0 12px;
text-align: left;
}
html.px-on .re-signals-intro {
margin-top: 0;
}
html.px-on .re-signals-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
margin: 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
overflow: visible;
}
html.px-on .re-signal {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto 1fr auto;
align-items: center;
align-content: stretch;
column-gap: 14px;
padding: 28px 32px;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
transform: none;
transition: none;
}
html.px-on .re-signal:hover {
background: none;
transform: none;
box-shadow: none;
}
html.px-on .re-signal::before,
html.px-on .re-signal::after {
content: none;
display: none;
}
html.px-on .re-signal:first-child {
padding-left: 0;
}
html.px-on .re-signal:last-child {
padding-right: 0;
}
html.px-on .re-signal + .re-signal {
border-left: 1px solid var(--px-hair);
}
html.px-on .re-signal > .px-i {
display: none;
}
html.px-on .re-signal__num {
grid-column: 1;
grid-row: 1;
margin: 0;
background: none;
-webkit-text-fill-color: currentcolor;
text-shadow: none;
display: flex;
align-items: center;
height: 34px;
font-family: var(--px-display);
font-size: var(--px-fs-5xl);
font-weight: 600;
line-height: 1;
color: var(--px-navy);
}
html.px-on .re-signal--ai .re-signal__num {
font-size: var(--px-fs-xl);
letter-spacing: 2px;
color: var(--px-gold-ink);
}
html.px-on .re-signal__title {
grid-column: 2;
grid-row: 1;
margin: 0;
font-family: var(--px-display);
font-size: var(--px-fs-xl);
font-weight: 700;
line-height: 1.25;
color: var(--px-navy);
}
html.px-on .re-signal__text {
grid-column: 1 / -1;
align-self: start;
margin: 14px 0 0;
font-size: var(--px-fs-base);
line-height: 1.6;
color: var(--px-ink-2);
}
html.px-on .re-signal__tag {
grid-column: 1 / -1;
place-self: end start;
margin: 14px 0 0;
padding: 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
font-family: var(--px-font);
font-size: var(--px-fs-2xs);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--px-gold-ink);
}
html.px-on .gn-fancies-section .gn-section-title {
margin-bottom: 32px;
}
html.px-on .gn-fancies-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
html.px-on .gn-fancy-card {
position: relative;
display: grid;
grid-template-columns: 40px minmax(150px, 1.1fr) minmax(170px, 1fr) auto minmax(0, 1.4fr) 68px;
grid-template-areas: 'silk info conn rate note odds';
gap: 10px 24px;
align-items: center;
padding: 14px 20px 14px 16px;
background: var(--px-surface) !important;
border: 1px solid var(--px-line) !important;
border-radius: var(--px-radius-lg);
box-shadow: none;
opacity: 1 !important;
transform: none !important;
transition:
transform 0.2s var(--px-ease),
box-shadow 0.2s var(--px-ease),
border-color 0.2s var(--px-ease) !important;
}
@media (hover: hover) {
html.px-on .gn-fancy-card:hover {
background: var(--px-surface) !important;
border-color: var(--px-lift-line) !important;
box-shadow: var(--px-shadow-lift);
transform: translateY(-2px) !important;
}
}
html.px-on .gn-fancy-card:active {
transform: none !important;
}
html.px-on .gn-fancy-card.gn-fancy-card--nr {
opacity: 0.55 !important;
}
html.px-on .gn-fancy-name .gn-fav-tag {
display: inline-flex;
align-items: center;
gap: 6px;
height: 22px;
padding: 0 9px;
border-radius: var(--px-radius-pill);
background: var(--px-pill);
font-family: var(--px-font);
font-size: var(--px-fs-2xs);
font-weight: 700;
letter-spacing: 0.08em;
color: var(--px-pill-ink);
}
html.px-on .gn-fancy-name .gn-fav-tag::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--px-gold);
}
html.px-on .gn-fancy-top {
display: contents;
}
html.px-on .gn-fancy-silk {
grid-area: silk;
box-sizing: border-box;
width: 36px;
height: 36px;
border: 1px solid var(--px-strong);
border-radius: 50%;
background: var(--px-paper);
box-shadow: none;
color: var(--px-navy);
text-shadow: none;
}
html.px-on .gn-fancy-silk span {
font-family: var(--px-display);
font-size: var(--px-fs-md);
font-weight: 700;
color: inherit;
text-shadow: none;
}
html.px-on .gn-fancy-info {
grid-area: info;
min-width: 0;
}
html.px-on .gn-fancy-name {
gap: 8px;
font-size: var(--px-fs-xl);
line-height: 1.2;
}
html.px-on .gn-fancy-name a,
html.px-on .gn-fancy-name .gn-horse-link {
border-bottom: 0;
font-family: var(--px-display);
font-size: var(--px-fs-xl);
font-weight: 700;
letter-spacing: -0.005em;
color: var(--px-navy);
text-decoration: none;
}
html.px-on .gn-fancy-name .gn-horse-link::after {
content: '';
position: absolute;
inset: 0;
border-radius: var(--px-radius-lg);
}
html.px-on .gn-fancy-meta {
margin-top: 3px;
font-size: var(--px-fs-xs);
font-weight: 500;
color: var(--px-ink-3);
}
html.px-on .gn-fancy-odds {
grid-area: odds;
justify-self: end;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 60px;
height: 34px;
padding: 0 12px;
border: 0;
border-radius: var(--px-radius-pill);
background: var(--px-navy);
box-shadow: none;
font-family: var(--px-display);
font-size: var(--px-fs-lg);
font-weight: 700;
color: #fff;
-webkit-text-fill-color: #fff;
}
html.px-on .gn-fancy-connections {
grid-area: conn;
position: relative;
z-index: 1;
justify-self: start;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px 16px;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
font-size: var(--px-fs-sm);
line-height: 1.55;
color: var(--px-ink-2);
}
html.px-on .gn-fancy-connections br,
html.px-on .gn-fancy-connections .gn-conn-label:has(+ .connection-link) {
display: none;
}
html.px-on .gn-fancy-connections .gn-conn-label {
font-size: var(--px-fs-2xs);
font-weight: 700;
letter-spacing: 0.04em;
color: var(--px-ink-3);
}
html.px-on .gn-fancy-connections .connection-link {
max-width: 100%;
color: var(--px-navy);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
html.px-on .gn-fancy-connections .gn-conn-label + .connection-link::before {
display: inline-block;
min-width: 11px;
margin-right: 6px;
font-size: var(--px-fs-2xs);
font-weight: 700;
letter-spacing: 0.04em;
color: var(--px-ink-3);
}
html.px-on .gn-fancy-connections .gn-conn-label:first-child + .connection-link::before {
content: 'J';
}
html.px-on .gn-fancy-connections br + .gn-conn-label + .connection-link::before {
content: 'T';
}
html.px-on .gn-fancy-connections .connection-link:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
html.px-on .gn-fancy-ratings {
grid-area: rate;
position: relative;
z-index: 1;
justify-self: start;
flex-wrap: nowrap;
gap: 8px;
margin: 0;
padding: 0;
border: 0;
}
html.px-on .gn-ai-stars {
font-size: var(--px-fs-md);
letter-spacing: 1px;
color: var(--px-gold-ink);
}
html.px-on .gn-votes-pill .px-i {
width: 13px;
height: 13px;
color: var(--px-icon);
}
html.px-on .gn-votes-pill .gn-vote-count {
color: inherit;
}
html.px-on .gn-fancy-ratings .gn-votes-pill {
display: none;
}
html.px-on .gn-fancy-ratings [title].gn-ai-stars:hover::after {
left: 0;
transform: none;
width: max-content;
max-width: 260px;
padding: 8px 12px;
background: var(--px-navy);
border: 0;
border-radius: var(--px-radius-md);
box-shadow: var(--px-shadow-lift);
font-family: var(--px-font);
font-size: var(--px-fs-xs);
font-weight: 500;
line-height: 1.45;
letter-spacing: 0;
color: var(--px-on-ink);
}
html.px-on .gn-fancy-comment {
grid-area: note;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
font-size: var(--px-fs-sm);
line-height: 1.5;
color: var(--px-ink-2);
}
html.px-on .market-movers__header {
margin: 0 0 28px;
}
html.px-on .market-movers__title {
margin: 0;
}
html.px-on .market-movers__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
gap: 20px;
}
html.px-on .movers-card {
min-height: 0;
padding: 6px 24px 10px;
background: var(--px-surface);
border: 1px solid var(--px-line);
border-radius: var(--px-radius-lg);
box-shadow: none;
}
html.px-on .movers-card__head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 10px;
margin: 0;
padding: 18px 0 14px;
border-bottom: 1px solid var(--px-line);
}
html.px-on .movers-card__head > .px-i {
width: 16px;
height: 16px;
padding: 0;
background: none;
box-shadow: none;
}
html.px-on .movers-card--steamers .movers-card__head > .px-i {
color: var(--px-green);
}
html.px-on .movers-card--drifters .movers-card__head > .px-i {
color: var(--px-claret);
}
html.px-on .movers-card__heading {
font-family: var(--px-display);
font-size: var(--px-fs-2xl);
font-weight: 700;
letter-spacing: 0;
color: var(--px-navy);
}
html.px-on .movers-card__hint {
margin-left: auto;
font-size: var(--px-fs-xs);
font-weight: 500;
color: var(--px-ink-3);
}
html.px-on .movers-list {
margin: 0;
padding: 0;
}
html.px-on .movers-row + .movers-row {
border-top: 1px solid var(--px-line);
}
html.px-on .movers-row__link {
gap: 3px 16px;
margin: 0 -12px;
padding: 12px;
border-radius: var(--px-radius-md);
color: var(--px-navy);
transition: none;
}
@media (hover: hover) {
html.px-on .movers-row__link:hover {
background: var(--px-paper);
}
html.px-on .movers-row__link:hover .movers-row__horse {
color: var(--px-navy-2);
}
}
html.px-on .movers-row__horse {
font-family: var(--px-font);
font-size: var(--px-fs-md);
font-weight: 600;
color: var(--px-navy);
}
html.px-on .movers-row__meta {
font-size: var(--px-fs-xs);
font-weight: 500;
color: var(--px-ink-3);
}
html.px-on .movers-row__prices {
gap: 8px;
font-variant-numeric: normal;
}
html.px-on .movers-row__was {
font-family: var(--px-font);
font-size: var(--px-fs-sm);
font-weight: 500;
font-variant-numeric: lining-nums tabular-nums;
color: var(--px-ink-3);
text-decoration: line-through;
text-decoration-color: var(--px-icon);
}
html.px-on .movers-row__prices .px-i {
width: 12px;
height: 12px;
color: var(--px-icon);
}
html.px-on .movers-row__now {
min-width: 36px;
text-align: right;
font-family: var(--px-display);
font-size: var(--px-fs-lg);
font-weight: 700;
}
html.px-on .movers-row__now--in {
color: var(--px-green);
}
html.px-on .movers-row__now--out {
color: var(--px-claret);
}
html.px-on .movers-empty {
font-size: var(--px-fs-sm);
color: var(--px-ink-3);
}
html.px-on #ai-intelligence .gn-section-title {
margin-bottom: 40px;
}
html.px-on .re-ai-grid,
html.px-on .re-ai-grid--single {
display: block;
margin: 0;
}
html.px-on .re-ai-grid:not(.re-ai-grid--single) {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: 20px;
}
html.px-on .re-ai-grid:not(.re-ai-grid--single) > .re-ai-card {
display: flex;
flex-direction: column;
padding: 24px;
background: var(--px-surface);
border: 1px solid var(--px-line);
border-radius: var(--px-radius-lg);
}
html.px-on .re-ai-grid:not(.re-ai-grid--single) .re-ai-card__reason,
html.px-on .re-ai-grid:not(.re-ai-grid--single) .re-ai-card__devil {
padding-left: 0;
border-left: 0;
}
html.px-on .re-ai-grid:not(.re-ai-grid--single) .re-ai-card__pick {
font-size: var(--px-fs-5xl);
}
html.px-on .re-ai-grid:not(.re-ai-grid--single) .re-ai-card__reason {
font-size: var(--px-fs-md);
}
html.px-on .re-ai-card {
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
grid-template-rows: auto auto auto auto 1fr auto;
grid-template-areas:
'head   reason'
'pick   reason'
'conf   reason'
'list   reason'
'ext    reason'
'devil  devil';
column-gap: 56px;
align-items: start;
padding: 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
}
html.px-on .re-ai-card:hover {
background: none;
box-shadow: none;
}
html.px-on .re-ai-card::before,
html.px-on .re-ai-card::after {
content: none;
display: none;
}
html.px-on .re-ai-card > .re-ai-card__header {
grid-area: head;
}
html.px-on .re-ai-card > .re-ai-card__pick {
grid-area: pick;
}
html.px-on .re-ai-card > .re-ai-card__confidence {
grid-area: conf;
justify-self: start;
}
html.px-on .re-ai-card > .re-ai-card__shortlist {
grid-area: list;
}
html.px-on .re-ai-card > .re-ai-card__extras {
grid-area: ext;
}
html.px-on .re-ai-card > .re-ai-card__reason {
grid-area: reason;
align-self: stretch;
}
html.px-on .re-ai-card > .re-ai-card__devil {
grid-area: devil;
}
html.px-on .re-ai-card__header,
html.px-on a.re-ai-card__header-link {
display: inline-flex;
align-items: center;
justify-self: start;
gap: 10px;
margin: 0 0 18px;
padding: 0;
border-radius: var(--px-radius-pill);
background: none;
}
html.px-on a.re-ai-card__header-link:hover {
background: none;
}
html.px-on .re-ai-card__header svg {
width: 28px;
height: 28px;
}
html.px-on .re-ai-card__name {
font-family: var(--px-font);
font-size: var(--px-fs-sm);
font-weight: 600;
letter-spacing: 0;
color: var(--px-navy);
}
html.px-on a.re-ai-card__header-link:hover .re-ai-card__name {
color: var(--px-navy-2);
text-decoration: underline;
text-underline-offset: 3px;
}
html.px-on .re-ai-card__pick {
margin: 0 0 14px;
font-family: var(--px-display);
font-size: var(--px-fs-7xl);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--px-navy);
}
html.px-on .re-ai-card__confidence {
margin: 0;
}
html.px-on .re-ai-card__reason {
max-width: 68ch;
margin: 0;
padding: 0 0 32px 56px;
border-left: 1px solid var(--px-hair);
white-space: pre-line;
font-family: var(--px-font);
font-size: var(--px-fs-lg);
font-weight: 400;
line-height: 1.7;
color: var(--px-lead);
}
html.px-on .re-ai-card__reason .px-hn,
html.px-on .re-ai-card__devil-list .px-hn,
html.px-on .re-ai-card__shortlist-text .px-hn,
html.px-on .re-ai-card__extras .px-hn {
color: var(--px-navy);
font-weight: 600;
}
html.px-on .re-ai-card__shortlist,
html.px-on .re-ai-card__extra {
display: grid;
grid-template-columns: 88px minmax(0, 1fr);
align-items: baseline;
gap: 12px;
margin: 0;
padding: 14px 0;
border: 0;
border-top: 1px solid var(--px-hair);
font-size: var(--px-fs-base);
line-height: 1.5;
color: var(--px-navy);
}
html.px-on .re-ai-card__shortlist {
margin-top: 32px;
}
html.px-on .re-ai-card__extras {
display: block;
margin: 0;
font-size: var(--px-fs-base);
}
html.px-on .re-ai-card__shortlist-label,
html.px-on .re-ai-card__extra strong {
margin: 0;
font-size: var(--px-fs-2xs);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--px-ink-3);
}
html.px-on .re-ai-card__shortlist-label::after {
content: ':';
}
html.px-on .re-ai-card__shortlist-text {
font-weight: 500;
color: var(--px-navy);
}
html.px-on .re-ai-card__shortlist-text .px-hn {
white-space: nowrap;
}
html.px-on .re-ai-card__extra {
font-weight: 600;
}
html.px-on .re-ai-card__devil {
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
html.px-on .re-ai-card__devil-summary,
html.px-on .re-ai-card__devil--clamped .re-ai-card__devil-summary {
display: flex;
align-items: center;
gap: 10px;
min-height: 40px;
padding: 14px 0;
background: none;
border: 0;
border-top: 1px solid var(--px-hair);
border-radius: 0;
font-family: var(--px-font);
font-size: var(--px-fs-md);
font-weight: 600;
letter-spacing: 0;
color: var(--px-navy);
}
html.px-on .re-ai-card__devil-summary:hover,
html.px-on .re-ai-card__devil--clamped .re-ai-card__devil-summary:hover {
background: none;
}
html.px-on .re-ai-card__devil-summary .px-i {
width: 16px;
height: 16px;
color: var(--px-icon);
}
html.px-on .re-ai-card__devil-summary {
flex-wrap: wrap;
row-gap: 6px;
}
html.px-on .re-ai-card__devil-label {
white-space: nowrap;
font-size: var(--px-fs-md);
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--px-navy);
}
html.px-on .re-ai-card__devil-count,
html.px-on .re-ai-card__devil--clamped .re-ai-card__devil-count {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 22px;
height: 22px;
padding: 0 6px;
background: var(--px-pill);
border: 0;
border-radius: var(--px-radius-pill);
box-shadow: none;
font-size: var(--px-fs-xs);
font-weight: 700;
color: var(--px-pill-ink);
}
html.px-on .re-ai-card__devil-summary > .px-i--caret {
box-sizing: border-box;
width: 32px;
height: 32px;
margin-left: auto;
padding: 10px;
border: 1px solid var(--px-strong);
border-radius: 50%;
color: var(--px-navy);
transition: transform 0.2s var(--px-ease);
}
html.px-on .re-ai-card__devil[open] .re-ai-card__devil-summary > .px-i--caret {
background: var(--px-navy);
border-color: var(--px-navy);
color: #fff;
transform: rotate(180deg);
}
@media (hover: hover) {
html.px-on .re-ai-card__devil-summary:hover .re-ai-card__devil-label {
color: var(--px-navy-2);
}
html.px-on .re-ai-card__devil-summary:hover > .px-i--caret {
border-color: var(--px-navy);
}
}
html.px-on .re-ai-card__devil-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 56px;
margin: 0;
padding: 4px 0 12px;
list-style: none;
font-size: var(--px-fs-md);
line-height: 1.6;
color: var(--px-ink-2);
}
html.px-on .re-ai-card__devil-list li {
position: relative;
margin: 0;
padding-left: 20px;
color: var(--px-ink-2);
}
html.px-on .re-ai-card__devil-list li::before {
content: '';
position: absolute;
left: 2px;
top: 0.66em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--px-claret);
}
html.px-on .re-fox-pick {
gap: 12px 20px;
padding: 16px 20px;
border: 1px solid var(--px-line);
border-radius: var(--px-radius-md);
background: var(--px-surface);
}
html.px-on .re-fox-pick__label {
color: var(--px-ink-3);
font-family: var(--px-font);
font-size: var(--px-fs-2xs);
}
html.px-on .re-fox-pick__horse {
color: var(--px-navy);
font-family: var(--px-display);
font-size: var(--px-fs-2xl);
font-weight: 700;
}
html.px-on .re-fox-pick__link {
border-bottom-color: var(--px-hair);
color: var(--px-navy);
font-family: var(--px-font);
font-size: var(--px-fs-sm);
font-weight: 600;
}
html.px-on .re-fox-pick__link:hover {
border-bottom-color: var(--px-navy);
color: var(--px-navy);
}
html.px-on .re-battleground-line {
color: var(--px-ink-2);
font-family: var(--px-font);
font-size: var(--px-fs-base);
}
html.px-on .gn-course-section .gn-section-title {
margin-bottom: 28px;
}
html.px-on .gn-course-facts {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0;
border-block: 1px solid var(--px-hair);
}
html.px-on .gn-course-fact,
html.px-on .gn-course-fact.is-revealed {
display: grid;
grid-template-rows: 24px 40px auto;
align-content: start;
row-gap: 10px;
padding: 24px;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
opacity: 1;
transform: none;
transition: none;
}
html.px-on .gn-course-fact:hover,
html.px-on .gn-course-fact.is-revealed:hover {
background: none;
box-shadow: none;
transform: none;
border-color: var(--px-hair);
}
html.px-on .gn-course-fact::before,
html.px-on .gn-course-fact::after {
content: none;
display: none;
}
html.px-on .gn-course-fact:first-child {
padding-left: 0;
}
html.px-on .gn-course-fact:last-child {
padding-right: 0;
}
html.px-on .gn-course-fact + .gn-course-fact {
border-left: 1px solid var(--px-hair);
}
html.px-on .gn-course-fact .gcf-icon {
align-self: center;
width: 20px;
height: 20px;
color: var(--px-icon);
}
html.px-on .gcf-num,
html.px-on .gcf-num--going {
display: block;
align-self: center;
width: auto;
max-width: 100%;
margin: 0;
padding: 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
-webkit-text-fill-color: currentcolor;
text-shadow: none;
font-family: var(--px-display);
font-size: var(--lw-fact, var(--px-fs-4xl));
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.01em;
white-space: nowrap;
color: var(--px-navy);
}
html.px-on .gn-course-fact:first-child .gcf-num:not(.gcf-num--going, .px-trip, .px-orig-trip) {
font-family: var(--px-font);
font-size: calc(var(--lw-fact, var(--px-fs-4xl)) - 2px);
font-weight: 600;
letter-spacing: -0.02em;
}
html.px-on .gcf-num--going {
display: inline-flex;
align-items: center;
justify-self: start;
gap: 10px;
}
html.px-on .gcf-num--going::before {
content: '';
flex: none;
width: 6px;
height: 6px;
border-radius: 50%;
background: currentcolor;
}
html.px-on .gcf-num--going-good {
color: var(--px-green);
}
html.px-on .gcf-num--going-soft {
color: var(--px-gold-ink);
}
html.px-on .gcf-num--going-heavy {
color: var(--px-claret);
}
html.px-on .gcf-label {
margin: 0;
font-size: var(--px-fs-xs);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0;
text-transform: none;
color: var(--px-ink-3);
}
html.px-on .gcf-pulse-row {
display: none;
}
@media (width < 1200px) {
html.px-on .gn-fancy-card {
grid-template-columns: 40px minmax(140px, 1fr) minmax(160px, 1fr) auto 64px;
grid-template-areas:
'silk info conn rate odds'
'.    note note note .';
}
html.px-on .gn-fancy-comment {
-webkit-line-clamp: 1;
}
}
@media (width < 1200px) {
html.px-on .re-ai-card {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto auto auto auto auto;
grid-template-areas:
'head   list'
'pick   ext'
'conf   ext'
'reason reason'
'devil  devil';
column-gap: 48px;
}
html.px-on .re-ai-card > .re-ai-card__shortlist {
margin-top: 0;
}
html.px-on .re-ai-card > .re-ai-card__confidence {
align-self: start;
}
html.px-on .re-ai-card > .re-ai-card__reason {
align-self: start;
max-width: none;
margin: 32px 0 0;
padding: 32px max(0px, calc(100% - 660px)) 28px 0;
border-left: 0;
border-top: 1px solid var(--px-hair);
}
}
@media (width <= 900px) {
html.px-on .cv-trio {
grid-template-columns: 1fr;
gap: 0;
padding: 0 24px;
background: var(--px-surface);
border: 1px solid var(--px-line);
border-radius: var(--px-radius-lg);
}
html.px-on .cv-side {
padding: 22px 0;
background: none;
border: 0;
border-radius: 0;
}
html.px-on .cv-side + .cv-side {
border-top: 1px solid var(--px-line);
}
html.px-on .cv-side__meta,
html.px-on .cv-side__link {
min-height: 0;
margin-top: 2px;
padding-top: 0;
border-top: 0;
}
html.px-on .cv-side__link {
min-height: 40px;
margin-bottom: -10px;
}
html.px-on .cv-side__copy {
margin-bottom: 0;
}
html.px-on .gn-fancy-card {
grid-template-columns: 36px minmax(0, 1fr) auto 64px;
grid-template-areas:
'silk info rate odds'
'.    conn conn conn';
column-gap: 16px;
}
html.px-on .gn-fancy-comment {
display: none;
}
html.px-on .gn-fancy-connections {
flex-flow: row wrap;
}
html.px-on .gn-course-fact,
html.px-on .gn-course-fact.is-revealed {
padding: 22px 16px;
}
html.px-on .gn-course-fact:first-child {
padding-left: 0;
}
html.px-on .gn-course-fact:last-child {
padding-right: 0;
}
html.px-on .gn-course-facts {
--lw-fact: var(--px-fs-3xl);
}
html.px-on .movers-card__hint {
flex-basis: 100%;
margin-left: 26px;
}
}
@media (width > 640px) and (width <= 900px) {
html.px-on .cv-side {
display: grid;
grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
grid-template-rows: auto auto 1fr;
gap: 6px 32px;
align-items: start;
}
html.px-on .cv-side__label {
grid-column: 1;
grid-row: 1;
}
html.px-on .cv-side__horse {
grid-column: 1;
grid-row: 2 / span 2;
margin-top: 0;
}
html.px-on .cv-side__copy {
grid-column: 2;
grid-row: 1 / span 2;
}
html.px-on .cv-side__meta,
html.px-on .cv-side__link {
grid-column: 2;
grid-row: 3;
margin-top: 0;
}
html.px-on .cv-side__link {
min-height: 40px;
margin: -10px 0;
}
}
@media (width <= 640px) {
html.px-on #chamberVerdict,
html.px-on #chamberSignals,
html.px-on .re-decision-section,
html.px-on .re-signals-section,
html.px-on .gn-fancies-section,
html.px-on .market-movers,
html.px-on #ai-intelligence,
html.px-on .gn-course-section {
padding-left: 10px;
padding-right: 10px;
}
html.px-on #chamberVerdict {
padding-top: 40px;
}
html.px-on .re-decision-section,
html.px-on .gn-fancies-section,
html.px-on #ai-intelligence {
padding-top: 12px;
}
html.px-on .gn-course-section {
padding-bottom: 56px;
}
html.px-on #chamberVerdict > .gn-container,
html.px-on #chamberSignals > .gn-container,
html.px-on .re-decision-section > .gn-container,
html.px-on .re-signals-section > .gn-container,
html.px-on .gn-fancies-section > .gn-container,
html.px-on .market-movers > .market-movers__inner,
html.px-on #ai-intelligence > .gn-container,
html.px-on .gn-course-section > .gn-container {
padding: 36px 20px 0;
border-radius: var(--px-radius-lg) var(--px-radius-lg) 0 0;
}
html.px-on #chamberSignals > .gn-container,
html.px-on .re-signals-section > .gn-container,
html.px-on .market-movers > .market-movers__inner,
html.px-on .gn-course-section > .gn-container {
padding-top: 32px;
padding-bottom: 36px;
border-radius: 0 0 var(--px-radius-lg) var(--px-radius-lg);
}
html.px-on #chamberSignals > .gn-container::before,
html.px-on .re-signals-section > .gn-container::before,
html.px-on .market-movers > .market-movers__inner::before,
html.px-on .gn-course-section > .gn-container::before {
margin-bottom: 32px;
}
html.px-on .gn-fancies-section .gn-section-sub,
html.px-on #ai-intelligence .gn-section-sub,
html.px-on .gn-course-section .gn-section-sub {
flex-basis: 100%;
margin-top: 8px;
}
html.px-on .re-decision-sub,
html.px-on .market-movers__sub,
html.px-on .re-signals-intro {
font-size: var(--px-fs-md);
}
html.px-on .cv__head {
align-items: flex-start;
}
html.px-on .cv-hero {
grid-template-columns: 48px minmax(0, 1fr) 88px;
grid-template-areas:
'silk name name'
'silk band band'
'sum  sum  sum'
'meta meta ring';
gap: 0 14px;
align-items: start;
margin-top: 24px;
padding: 28px 0;
}
html.px-on .cv-hero__body {
display: contents;
}
html.px-on .cv-hero__silk {
grid-area: silk;
width: 48px;
height: 48px;
margin-top: 2px;
font-size: var(--px-fs-2xl);
}
html.px-on .cv-hero__horse {
grid-area: name;
align-self: center;
font-size: var(--px-fs-5xl);
}
html.px-on .cv-band {
grid-area: band;
justify-self: start;
margin-top: 10px;
}
html.px-on .cv-hero__summary {
grid-area: sum;
margin-top: 20px;
font-size: var(--px-fs-lg);
line-height: 1.6;
}
html.px-on .cv-hero__meta {
grid-area: meta;
flex-direction: column;
align-items: flex-start;
align-self: center;
gap: 6px;
margin-top: 22px;
font-size: var(--px-fs-sm);
}
html.px-on .cv-hero__meta .cv-pill {
white-space: normal;
}
html.px-on .cv-ring {
grid-area: ring;
place-self: center end;
margin-top: 22px;
padding: 0;
border: 0;
}
html.px-on .cv-ring__svg {
width: 88px;
height: 88px;
}
html.px-on .cv-ring__value {
font-size: var(--px-fs-4xl);
}
html.px-on .cv-ring__label {
font-size: var(--px-fs-2xs);
letter-spacing: 0.02em;
text-transform: none;
}
html.px-on .cv-trio {
margin-top: 28px;
padding: 0 18px;
}
html.px-on .cv-side {
padding: 18px 0;
}
html.px-on .cv-side__horse {
font-size: var(--px-fs-3xl);
}
html.px-on #chamberSignals .cv__head {
margin-bottom: 20px;
}
html.px-on .cv-fold__summary {
gap: 4px 16px;
padding: 18px 0;
}
html.px-on .cv-fold__title {
font-size: var(--px-fs-2xl);
}
html.px-on .cv-fold__body {
gap: 24px;
padding-bottom: 28px;
}
html.px-on .cv-telemetry__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
html.px-on .cv-telem {
padding: 18px 16px;
}
html.px-on .cv-telem:nth-child(odd) {
padding-left: 0;
border-left: 0;
}
html.px-on .cv-telem:nth-child(even) {
padding-right: 0;
border-left: 1px solid var(--px-hair);
}
html.px-on .cv-telem:nth-child(n + 3) {
border-top: 1px solid var(--px-hair);
}
html.px-on .cv-telem__value {
font-size: var(--px-fs-5xl);
}
html.px-on .cv-explainers {
grid-template-columns: 1fr;
}
html.px-on .cv-explainer,
html.px-on .cv-explainer:not(:nth-child(3n + 1)),
html.px-on .cv-explainer:nth-child(3n) {
padding: 20px 0;
border-left: 0;
}
html.px-on .cv-explainer:first-child {
padding-top: 0;
}
html.px-on .cv-explainer + .cv-explainer {
border-top: 1px solid var(--px-hair);
}
html.px-on .cv-explainer__head {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
html.px-on .cv-explainer__value {
font-size: var(--px-fs-5xl);
}
html.px-on .cv-matrix__row {
grid-template-columns: 22px minmax(0, 1fr) auto auto;
grid-template-areas:
'rank name score odds'
'.    bar  bar   bar';
gap: 10px 14px;
padding: 14px 0;
}
html.px-on .cv-matrix__rank {
grid-area: rank;
}
html.px-on .cv-matrix__name {
grid-area: name;
min-width: 0;
}
html.px-on .cv-matrix__bar {
grid-area: bar;
}
html.px-on .cv-matrix__score {
grid-area: score;
}
html.px-on .cv-matrix__odds {
grid-area: odds;
display: block;
min-width: 34px;
}
html.px-on .cv-footer {
margin-top: 24px;
}
html.px-on .re-decision-grid {
grid-template-columns: 1fr;
gap: 12px;
margin-top: 28px;
}
html.px-on .re-decision-card {
padding: 22px 20px 20px;
}
html.px-on .re-decision-card__horse {
font-size: var(--px-fs-4xl);
}
html.px-on .re-decision-card__copy {
margin-bottom: 14px;
}
html.px-on .re-decision-card__link {
align-self: stretch;
height: 44px;
}
html.px-on .re-signals-grid {
grid-template-columns: 1fr;
}
html.px-on .re-signal,
html.px-on .re-signal:first-child,
html.px-on .re-signal:last-child {
padding: 20px 0;
}
html.px-on .re-signal:last-child {
padding-bottom: 0;
}
html.px-on .re-signal + .re-signal {
border-left: 0;
border-top: 1px solid var(--px-hair);
}
html.px-on .re-signal__text {
margin-top: 10px;
font-size: var(--px-fs-base);
}
html.px-on .re-signal__tag {
margin-top: 10px;
}
html.px-on .re-signals-header {
margin-bottom: 8px;
}
html.px-on .gn-fancies-section .gn-section-title {
margin-bottom: 24px;
}
html.px-on .gn-fancies-grid {
gap: 8px;
}
html.px-on .gn-fancy-card {
grid-template-columns: 32px minmax(72px, max-content) minmax(0, 1fr) auto;
grid-template-rows: auto auto auto;
grid-template-areas:
'silk name name odds'
'.    meta rate rate'
'.    conn conn conn';
gap: 6px 12px;
padding: 12px 14px 13px 12px;
}
html.px-on .gn-fancy-info {
display: contents;
}
html.px-on .gn-fancy-name {
grid-area: name;
align-self: center;
min-width: 0;
}
html.px-on .gn-fancy-meta {
grid-area: meta;
align-self: center;
margin: 0;
white-space: nowrap;
}
html.px-on .gn-fancy-ratings {
grid-area: rate;
align-self: center;
flex-wrap: wrap;
gap: 4px 8px;
}
html.px-on .gn-fancy-silk {
align-self: center;
width: 32px;
height: 32px;
}
html.px-on .gn-fancy-silk span {
font-size: var(--px-fs-base);
}
html.px-on .gn-fancy-connections {
grid-area: conn;
font-size: var(--px-fs-xs);
line-height: 1.5;
column-gap: 14px;
}
html.px-on .gn-fancy-name a,
html.px-on .gn-fancy-name .gn-horse-link {
font-size: var(--px-fs-lg);
}
html.px-on .gn-fancy-odds {
align-self: center;
min-width: 54px;
height: 32px;
font-size: var(--px-fs-md);
}
html.px-on .gn-ai-stars {
font-size: var(--px-fs-base);
letter-spacing: 0.5px;
}
html.px-on .gn-sr-badge {
height: 22px;
padding: 0 9px;
}
html.px-on .market-movers__header {
margin-bottom: 22px;
}
html.px-on .market-movers__grid {
grid-template-columns: 1fr;
gap: 12px;
}
html.px-on .movers-card {
padding: 4px 18px 8px;
}
html.px-on .movers-card__hint {
flex-basis: 100%;
margin-left: 26px;
}
html.px-on .movers-row__link {
margin: 0 -10px;
padding: 12px 10px;
}
html.px-on #ai-intelligence .gn-section-title {
margin-bottom: 28px;
}
html.px-on .re-ai-card {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: 'head' 'pick' 'conf' 'list' 'ext' 'reason' 'devil';
}
html.px-on .re-ai-card__pick {
font-size: var(--px-fs-5xl);
}
html.px-on .re-ai-card > .re-ai-card__shortlist {
margin-top: 24px;
}
html.px-on .re-ai-card > .re-ai-card__reason {
margin-top: 8px;
padding: 24px 0;
font-size: var(--px-fs-lg);
line-height: 1.65;
}
html.px-on .re-ai-card__devil-list {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
font-size: var(--px-fs-base);
}
html.px-on .re-ai-card__shortlist,
html.px-on .re-ai-card__extra {
grid-template-columns: 84px minmax(0, 1fr);
font-size: var(--px-fs-base);
}
html.px-on .gn-course-section .gn-section-title {
margin-bottom: 22px;
}
html.px-on .gn-course-facts {
--lw-fact: var(--px-fs-4xl);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
html.px-on .gn-course-fact,
html.px-on .gn-course-fact.is-revealed {
grid-template-rows: 22px 34px auto;
row-gap: 8px;
padding: 20px 0 20px 16px;
border-left: 0;
}
html.px-on .gn-course-fact + .gn-course-fact {
border-left: 0;
}
html.px-on .gn-course-fact:nth-child(odd) {
padding-left: 0;
padding-right: 16px;
}
html.px-on .gn-course-fact:nth-child(even) {
border-left: 1px solid var(--px-hair);
}
html.px-on .gn-course-fact:nth-child(n + 3) {
border-top: 1px solid var(--px-hair);
}
html.px-on .gn-course-fact:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
}
@media (width <= 360px) {
html.px-on .cv-hero {
grid-template-columns: 44px minmax(0, 1fr) 88px;
column-gap: 12px;
}
html.px-on .cv-hero__silk {
width: 44px;
height: 44px;
font-size: var(--px-fs-xl);
}
html.px-on .cv-hero__horse {
font-size: var(--px-fs-5xl);
}
html.px-on .cv-ring__label {
letter-spacing: 0;
}
html.px-on .gn-fancy-card {
grid-template-columns: 28px minmax(68px, max-content) minmax(0, 1fr) auto;
column-gap: 10px;
padding: 12px 12px 13px 10px;
}
html.px-on .gn-fancy-silk {
width: 28px;
height: 28px;
}
html.px-on .gn-fancy-silk span {
font-size: var(--px-fs-sm);
}
html.px-on .gn-fancy-name a,
html.px-on .gn-fancy-name .gn-horse-link {
font-size: var(--px-fs-lg);
}
html.px-on .gn-fancy-meta {
font-size: var(--px-fs-xs);
}
html.px-on .gn-fancy-odds {
min-width: 50px;
height: 32px;
padding: 0 10px;
font-size: var(--px-fs-base);
}
html.px-on .gn-fancy-ratings {
gap: 4px 6px;
}
html.px-on .gn-ai-stars {
font-size: var(--px-fs-xs);
letter-spacing: 0;
}
html.px-on .gn-sr-badge {
padding: 0 8px;
}
html.px-on .cv-telem {
padding-left: 12px;
padding-right: 12px;
}
html.px-on .cv-telem__value {
font-size: var(--px-fs-4xl);
}
html.px-on .gn-course-facts {
--lw-fact: var(--px-fs-2xl);
}
}
@media (height <= 500px) and (orientation: landscape) {
html.px-on #chamberVerdict {
padding-top: 40px;
}
}
@media (prefers-reduced-motion: reduce) {
html.px-on .re-decision-card,
html.px-on .gn-fancy-card,
html.px-on .cv-fold__summary > .px-i--caret,
html.px-on .re-ai-card__devil-summary > .px-i--caret {
transition: none !important;
}
html.px-on .re-decision-card:hover,
html.px-on .gn-fancy-card:hover {
transform: none !important;
}
}