/*
 * Telore in Sports — the few things the site's design system has no class for
 * (round SPORTS2).
 *
 * Every /sports page is drawn with the main site's own layout and components
 * from app.css: its header and footer, its type, buttons, cards, forms, tables
 * and tokens. This file adds only what that system cannot express — the
 * P1/P2/P3 result chips, the race-number plate and the card treatment for an
 * athlete without a photo, the ticker, the date block on an event, the chart,
 * and the two photographs — and it writes them in the site's own tokens
 * (var(--color-…), var(--radius-…), var(--font-display)), so they follow the
 * site's light and dark settings like everything else. No new colour value,
 * font or type scale is introduced here.
 *
 * Loaded only by the sports pages, and every rule sits under `.sports-page`,
 * the class those pages give <body>. SportsIsolationTest holds both, and that
 * app.css's tokens are untouched.
 */

/* ── Result chips: P1 gold, P2 silver, P3 bronze — and the words say it ──── */

.sports-page .sports-pos {
    /* The containing block of its own visually hidden "winner" label, which
       would otherwise be placed against the page and escape a table's
       scroller — 26px of sideways scroll on a phone. */
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding: 0 0.5rem;
    border-radius: var(--radius-sm);
    background-color: var(--color-ink-100);
    color: var(--color-ink-800);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sports-page .sports-pos--p1 {
    background-color: var(--color-warning-100);
    color: var(--color-warning-800);
    box-shadow: inset 0 0 0 1px var(--color-warning-300);
}

.sports-page .sports-pos--p2 {
    background-color: var(--color-ink-100);
    color: var(--color-ink-800);
    box-shadow: inset 0 0 0 1px var(--color-ink-300);
}

.sports-page .sports-pos--p3 {
    background-color: var(--color-sand-100);
    color: var(--color-sand-800);
    box-shadow: inset 0 0 0 1px var(--color-sand-300);
}

.sports-page .sports-pos--note {
    font-family: inherit;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ── The race-number plate, and an athlete card without a photo ─────────── */

.sports-page .sports-plate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 1.75rem;
    padding: 0 0.5rem;
    border-radius: var(--radius-sm);
    background-color: var(--color-brand-600);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.sports-page .sports-plate--sm {
    min-width: 1.75rem;
    height: 1.375rem;
    padding: 0 0.375rem;
    font-size: 0.75rem;
}

.sports-page .sports-plate--lg {
    min-width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-lg);
    font-size: 1.5rem;
}

.sports-page .sports-art {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* A quiet stand-in until a photo is uploaded: the page's own tint, not a
       block of colour heavier than the photos around it. */
    background: linear-gradient(150deg, var(--color-brand-50), var(--color-brand-100));
}

.sports-page .sports-art-number {
    position: absolute;
    right: 0.75rem;
    bottom: -0.25rem;
    font-family: var(--font-display);
    font-size: clamp(5rem, 14vw, 7.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--color-brand-200);
}

/* ── The ticker ──────────────────────────────────────────────────────────── */

.sports-page .sports-ticker {
    border-bottom: 1px solid var(--color-ink-200);
    background-color: var(--color-surface);
}

.sports-page .sports-ticker-viewport {
    overflow: hidden;
}

.sports-page .sports-ticker-track {
    display: flex;
    width: max-content;
    animation: sports-ticker 60s linear infinite;
}

.sports-page .sports-ticker:hover .sports-ticker-track,
.sports-page .sports-ticker:focus-within .sports-ticker-track,
.sports-page .sports-ticker.is-paused .sports-ticker-track {
    animation-play-state: paused;
}

.sports-page .sports-ticker-run {
    display: flex;
    gap: 2.5rem;
    padding-right: 2.5rem;
}

@keyframes sports-ticker {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ── An event's date ────────────────────────────────────────────────────── */

.sports-page .sports-date {
    display: grid;
    flex: none;
    justify-items: center;
    align-content: center;
    width: 4.5rem;
    height: 4.75rem;
    border-radius: var(--radius-lg);
    background-color: var(--color-brand-50);
    line-height: 1.1;
}

.sports-page .sports-date-day {
    font-family: var(--font-display);
    font-size: 1.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-ink-950);
}

.sports-page .sports-date-month {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-brand-700);
}

/* ── Results by round ───────────────────────────────────────────────────── */

.sports-page .sports-chart-svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

.sports-page .sports-chart-podium {
    fill: var(--color-warning-50);
}

.sports-page .sports-chart-grid {
    stroke: var(--color-ink-200);
    stroke-dasharray: 3 5;
}

.sports-page .sports-chart-axis {
    fill: var(--color-ink-500);
    font-size: 12px;
    font-weight: 600;
}

.sports-page .sports-chart-line {
    fill: none;
    stroke: var(--color-brand-600);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.sports-page .sports-chart-point circle {
    fill: var(--color-surface);
    stroke: var(--color-ink-500);
    stroke-width: 2.5;
}

.sports-page .sports-chart-point--p1 circle {
    fill: var(--color-warning-300);
    stroke: var(--color-warning-700);
}

.sports-page .sports-chart-point--p2 circle {
    fill: var(--color-ink-200);
    stroke: var(--color-ink-600);
}

.sports-page .sports-chart-point--p3 circle {
    fill: var(--color-sand-300);
    stroke: var(--color-sand-700);
}

.sports-page .sports-chart-label {
    fill: var(--color-ink-900);
    font-size: 13px;
    font-weight: 700;
}

/* ── The photographs ────────────────────────────────────────────────────── */

/*
 * The hero photo: a large rounded image, the way the site presents a
 * visual. Its box is fixed by width, height and aspect-ratio before it
 * loads, so nothing moves. On a phone it is cropped taller, with the driver
 * and the helmet kept in frame.
 */
.sports-page .sports-hero-photo {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    border: 1px solid var(--color-ink-200);
    background-color: var(--color-ink-900);
    aspect-ratio: 1916 / 821;
}

.sports-page .sports-hero-photo img,
.sports-page .sports-hero-photo video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    animation: sports-settle 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@media (max-width: 639px) {
    .sports-page .sports-hero-photo {
        aspect-ratio: 4 / 3.4;
    }

    .sports-page .sports-hero-photo img {
        object-position: 76% 40%;
    }
}

@keyframes sports-settle {
    from {
        transform: scale(1.035);
    }

    to {
        transform: scale(1);
    }
}

/*
 * The band above the footer: the photo full width, a gradient from the left
 * that keeps the words on it above AA contrast, the words live text.
 */
.sports-page .sports-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--color-brand-950);
    color: #fff;
}

.sports-page .sports-band picture,
.sports-page .sports-band img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% 50%;
}

.sports-page .sports-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* On a phone the words cover the whole width, so the shade does too. */
    background: linear-gradient(180deg, rgb(4 18 15 / 0.62) 0%, rgb(4 18 15 / 0.86) 45%, rgb(4 18 15 / 0.9) 100%);
}

@media (min-width: 64rem) {
    /* Wide: shade under the words on the left only, so the car on the
       right is seen as it was photographed. */
    .sports-page .sports-band::before {
        background: linear-gradient(90deg, rgb(4 18 15 / 0.9) 0%, rgb(4 18 15 / 0.82) 38%, rgb(4 18 15 / 0.35) 62%, rgb(4 18 15 / 0) 82%);
    }
}

.sports-page .sports-band :focus-visible {
    outline-color: #fff;
}

/* ── Round SPORTS-2: the front page's own pieces ────────────────────────── */

/*
 * The cap line under the hero's words: the one figure about money a public
 * page prints. A quiet rule to its left sets it apart from the paragraph
 * without making it louder than the headline.
 */
.sports-page .sports-cap {
    display: inline-block;
    padding: 0.25rem 0 0.25rem 1rem;
    border-left: 3px solid var(--color-brand-500);
    color: var(--color-ink-900);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
}

/*
 * A package: a tall column with its accent as a rule across the top. Not a
 * price card — there is no figure in it — so no "most popular" lift, no
 * shadow race between the three.
 */
.sports-page .sports-package {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 2rem 1.5rem 1.75rem;
    border: 1px solid var(--color-ink-200);
    border-radius: var(--radius-xl);
    background-color: var(--color-surface);
}

.sports-page .sports-package::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 0.375rem;
    background-color: var(--color-ink-800);
}

.sports-page .sports-package--sand::before {
    background-color: var(--color-sand-400);
}

.sports-page .sports-package--brand::before {
    background-color: var(--color-brand-600);
}

@media (min-width: 48rem) {
    .sports-page .sports-package {
        min-height: 100%;
        padding: 2.5rem 2rem 2rem;
    }
}

/* The sport buttons above the drawings: real buttons, 44px tall. */
.sports-page .sports-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sports-page .sports-pick {
    min-height: 2.75rem;
    padding: 0.5rem 1.125rem;
    border: 1px solid var(--color-ink-200);
    border-radius: 9999px;
    background-color: var(--color-surface);
    color: var(--color-ink-700);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.sports-page .sports-pick:hover {
    border-color: var(--color-ink-400);
    color: var(--color-ink-950);
}

.sports-page .sports-pick[aria-pressed="true"] {
    border-color: var(--color-ink-900);
    background-color: var(--color-ink-900);
    color: var(--color-surface);
}

.sports-page .sports-pick:focus-visible {
    outline: 2px solid var(--color-brand-500);
    outline-offset: 2px;
}

/* The drawings: lines in the site's ink, the kit itself left plain. */
.sports-page .sports-drawing-frame-box {
    border-radius: var(--radius-lg);
    background-color: var(--color-ink-50);
    padding: 0.5rem;
}

.sports-page .sports-drawing {
    display: block;
    width: 100%;
    height: auto;
    color: var(--color-ink-700);
}

.sports-page .sports-drawing-line {
    fill: var(--color-surface);
    stroke: currentColor;
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.sports-page .sports-drawing-frame {
    fill: none;
    stroke: currentColor;
    stroke-width: 6;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.sports-page .sports-drawing-detail {
    fill: none;
    stroke: var(--color-ink-400);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.sports-page .sports-drawing-tint {
    fill: var(--color-ink-100);
}

/* A numbered place on a drawing, and the same number beside its words. */
.sports-page .sports-spot circle {
    fill: var(--color-brand-solid);
    stroke: var(--color-surface);
    stroke-width: 3;
}

.sports-page .sports-spot text {
    fill: #fff;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
}

.sports-page .sports-spot-key {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background-color: var(--color-brand-solid);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Motion off, when asked ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .sports-page .sports-ticker-track,
    .sports-page .sports-hero-photo img,
    .sports-page .sports-hero-photo video {
        animation: none;
    }

    .sports-page .sports-ticker-viewport {
        overflow-x: auto;
    }

    .sports-page .sports-ticker-run[aria-hidden="true"] {
        display: none;
    }
}

/* ── "Why we ask": the small "?" beside a question (round SPORTS-3) ──────
   A round chip the form script reveals; it toggles the reason under the
   label. Small to look at, a full 44px to touch: the hit area is the
   pseudo-element around it. */

.sports-page .apply-why {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-inline-start: 0.375rem;
    border: 1px solid var(--color-ink-300);
    border-radius: 9999px;
    background-color: var(--color-surface);
    color: var(--color-ink-700);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
}

.sports-page .apply-why::after {
    content: "";
    position: absolute;
    inset: -0.625rem;
}

.sports-page .apply-why:hover {
    border-color: var(--color-ink-500);
    color: var(--color-ink-900);
}

.sports-page .apply-why:focus-visible {
    outline: 2px solid var(--color-brand-600);
    outline-offset: 2px;
}

.sports-page .apply-why[aria-expanded="true"] {
    border-color: var(--color-brand-600);
    background-color: var(--color-brand-50);
    color: var(--color-brand-800);
}

/* ── A countdown never moves the page (round SPORTS-3) ──────────────────────
   The date in words (shown without a script) and the four figures (shown
   with one) share one cell of a grid. Whichever is hidden keeps its place,
   invisible, so the moment the script swaps them changes no height. An empty
   figure holds the width and height of two digits until it is filled. The
   markup is untouched: the figures stay `hidden` and empty until the
   browser fills them, as a cached copy must have them. */

.sports-page [data-countdown] {
    display: grid;
}

.sports-page [data-countdown] > [data-countdown-fallback],
.sports-page [data-countdown] > [data-countdown-units] {
    grid-area: 1 / 1;
    align-self: stretch;
}

.sports-page [data-countdown] > [data-countdown-fallback][hidden] {
    display: block !important;
    visibility: hidden;
}

.sports-page [data-countdown] > [data-countdown-units][hidden] {
    display: grid !important;
    visibility: hidden;
}

.sports-page [data-countdown] [data-unit]:empty::before {
    content: "00";
    visibility: hidden;
}