/* Fast Results — the page's own styles.
 *
 * Every rule is scoped under #fast-results and every class is prefixed
 * `fres-`. Two reasons, both learned the hard way:
 *
 *  • `fr-` was already taken by race-result-popup.html's results block, so a
 *    shared prefix would have collided across two pages that show the same
 *    kind of data.
 *  • No class here is named after a positional Tailwind utility (fixed,
 *    absolute, relative, sticky, static, block, flex, grid, table). `.dx-tok
 *    .fixed` meaning "a fixed column" rendered every Data Export token out of
 *    flow in September, because Tailwind ships `.fixed{position:fixed}`.
 *
 * This page deliberately does NOT use Tailwind at all. A public, indexable
 * page should not be able to ship visually broken because a new utility class
 * was added without rebuilding the bundle — which has happened twice.
 *
 * ── THE LOOK IS PROFORM'S RESULT CARD (12-10-2026) ──────────────────────────
 * Simon approved a mockup of this page drawn in Proform's own fast-results
 * look: white rounded cards with a soft shadow, zebra runner rows edge to edge,
 * an EXPAND bar under a fade, VIEW: Race Details | Meeting Details beside FULL
 * REPLAY, maroon capitals for the actions, and a white filter card above.
 * The values below are read off Proform's compiled stylesheet (rounded-xl
 * 12px, shadow-md, rows 8px 20px with an 8px gap, 14px rows, 30px silks,
 * stone-300 rules, stone-100 zebra) and re-expressed here in our own small
 * CSS — none of their class names, none of their file.
 *
 * It was the FIRST page to carry the restyle, with its own palette and its own
 * sun / moon switch. Since stage 7 (13-10-2026) it is on the SHARED theme:
 * rm-theme.css supplies the --rm-* tokens (light, and dark under
 * html[data-restyle][data-theme="dark"]), the head snippet from rm-theme-head.js
 * applies the reader's choice before first paint, and RmTheme.mountToggle draws
 * the switch in the teal bar. The choice is still kept under
 * localStorage rm_theme:fast-results (page "fast-results", default LIGHT;
 * prefers-color-scheme is deliberately NOT followed), so a reader's old choice
 * carries over untouched. The look is unchanged: every colour below is an
 * --rm-* token, or one of the few page tokens just under here where the shared
 * set has no colour within a shade of the old one. Still no shared-nav.js and
 * no Tailwind.
 */

#fast-results {
    font-family: Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--fres-ink);
    background: var(--rm-page);
    min-height: 100vh;
    font-size: 16px;
    line-height: 1.5;
}

/* PAGE TOKENS. Roles whose colour moves between two different shared tokens
 * from light to dark (ink is primary-dark in light, white in dark), and the
 * four colours the shared set has nothing within a shade of: the EXPAND fade,
 * the card shadow (Proform's shadow-md, a touch firmer than --rm-shadow in
 * light), the Proform select caret and the hairline under the teal bar.
 * Dark sits inside @media screen like the shared dark tokens, so a page
 * printed while dark still prints light. */
html[data-restyle] #fast-results {
    --fres-ink: var(--rm-primary-dark);     /* headings: card title, race name, the going card */
    --fres-soft: var(--rm-text);            /* the lede and the day's date: teal in light, dimmed in dark */
    --fres-line: var(--rm-rule);            /* rules between rows, the panels' edge */
    --fres-panel: var(--rm-zebra);          /* Race Details / Meeting Details */
    --fres-top-edge: transparent;
    --fres-fade: #e7e5e4;
    --fres-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
    --fres-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M320 240L160 384 0 240l0-48 320 0 0 48z' fill='%2306414f'/%3E%3C/svg%3E");
}
@media screen {
html[data-restyle][data-theme="dark"] #fast-results {
    --fres-ink: var(--rm-text);
    --fres-soft: var(--rm-text-dim);
    --fres-line: var(--rm-line);
    --fres-panel: var(--rm-page);
    --fres-top-edge: var(--rm-on-band-rule);
    --fres-fade: rgba(0, 0, 0, .28);
    --fres-shadow: var(--rm-shadow);
    --fres-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M320 240L160 384 0 240l0-48 320 0 0 48z' fill='%23ffffff'/%3E%3C/svg%3E");
}
}

/* The page background is rm-theme.css's (html[data-restyle] body). */
body { margin: 0; }

#fast-results a { color: var(--rm-text); text-decoration: none; }
#fast-results a:hover { text-decoration: underline; }
#fast-results button { font-family: inherit; }
#fast-results :focus-visible { outline: 2px solid var(--rm-tertiary); outline-offset: 2px; }

/* Visually hidden, still read aloud. clip-path, never hidden overflow —
 * this stylesheet never hides overflow anywhere, so nothing can clip the
 * silk zoom. */
#fast-results .fres-sr,
#fast-results thead.fres-vh th {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    white-space: nowrap;
    clip-path: inset(50%);
}

/* Controls that need script. Without it they are hidden and the plain links
 * in <noscript> stand in (the head script adds fres-js to <html>). */
html:not(.fres-js) #fast-results .fres-needjs { display: none; }

/* ── header: the page's thin teal bar, unchanged in spirit ─────────────── */
#fast-results .fres-top {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--rm-band);
    color: var(--rm-on-band);
    box-shadow: inset 0 -1px 0 var(--fres-top-edge);   /* a hairline under the bar in dark only */
    flex-wrap: wrap;
}
#fast-results .fres-home {
    color: var(--rm-on-band);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -0.01em;
    text-decoration: none;
}
#fast-results .fres-nav { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto; }
#fast-results .fres-nav a { color: var(--rm-on-band-dim); text-decoration: none; font-size: 14px; }
#fast-results .fres-nav a:hover { color: var(--rm-on-band); text-decoration: underline; }

/* The sun / moon switch: the shared one (RmTheme.mountToggle fills the slot
 * once rm-theme.js has loaded; without script the slot stays empty). Moon in
 * light (go dark), sun in dark (go light), which rm-theme.css swaps. Sized and
 * coloured here as the page's own switch was, on the teal bar in both themes. */
#fast-results .fres-themeslot { display: inline-flex; }
#fast-results .fres-top .rmx-theme-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--rm-on-band-line);
    border-radius: 8px;
    background: transparent;
    color: var(--rm-on-band);
}
#fast-results .fres-top .rmx-theme-btn:hover { background: var(--rm-on-band-hover); }
#fast-results .fres-top .rmx-theme-btn:focus-visible { outline-color: var(--rm-on-band); }
#fast-results .fres-top .rmx-theme-btn svg { stroke-width: 2; }

/* ── layout ─────────────────────────────────────────────────────────────── */
#fast-results main {
    max-width: 1680px;
    margin: 0 auto;
    padding: 20px 20px 48px;
    box-sizing: border-box;
}
#fast-results .fres-intro { margin: 8px 0 20px; }
#fast-results h1 {
    margin: 0;
    font-size: 28px;
    line-height: 34px;
    font-weight: 800;
    color: var(--rm-text);
}
#fast-results .fres-lede {
    margin: 4px 0 0;
    font-size: 15px;
    line-height: 22px;
    font-weight: 300;
    color: var(--fres-soft);
    max-width: 80ch;
}
#fast-results .fres-h2 {
    margin: 0 0 20px;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: var(--rm-text);
}
#fast-results .fres-h2 span { font-weight: 300; color: var(--fres-soft); }
/* "Updated 20:05:33" beside the day (12-10-2026): small, muted, never wraps the heading's words apart. */
#fast-results .fres-h2 .fres-updated { margin-left: 10px; font-size: 13px; font-weight: 400; color: var(--rm-text-dim); white-space: nowrap; }

/* ── the going from the race times so far (RM Pro / Proform Premium, 13-10-2026) ──
 * Filled by the page script from the gated endpoint; empty and hidden in the served HTML.
 * A white card in the result cards' own look, one line per meeting. */
#fast-results .fres-going {
    margin: 0 0 20px;
    padding: 12px 18px 10px;
    background: var(--rm-surface);
    border-radius: 12px;
    box-shadow: var(--fres-shadow);
    border-left: 4px solid var(--rm-tertiary);
}
#fast-results .fres-going[hidden] { display: none; }
#fast-results .fres-going-head {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: var(--fres-ink);
    cursor: help;
}
#fast-results .fres-going-head span { font-weight: 400; color: var(--rm-text-dim); }
#fast-results .fres-going-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px 28px;
}
@media (min-width: 900px) {
    #fast-results .fres-going-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1500px) {
    #fast-results .fres-going-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
#fast-results .fres-going-row {
    font-size: 14px;
    line-height: 20px;
    color: var(--rm-text);
    cursor: help;
}
#fast-results .fres-going-course { font-weight: 700; }
#fast-results .fres-going-course::after { content: ':'; }
#fast-results .fres-going-so { color: var(--rm-text-dim); }
#fast-results .fres-going-name { font-weight: 700; color: var(--fres-ink); }
#fast-results .fres-going-ga { color: var(--rm-text-dim); white-space: nowrap; }
#fast-results .fres-going-wait { cursor: default; }
#fast-results .fres-going-wait .fres-going-note { color: var(--rm-text-dim); }
#fast-results .fres-going-foot,
#fast-results .fres-going-locked {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 17px;
    color: var(--rm-text-dim);
}
#fast-results .fres-going-locked { margin: 0; font-size: 13px; }
#fast-results .fres-going-locked a { color: var(--rm-action); font-weight: 600; }
#fast-results .fres-going:has(.fres-going-locked) { border-left-color: var(--fres-line); padding: 10px 18px; }

/* ── the filter card ────────────────────────────────────────────────────── */
#fast-results .fres-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 40px;
    padding: 20px;
    margin: 0 0 24px;
    background: var(--rm-surface);
    border-radius: 12px;
    box-shadow: var(--fres-shadow);
    color: var(--rm-text);
}

/* Today / Yesterday: Proform's outlined pill, filled when chosen. The pill's
 * ends are rounded per link (not by clipping the group) so nothing here needs
 * a hidden overflow. */
#fast-results .fres-dates { display: inline-flex; }
#fast-results .fres-date {
    padding: 6px 16px;
    border: 2px solid var(--rm-sel-bg);
    color: var(--rm-sel-bg);
    background: transparent;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}
#fast-results .fres-date + .fres-date { border-left: 0; }
#fast-results .fres-date:first-child { border-radius: 9999px 0 0 9999px; }
#fast-results .fres-date:last-child { border-radius: 0 9999px 9999px 0; }
#fast-results .fres-date:only-child { border-radius: 9999px; }
#fast-results .fres-date:hover { text-decoration: none; }
#fast-results .fres-date-on {
    background: var(--rm-sel-bg);
    color: var(--rm-sel-text);
}

/* EXPAND ALL  Off [switch] On */
#fast-results .fres-expwrap { display: flex; align-items: center; gap: 16px; margin-right: auto; }
#fast-results .fres-explbl {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    text-transform: uppercase;
}
#fast-results .fres-expand-all {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
}
#fast-results .fres-swlbl:first-child { padding-right: 4px; }
#fast-results .fres-swlbl:last-child { padding-left: 4px; }
#fast-results .fres-swtrack {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 32px;
    border-radius: 32px;
    background: var(--rm-secondary);
    transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}
#fast-results .fres-swtrack::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 28px;
    height: 28px;
    border-radius: 28px;
    background: var(--rm-switch-knob);
    transition: left .15s cubic-bezier(.4, 0, .2, 1);
}
#fast-results .fres-expand-all[aria-checked="true"] .fres-swtrack { background: var(--rm-tertiary); }
#fast-results .fres-expand-all[aria-checked="true"] .fres-swtrack::after { left: 20px; }
#fast-results .fres-expand-all:focus-visible { outline-offset: 4px; }

#fast-results .fres-pickers { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
/* The course dropdown, in the shape Proform's fast results uses:
   `Course: [All v]`. It replaced a row of chips, which wrapped onto three
   lines on a phone once a Saturday had eight meetings. */
#fast-results .fres-filter { display: flex; align-items: center; gap: 8px; }
#fast-results .fres-flabel { font-size: 16px; font-weight: 700; }
#fast-results .fres-select {
    -webkit-appearance: none;
    appearance: none;
    padding: 10px 28px 10px 10px;
    border: 1px solid var(--rm-rule);
    border-radius: 4px;
    background: var(--rm-field) var(--fres-arrow) no-repeat right 10px center / 8px 14px;
    color: var(--fres-ink);
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    cursor: pointer;
    min-width: 112px;
    max-width: 230px;
}
#fast-results .fres-select option { background: var(--rm-field); color: var(--fres-ink); }

#fast-results .fres-refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rm-action);
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer;
}
#fast-results .fres-refresh:hover { text-decoration: underline; }
#fast-results .fres-refresh[aria-busy="true"] .fres-icon { animation: fres-spin .8s linear infinite; }
@keyframes fres-spin { to { transform: rotate(360deg); } }

/* The no-script order links (inside <noscript>). */
#fast-results .fres-opts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#fast-results .fres-optlbl { font-size: 16px; font-weight: 700; }
#fast-results .fres-opt {
    padding: 4px 11px;
    border: 1px solid var(--rm-rule);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}
#fast-results .fres-opt-on { background: var(--rm-sel-bg); border-color: var(--rm-sel-bg); color: var(--rm-sel-text); }

/* ── the column grid ────────────────────────────────────────────────────────
 * One column on a phone, two on a tablet and laptop, three from 1300px, four
 * on a very wide screen. The steps keep a desktop card at 400px or more, the
 * width at which the VIEW / FULL REPLAY footer stays on one line.
 * `align-items: start` matters: without it every card in a row stretches to
 * the tallest, so a 5-runner race gets the white space of a 20-runner one
 * beside it. minmax(0, 1fr) lets a long horse name wrap instead of widening
 * the page sideways. */
#fast-results .fres-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
@media (min-width: 640px) {
    #fast-results .fres-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1300px) {
    #fast-results .fres-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (min-width: 1900px) {
    #fast-results main { max-width: 1712px; }
    #fast-results .fres-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}

/* ── a race card ────────────────────────────────────────────────────────── */
#fast-results .fres-race {
    background: var(--rm-surface);
    border-radius: 12px;
    box-shadow: var(--fres-shadow);
    margin: 0;
    min-width: 0;
}
#fast-results .fres-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px 8px;
    padding: 20px 20px 0;
}
#fast-results .fres-title {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--fres-ink);
}
#fast-results .fres-full {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--rm-action);
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    white-space: nowrap;
}
#fast-results a.fres-full { color: var(--rm-action); }
#fast-results .fres-rname {
    margin: 0;
    padding: 0 20px;
    font-size: 16px;
    line-height: 24px;
    color: var(--fres-ink);
}
#fast-results .fres-cond,
#fast-results .fres-meta {
    margin: 4px 0 0;
    padding: 0 20px;
    font-size: 13px;
    line-height: 18px;
    color: var(--rm-text-dim);
}
#fast-results .fres-meta { margin-top: 2px; }
#fast-results .fres-note { margin: 12px 0 0; padding: 0 20px 20px; font-size: 14px; color: var(--rm-text-dim); }
#fast-results .fres-pending .fres-title,
#fast-results .fres-abandoned .fres-title { color: var(--rm-text-dim); }
#fast-results .fres-prov {
    margin-left: 6px;
    padding: 1px 5px;
    border: 1px solid currentColor;
    border-radius: 4px;
    color: var(--rm-action);
    font-size: 11px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: 2px;
}

/* ── the runners ────────────────────────────────────────────────────────── */
#fast-results .fres-tbl {
    width: 100%;
    margin: 20px 0 0;
    border-collapse: collapse;
    border-top: 1px solid var(--fres-line);
    border-bottom: 1px solid var(--fres-line);
    font-size: 14px;
    line-height: 20px;
    color: var(--rm-text);
}
#fast-results .fres-tbl td { padding: 8px 4px; vertical-align: middle; }
#fast-results .fres-tbl td:first-child { padding-left: 20px; }
#fast-results .fres-tbl td:last-child { padding-right: 20px; }
#fast-results .fres-tbl tr.fres-alt td { background: var(--rm-zebra); }
#fast-results td.fres-pos { width: 30px; font-weight: 700; white-space: nowrap; }
#fast-results td.fres-pos sup { font-size: 12px; line-height: 0; position: relative; top: -.45em; vertical-align: baseline; }
#fast-results td.fres-silkcell { width: 30px; }
#fast-results td.fres-no { width: 20px; text-align: center; }
#fast-results td.fres-horse { font-weight: 700; overflow-wrap: anywhere; }
#fast-results td.fres-sp { width: 1%; text-align: right; font-weight: 700; white-space: nowrap; }
#fast-results td.fres-btn { width: 1%; text-align: right; color: var(--rm-text-dim); font-size: 12px; white-space: nowrap; }
#fast-results .fres-hname a.fres-conn-name { color: var(--rm-text); }
#fast-results .fres-ctry { font-weight: inherit; }

/* ZOOM ON HOVER, as Proform's fast results does it (Simon, 12-10-2026).
 * Read off their live page — .silk_graphic carries a 0.15s transition on the
 * Tailwind easing curve with position: relative and z-index: 10, and
 * .silk_graphic:hover is simply transform: scale(2.5).
 *
 * ⚠️ THE z-index IS NOT DECORATION. Without it the enlarged silk paints UNDER
 * the following rows and you see the top of it and nothing else. position:
 * relative is what lets the z-index apply at all. Nothing in this stylesheet
 * sets overflow, so no ancestor clips it — check that before putting a silk
 * anywhere new.
 *
 * Their scale varies with a spacing preference (3.5 / 3 / 2.5); this page has
 * no such setting, so it takes their default of 2.5. Only the transform is
 * transitioned, not `all` as theirs is: it is the only thing that changes, and
 * transitioning `all` invites surprises from any property added later. */
#fast-results .fres-silk {
    display: block; width: 30px; height: 30px; min-width: 30px;
    position: relative;
    z-index: 10;
    transition: transform .15s cubic-bezier(.4, 0, .2, 1);
}
#fast-results .fres-silk:hover { transform: scale(2.5); }
@media (prefers-reduced-motion: reduce) {
    #fast-results .fres-silk { transition: none; }
}
#fast-results .fres-silk-none { width: 30px; height: 30px; }
#fast-results .fres-dh, #fast-results .fres-fav {
    font-size: 10px; font-weight: 700; color: var(--rm-action);
    text-decoration: none; margin-left: 2px;
}
#fast-results .fres-amended { font-size: 11px; font-weight: 400; color: var(--rm-action); }
#fast-results .fres-cmt td { font-size: 12px; line-height: 16px; color: var(--rm-text-dim); font-style: italic; padding-top: 0; }

/* ── placed only, until opened ──────────────────────────────────────────── */
#fast-results .fres-extra { display: none; }
#fast-results .fres-race.fres-open .fres-extra { display: table-row; }

/* The EXPAND bar, under a fade that says "there is more". */
#fast-results .fres-expbar {
    position: relative;
    padding: 4px 20px;
    border-bottom: 1px solid var(--fres-line);
}
#fast-results .fres-fade {
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 12px;
    transform: translateY(-100%);
    background: linear-gradient(to top, var(--fres-fade), transparent);
    pointer-events: none;
}
#fast-results .fres-race.fres-open .fres-fade { display: none; }
#fast-results .fres-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rm-action);
    font-size: 12px;
    line-height: 16px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}
#fast-results .fres-toggle:hover { text-decoration: underline; }
#fast-results .fres-chev { transition: transform .15s; }
#fast-results .fres-race.fres-open .fres-chev { transform: rotate(180deg); }
#fast-results .fres-hide { display: none; }
#fast-results .fres-race.fres-open .fres-show { display: none; }
#fast-results .fres-race.fres-open .fres-hide { display: inline; }

/* ── the card's footer: VIEW: Race Details | Meeting Details · FULL REPLAY ─ */
#fast-results .fres-cardfoot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    font-size: 14px;
    line-height: 20px;
}
#fast-results .fres-view { margin: 0; display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; }
#fast-results .fres-viewlbl { text-transform: uppercase; color: var(--rm-action); margin-right: -4px; }
#fast-results .fres-vbtn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--rm-text);
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
}
#fast-results .fres-vbtn:hover,
#fast-results .fres-vbtn[aria-expanded="true"] { text-decoration: underline; }
#fast-results .fres-vbtn[aria-expanded="true"] { font-weight: 700; }
#fast-results .fres-vsep { color: var(--rm-text); }
#fast-results .fres-replay {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    text-transform: uppercase;
    white-space: nowrap;
}
#fast-results a.fres-replay { color: var(--rm-action); }
#fast-results .fres-icon, #fast-results .fres-playicon { flex: none; }

/* ── the detail panels ──────────────────────────────────────────────────── */
#fast-results .fres-panel { display: none; padding: 0 20px 16px; }
#fast-results .fres-race.fres-show-race .fres-panel-race { display: block; }
#fast-results .fres-race.fres-show-meeting .fres-panel-meeting { display: block; }
#fast-results .fres-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 12px;
    margin: 0;
    padding: 10px 12px;
    background: var(--fres-panel);
    border: 1px solid var(--fres-line);
    border-radius: 8px;
    font-size: 13px;
    line-height: 18px;
    color: var(--rm-text);
}
#fast-results .fres-dl dt { color: var(--rm-text-dim); white-space: nowrap; }
#fast-results .fres-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* ── the alert bell: Proform's, in their maroon ─────────────────────────── */
#fast-results .fres-bell {
    border: 0;
    background: none;
    padding: 0;
    margin: 0 8px 0 0;
    line-height: 1;
    color: var(--rm-action);
    cursor: pointer;
    vertical-align: -2px;
}
#fast-results .fres-bell:hover { opacity: .75; }
#fast-results .fres-bell[aria-pressed="true"] svg { fill: currentColor; }
#fast-results .fres-bell[disabled] { opacity: 0.4; cursor: default; }
#fast-results .fres-bell-said { color: var(--rm-tertiary); }

#fast-results .fres-conn-name { color: inherit; text-decoration: none; }
#fast-results a.fres-conn-name:hover { text-decoration: underline; }

/* ── odds and ends ──────────────────────────────────────────────────────── */
#fast-results .fres-empty { grid-column: 1 / -1; margin: 0; color: var(--rm-text-dim); padding: 20px 0; }
/* Newest first lists only races under way; the rest are this one line (Simon, 12-10-2026). */
#fast-results .fres-tocome { grid-column: 1 / -1; margin: 0; color: var(--rm-text-dim); padding: 12px 0 4px; font-size: 14px; }
#fast-results .fres-tocome a { color: var(--rm-action); font-weight: 600; }
#fast-results .fres-upsell {
    margin: 28px 0 0;
    padding: 14px 18px;
    background: var(--rm-surface);
    border-radius: 12px;
    box-shadow: var(--fres-shadow);
    font-size: 14px;
    color: var(--fres-ink);
}
#fast-results .fres-upsell a { color: var(--rm-action); font-weight: 700; }
#fast-results .fres-foot {
    max-width: 1680px;
    margin: 0 auto;
    padding: 18px 20px 40px;
    box-sizing: border-box;
    border-top: 1px solid var(--fres-line);
    font-size: 13px;
    color: var(--rm-text-dim);
}
#fast-results .fres-foot a { color: var(--rm-text); }
#fast-results .fres-src { font-size: 12px; }

/* ── phone ──────────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
    #fast-results main { padding: 14px 12px 36px; }
    #fast-results h1 { font-size: 24px; line-height: 30px; }
    #fast-results .fres-bar { gap: 20px; }
    #fast-results .fres-pickers { gap: 16px 24px; }
    #fast-results .fres-explbl { font-size: 18px; }
    /* RaceMetrics and the theme switch share the first line; the links wrap
     * onto the next one rather than pushing the switch onto a third. */
    #fast-results .fres-themeslot { order: 2; margin-left: auto; }
    #fast-results .fres-nav { order: 3; width: 100%; margin-left: 0; gap: 6px 14px; }
}