/* ==========================================================================
   RacingBase Redesign — design tokens and components
   Values are taken verbatim from the Claude Design handoff bundle.
   ========================================================================== */

:root {
  /* Brand */
  --rb-navy:        #0a1d2e;  /* masthead, footer */
  --rb-navy-deep:   #0f2a3f;  /* utility bar */
  --rb-green:       #00734a;  /* primary */
  --rb-green-bright:#00b368;  /* logo accent */

  /* Text */
  --rb-ink:         #14140F;
  --rb-ink-soft:    #3A382F;
  --rb-muted:       #5E6572;
  --rb-muted-warm:  #6E6A62;
  --rb-muted-deep:  #5E5A52;

  /* Surfaces and lines */
  --rb-page:        #eef1f4;
  --rb-surface:     #ffffff;
  --rb-tint:        #F8F9FB;
  --rb-tint-warm:   #F7F6F2;  /* bets of the day band */
  --rb-aside-bg:    #FAFAF8;  /* homepage sidebar */
  --rb-chip:        #e6ecf1;
  --rb-line:        #E3E0D9;  /* warm rule */
  --rb-line-cool:   #D7DEE9;  /* card border */

  /* On dark */
  --rb-on-navy:     #C9D6EA;
  --rb-on-navy-dim: #9FC0E8;

  /* Type */
  --rb-sans:  Archivo, system-ui, -apple-system, sans-serif;
  --rb-serif: 'Source Serif 4', Georgia, serif;
  --rb-mono:  'IBM Plex Mono', ui-monospace, monospace;

  /* Layout */
  --rb-container: 1240px;
  --rb-gutter: 28px;
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--rb-surface);
  color: var(--rb-ink);
  font-family: var(--rb-sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--rb-ink); text-decoration: none; }
a:hover { color: var(--rb-green); }

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 { letter-spacing: -.024em; }

/* ----------------------------------------------------------- utilities -- */

.rb-container {
  max-width: var(--rb-container);
  margin: 0 auto;
  padding: 0 var(--rb-gutter);
}

.rb-mono { font-family: var(--rb-mono); }
.rb-serif { font-family: var(--rb-serif); }

.rb-screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------- utility bar -- */

/* Every band across the page runs full bleed, with its content held to
   --rb-container so the chrome lines up with the grid below it. Each band's
   own horizontal padding sits inside that container, matching .rb-container
   and the homepage blocks, so text lines up at one gutter throughout. */
.rb-utility__inner,
.rb-masthead__inner,
.rb-nav__inner,
.rb-nexttojump__inner,
.rb-footer__inner {
  max-width: var(--rb-container);
  margin: 0 auto;
}

.rb-utility {
  background: var(--rb-navy-deep);
  color: var(--rb-on-navy);
  font-size: 11px;
}

.rb-utility__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 38px;
  padding: 0 var(--rb-gutter);
}

.rb-utility__left,
.rb-utility__right { display: flex; align-items: center; gap: 18px; }
.rb-utility__right { gap: 16px; }
.rb-utility a { color: var(--rb-on-navy); }
.rb-utility__date { font-family: var(--rb-mono); font-weight: 500; color: #fff; }

.rb-age {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 16px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 2px;
  font-family: var(--rb-mono);
  font-size: 9px;
  font-weight: 600;
  color: #fff;
}

/* Wagering toggle */
.rb-wagering {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px 5px 7px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 20px;
  cursor: pointer;
  font-family: var(--rb-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--rb-on-navy);
}
.rb-wagering[data-state="on"] { background: rgba(255,255,255,.12); color: #fff; }

.rb-wagering__track {
  display: flex;
  align-items: center;
  width: 26px; height: 14px;
  padding: 2px;
  background: rgba(255,255,255,.25);
  border-radius: 10px;
  justify-content: flex-start;
}
.rb-wagering[data-state="on"] .rb-wagering__track { background: #fff; justify-content: flex-end; }

.rb-wagering__knob { display: block; width: 10px; height: 10px; background: #fff; border-radius: 50%; }
.rb-wagering[data-state="on"] .rb-wagering__knob { background: var(--rb-navy); }

/* -------------------------------------------------------------- header -- */

.rb-masthead { background: var(--rb-navy); }

.rb-masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 18px var(--rb-gutter);
}

.rb-logo {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.038em;
  color: #fff;
}
.rb-logo:hover { color: #fff; }
.rb-logo b { color: var(--rb-green-bright); font-weight: 800; }

.rb-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 330px;
  padding: 10px 13px;
  background: #fff;
  border-radius: 6px;
}
.rb-search__slash { font-family: var(--rb-mono); font-size: 12px; color: var(--rb-green); }
.rb-search__label { font-size: 13px; color: var(--rb-muted); }

.rb-search__input {
  flex: 1;
  min-width: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--rb-ink);
  background: none;
  border: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.rb-search__input::placeholder { color: var(--rb-muted); opacity: 1; }
/* Safari draws its own clear button, which collides with the dropdown. */
.rb-search__input::-webkit-search-decoration,
.rb-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.rb-search__results {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  max-height: 340px;
  margin: 0;
  padding: 5px;
  overflow-y: auto;
  list-style: none;
  background: #fff;
  border: 1px solid var(--rb-line-cool);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(10, 29, 46, .17);
}
.rb-search__result {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  padding: 9px 11px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--rb-ink);
  border-radius: 5px;
  cursor: pointer;
}
.rb-search__result.is-active { color: #fff; background: var(--rb-navy); }

.rb-search__result-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The qualifier — a state, a date — is context, not the answer, so it stays
   quiet and never squeezes the name. */
.rb-search__result-meta {
  flex: none;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--rb-muted);
}
.rb-search__result.is-active .rb-search__result-meta { color: rgba(255, 255, 255, .72); }

/* Names the group below it. Not selectable, so it must not look clickable. */
.rb-search__group {
  padding: 9px 11px 4px;
  font-family: var(--rb-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rb-muted);
}
.rb-search__group:first-child { padding-top: 4px; }
.rb-search__empty {
  padding: 11px;
  font-size: 12.5px;
  color: var(--rb-muted);
}

.rb-searchpage__group { margin-bottom: 26px; }
.rb-searchpage__count {
  margin-left: 8px;
  font-family: var(--rb-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--rb-muted);
}

/* Visible to a screen reader, not on screen. */
.rb-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -- search results page -- */

.rb-searchpage__form {
  display: flex;
  gap: 9px;
  max-width: 520px;
  margin: 0 0 26px;
}
.rb-searchpage__input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--rb-ink);
  background: #fff;
  border: 1px solid var(--rb-line-cool);
  border-radius: 7px;
}
.rb-searchpage__input:focus { outline: 2px solid var(--rb-green); outline-offset: -1px; }
.rb-searchpage__submit {
  padding: 11px 20px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--rb-navy);
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}
.rb-searchpage__submit:hover { background: var(--rb-navy-deep); }

.rb-hitlist { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rb-line); }
.rb-hit {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
  padding: 13px 2px;
  border-bottom: 1px solid var(--rb-line);
}
.rb-hit:hover { background: var(--rb-tint); }
.rb-hit__name { font-size: 15px; font-weight: 700; letter-spacing: -.014em; color: var(--rb-ink); }
.rb-hit__meta { font-size: 11.5px; color: var(--rb-muted); }

/* ----------------------------------------------------------------- nav -- */

.rb-nav {
  border-bottom: 1px solid var(--rb-line);
  background: var(--rb-surface);
}

.rb-nav__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 0 var(--rb-gutter);
}

.rb-nav__list { display: flex; gap: 26px; }

.rb-nav__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 13px 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--rb-ink-soft);
}
.rb-nav__link.is-current {
  font-weight: 700;
  color: var(--rb-green);
  box-shadow: inset 0 -3px 0 var(--rb-green);
}

.rb-nav__has-menu { position: relative; }

.rb-nav__menu {
  position: absolute;
  top: 100%; left: -14px;
  z-index: 30;
  min-width: 176px;
  padding: 6px 0;
  background: #fff;
  border: 1px solid var(--rb-line);
  box-shadow: 0 10px 26px rgba(20,20,15,.16);
  border-radius: 10px;
  overflow: hidden;
  display: none;
}
.rb-nav__has-menu:hover .rb-nav__menu,
.rb-nav__has-menu:focus-within .rb-nav__menu { display: block; }

.rb-nav__menu a {
  display: block;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--rb-ink);
}
.rb-nav__menu a:hover { background: var(--rb-chip); color: var(--rb-green); }

/* The mobile menu button; desktop has the full nav and no need of it. */
.rb-navtoggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  color: #fff;
  background: rgba(255,255,255,.14);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.rb-navtoggle svg { width: 18px; height: 18px; }
.rb-navtoggle__close,
.rb-navtoggle[aria-expanded="true"] .rb-navtoggle__open { display: none; }
.rb-navtoggle[aria-expanded="true"] .rb-navtoggle__close { display: block; }

/* --------------------------------------------------- next to jump bar -- */

/* Unlike the other bands, the navy here stops at the container edge rather
   than running full bleed, so the strip reads as part of the content below. */
.rb-nexttojump__inner {
  display: flex;
  align-items: stretch;
  background: var(--rb-navy);
}

.rb-nexttojump__label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  /* The prototype uses 20px here, but that leaves this the only text on the
     page not on the 28px gutter. Aligned with the nav and the blocks below. */
  padding: 0 var(--rb-gutter);
  border-right: 1px solid rgba(255,255,255,.18);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
}

.rb-nexttojump__dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FDF548;
  animation: rbpulse 1.6s ease-in-out infinite;
}

@keyframes rbpulse { 0%, 100% { opacity: 1 } 50% { opacity: .2 } }

@media (prefers-reduced-motion: reduce) {
  .rb-nexttojump__dot { animation: none; }
}

/* Flex rather than a fixed column count: races are retired as they jump and
   replacements appended, so the cells have to share whatever width is left. */
.rb-nexttojump__races {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.rb-nexttojump__race {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex: 1 1 0;
  padding: 11px 16px;
  min-width: 0;
  border-right: 1px solid rgba(255,255,255,.18);
}
.rb-nexttojump__race:last-child { border-right: 0; }
.rb-nexttojump__race:hover { background: rgba(255,255,255,.07); }

.rb-nexttojump__time {
  flex: none;
  font-family: var(--rb-mono);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.rb-nexttojump__meeting {
  font-size: 12px;
  color: var(--rb-on-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------ headings -- */

.rb-breadcrumb {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--rb-muted);
}
.rb-breadcrumb a { color: var(--rb-green); font-weight: 600; }

.rb-pagehead { padding-bottom: 12px; border-bottom: 2px solid var(--rb-green); }
.rb-pagehead h1 {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.03em;
}
.rb-pagehead__date {
  font-family: var(--rb-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--rb-green);
}
.rb-pagehead p {
  margin: 6px 0 0;
  max-width: 78ch;
  font: 400 14.5px/1.5 var(--rb-serif);
  color: var(--rb-muted);
}
/* A longer, several-paragraph intro (Group 1 tips) runs the full width, so it
   does not leave a column of white space beside it. */
.rb-pagehead__intro p { max-width: none; }
.rb-pagehead__intro p + p { margin-top: 8px; }
.rb-pagehead__intro a { color: var(--rb-green); font-weight: 600; }

.rb-section-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--rb-green);
}
.rb-section-title h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rb-green);
}
.rb-section-title__meta {
  font-family: var(--rb-mono);
  font-size: 11.5px;
  color: var(--rb-muted);
  text-transform: uppercase;
}

/* --------------------------------------------------------- meeting row -- */

.rb-meeting {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--rb-line);
}
.rb-meeting:last-child { border-bottom: 0; }

.rb-meeting__name { font-size: 16px; font-weight: 700; letter-spacing: -.014em; }
.rb-meeting__meta {
  display: block;
  margin-top: 3px;
  font-family: var(--rb-mono);
  font-size: 10px;
  color: var(--rb-muted-deep);
  text-transform: uppercase;
}

.rb-jumps { display: flex; flex-wrap: wrap; gap: 6px; }

.rb-jump {
  padding: 6px 10px;
  font-family: var(--rb-mono);
  font-size: 13px;
  font-weight: 600;
  border-radius: 2px;
  color: var(--rb-muted-warm);
  background: var(--rb-chip);
}
.rb-jump:hover { color: var(--rb-green); }

/* Run, but the placings are not filed yet. */
.rb-jump.is-run { color: var(--rb-muted); background: var(--rb-tint); }

/* Result available — the chip links to it rather than to the card. */
.rb-jump.has-result { color: #fff; background: var(--rb-navy); }
.rb-jump.has-result:hover { color: #fff; background: var(--rb-green); }

/* The chip you are currently on: a day in the strip, or a race in the rail. */
.rb-jump.is-selected { color: #fff; background: var(--rb-navy); }
.rb-jump.is-selected:hover { color: #fff; }
.rb-jump.has-result.is-selected { box-shadow: inset 0 0 0 2px var(--rb-green); }

/* ---------------------------------------------------- racecards daypick -- */

.rb-daypick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 20px;
}

.rb-daypick__btn,
.rb-daypick__past {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 92px;
  padding: 8px 12px;
  border: 1px solid var(--rb-line-cool);
  border-radius: 6px;
  background: var(--rb-surface);
  cursor: pointer;
  text-align: left;
}

.rb-daypick__btn:hover { border-color: var(--rb-green); }

.rb-daypick__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--rb-muted);
}

.rb-daypick__date {
  font-family: var(--rb-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--rb-ink);
}

/* Selected day */
.rb-daypick__btn.is-active {
  background: var(--rb-navy);
  border-color: var(--rb-navy);
}
.rb-daypick__btn.is-active .rb-daypick__label { color: var(--rb-on-navy); }
.rb-daypick__btn.is-active .rb-daypick__date { color: #fff; }

/* Past-results picker */
.rb-daypick__past {
  gap: 3px;
  padding: 7px 12px;
  background: var(--rb-chip);
}
.rb-daypick__past.is-active {
  border-color: var(--rb-green);
  box-shadow: inset 0 0 0 1px var(--rb-green);
}

.rb-daypick__input {
  padding: 0;
  font-family: var(--rb-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--rb-ink);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.rb-daypick__input::-webkit-calendar-picker-indicator { cursor: pointer; }

/* -------------------------------------------------- racecards accordion -- */
/* Column track shared by the header strip and each meeting's summary row. */

.rb-meetings__head,
.rb-meeting-row__summary {
  display: grid;
  /* Type and Races are both short — "Flat" needs 31px and "7 races" 55px
     against the 130px and 92px they held. The surplus goes to the name. */
  grid-template-columns: minmax(0, 1fr) 170px 84px 76px 30px;
  gap: 14px;
  align-items: center;
}

.rb-meetings__head {
  padding: 10px 18px;
  background: var(--rb-ink);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}

.rb-meetings {
  border: 1px solid var(--rb-line-cool);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: var(--rb-surface);
  overflow: hidden;
}

.rb-meeting-row { border-top: 1px solid var(--rb-line); }
.rb-meeting-row:first-child { border-top: 0; }

.rb-meeting-row__summary {
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;          /* strip the default disclosure triangle */
}
.rb-meeting-row__summary::-webkit-details-marker { display: none; }
.rb-meeting-row__summary:hover { background: var(--rb-tint); }
.rb-meeting-row[open] > .rb-meeting-row__summary { background: var(--rb-tint); }
.rb-meeting-row__summary:focus-visible {
  outline: 2px solid var(--rb-green);
  outline-offset: -2px;
}

.rb-meeting-row__meeting {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}
.rb-meeting-row__name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.014em;
  color: var(--rb-ink);
}
.rb-meeting-row__detail {
  font-family: var(--rb-mono);
  font-size: 10.5px;
  color: var(--rb-muted);
}

.rb-meeting-row__range {
  font-family: var(--rb-mono);
  font-size: 13px;
  color: var(--rb-ink);
}
.rb-meeting-row__type {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rb-green);
}
.rb-meeting-row__count {
  font-family: var(--rb-mono);
  font-size: 13px;
  color: var(--rb-ink);
}

.rb-meeting-row__marker {
  justify-self: end;
  font-family: var(--rb-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--rb-green);
}
.rb-meeting-row__marker::before { content: "+"; }
.rb-meeting-row[open] .rb-meeting-row__marker::before { content: "–"; }

/* ------------------------------------------------- expanded race list -- */

.rb-meeting-races {
  padding: 0 18px 14px;
  background: var(--rb-tint);
}

.rb-race-row {
  display: grid;
  /* The race name is the column that runs long — the widest needs 544px — so
     it takes everything the fixed columns do not. Distance holds "1,600m"
     (42px) and runners "13 runners" (70px); they were at 150px and 92px. */
  grid-template-columns: 46px 66px minmax(0, 1fr) 62px 78px;
  gap: 14px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid var(--rb-line);
}

.rb-race-row__no {
  font-family: var(--rb-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--rb-muted);
}

.rb-race-row__time {
  font-family: var(--rb-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--rb-green);
}
.rb-race-row__time.is-run { color: var(--rb-muted); }
.rb-race-row__time.has-result { color: var(--rb-navy); }

.rb-race-row__name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.rb-race-row__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rb-race-row__flag { flex: none; }

.rb-race-row__cls,
.rb-race-row__runners {
  font-family: var(--rb-mono);
  font-size: 11.5px;
  color: var(--rb-muted);
}

/* --------------------------------------------------------------- cards -- */

.rb-card {
  border: 1px solid var(--rb-line-cool);
  border-radius: 10px;
  overflow: hidden;
}

.rb-tablehead {
  display: grid;
  gap: 12px;
  align-items: center;
  padding: 10px 18px;
  background: var(--rb-ink);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}

.rb-chip {
  padding: 3px 7px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 10px;
  border: 1px solid var(--rb-line-cool);
  color: var(--rb-muted);
  background: var(--rb-tint);
}
.rb-chip--green { color: var(--rb-green); background: #E7F3EE; border-color: #B9DCCB; }
.rb-chip--navy  { color: #fff; background: var(--rb-navy); border-color: var(--rb-navy); }

.rb-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 20px;
  margin-right: 8px;
  padding: 0 5px;
  vertical-align: middle;
  white-space: nowrap;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1;
  border-radius: 4px;
}

/* -------------------------------------------------------------- runner -- */

.rb-runner {
  display: grid;
  grid-template-columns: 44px 34px minmax(0,1fr) 110px;
  gap: 12px;
  align-items: center;
  padding: 13px 18px;
  border-top: 1px solid var(--rb-line);
}
.rb-runner:first-child { border-top: 0; }
.rb-runner.is-scratched { opacity: .5; }

.rb-runner__no {
  font-family: var(--rb-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--rb-ink);
}
.rb-runner__horse { font-size: 15px; font-weight: 700; letter-spacing: -.016em; }
.rb-runner__people { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--rb-muted); }
.rb-runner__form { font-family: var(--rb-mono); font-size: 12px; color: var(--rb-muted); letter-spacing: .06em; }
.rb-runner__odds {
  justify-self: end;
  font-family: var(--rb-mono);
  font-size: 15px;
  font-weight: 600;
}

.rb-silk {
  width: 28px; height: 28px;
  border-radius: 3px;
  background: var(--rb-chip);
  border: 1px solid var(--rb-line-cool);
}

/* ------------------------------------------------------------- sidebar -- */

.rb-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 320px;
  gap: 0;
  align-items: start;
  margin-top: 22px;
}
.rb-layout__main { padding-right: 28px; }
.rb-layout__aside {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-left: 28px;
  border-left: 1px solid var(--rb-line);
}

.rb-aside-title {
  margin: 0 0 12px;
  padding-bottom: 8px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.018em;
  border-bottom: 2px solid var(--rb-green);
}

/* ------------------------------------------------------ homepage grid -- */
/* One grid for the whole page, with the racecards inside the left column —
   not a full-width band above it. Blocks are separated by rules, not gaps. */

.rb-home {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  max-width: var(--rb-container);
  margin: 0 auto;
  border-bottom: 1px solid var(--rb-line);
}

.rb-home__main { border-right: 1px solid var(--rb-line); min-width: 0; }

.rb-home__block {
  padding: 28px;
  border-bottom: 1px solid var(--rb-line);
}
.rb-home__block:last-child { border-bottom: 0; }
.rb-home__block--lead { padding-top: 24px; }
.rb-home__block--tint { background: var(--rb-tint-warm); }

.rb-home__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.rb-home__split > div { padding: 28px; min-width: 0; }
.rb-home__split > div:first-child { border-right: 1px solid var(--rb-line); }
/* With wagering off the Group 1 half is hidden, so Live streams takes the row. */
body[data-wagering="off"] .rb-home__split { grid-template-columns: minmax(0, 1fr); }

.rb-home__aside {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 28px 24px;
  background: var(--rb-aside-bg);
  min-width: 0;
}

/* Block heading with an optional link on the right */
.rb-blockhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--rb-green);
}
.rb-blockhead h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.022em;
}
.rb-blockhead__link { font-size: 12.5px; font-weight: 600; color: var(--rb-green); }
.rb-blockhead__meta {
  font-family: var(--rb-mono);
  font-size: 11px;
  color: var(--rb-muted-deep);
  text-transform: uppercase;
}

.rb-lede {
  margin: 13px 0 18px;
  font: 400 14.5px/1.5 var(--rb-serif);
  color: var(--rb-muted);
}

/* Today / Tomorrow switch. Styling stays in CSS so the JS only has to move
   the is-active class — inline styles would override it on click. */

.rb-daytabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--rb-chip);
  border: 1px solid var(--rb-line-cool);
  border-radius: 8px;
}

.rb-daytab {
  padding: 8px 18px;
  font-family: var(--rb-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rb-ink-soft);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.rb-daytab:hover { color: var(--rb-green); }

.rb-daytab.is-active {
  font-weight: 700;
  color: #fff;
  background: var(--rb-navy);
}
.rb-daytab.is-active:hover { color: #fff; }

/* ---------------------------------------------------- bets of the day -- */

.rb-bod {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.rb-bod__card {
  padding: 17px;
  background: var(--rb-surface);
  border: 1px solid var(--rb-line);
  border-top: 3px solid var(--rb-green);
  border-radius: 10px;
  overflow: hidden;
}
.rb-bod__card--value { border-top-color: var(--rb-ink); }
.rb-bod__card--multi { border-top-color: #1B5E3A; }

.rb-bod__kind {
  margin: 0 0 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--rb-green);
}
.rb-bod__card--value .rb-bod__kind { color: var(--rb-ink); }
.rb-bod__card--multi .rb-bod__kind { color: #1B5E3A; }

.rb-bod__meta {
  margin: 0 0 4px;
  font-family: var(--rb-mono);
  font-size: 11px;
  color: var(--rb-muted-deep);
}
.rb-bod__name {
  margin: 0 0 9px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.024em;
}
.rb-bod__copy {
  margin: 0 0 13px;
  font: 400 14px/1.55 var(--rb-serif);
  color: var(--rb-ink-soft);
}
.rb-bod__price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--rb-chip);
  border: 1px solid var(--rb-line-cool);
  border-radius: 10px;
}
.rb-bod__price-label {
  display: block;
  font-family: var(--rb-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--rb-muted-deep);
}

/* ------------------------------------------------------- bookmakers -- */

.rb-books { display: flex; flex-direction: column; gap: 10px; }

.rb-book {
  background: var(--rb-surface);
  border: 1px solid var(--rb-line);
  border-radius: 10px;
  overflow: hidden;
}

/* The logo is the click target, so it gets the whole width of the card. These
   files are all around 3:1, which is why the box is short and wide: a taller
   one would only add empty space above and below the artwork. */
.rb-book__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  background: #fff;
  border-bottom: 1px solid var(--rb-line);
}
.rb-book__logo img {
  display: block;
  width: 100%;
  max-height: 64px;
  object-fit: contain;
}
.rb-book__logo:hover { background: var(--rb-tint); }

.rb-book__body { padding: 10px 12px; }

.rb-book__blurb {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--rb-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------------------------------------- streams -- */

.rb-stream-off {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 40px 26px;
  margin-bottom: 14px;
  background: var(--rb-navy);
}
.rb-stream-off__title { font-size: 14px; font-weight: 600; color: #fff; }
.rb-stream-off__copy { font: 400 13.5px/1.5 var(--rb-serif); color: var(--rb-chip); }

.rb-prose { font: 400 14.5px/1.55 var(--rb-serif); color: var(--rb-ink-soft); }
/* Headings carried barely any weight against the body copy — an h3 at 15px
   read as bold text rather than a heading. Sized in em, not pixels, because
   .rb-article__body raises prose from 14.5px to 16px: fixed sizes made the
   step from body to h3 almost nothing inside an article, which is the one
   place these are actually read. */
.rb-prose h2 {
  margin: 34px 0 12px;
  font-family: var(--rb-sans);
  font-size: 1.55em;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--rb-ink);
}
.rb-prose > h2:first-child { margin-top: 0; }

.rb-prose h3 {
  margin: 26px 0 9px;
  font-family: var(--rb-sans);
  font-size: 1.26em;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.014em;
  color: var(--rb-ink);
}

/* A bookmaker review heading with the operator's logo beside it. The logo
   files run from 3:1 to 2:1, so the box is fixed and the image fits inside. */
.rb-reviewhead {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 9px;
}
.rb-reviewhead h3 { margin: 0; }
.rb-reviewhead__logo {
  flex: 0 0 150px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid var(--rb-line);
  border-radius: 8px;
}
a.rb-reviewhead__logo:hover { background: var(--rb-tint); }
.rb-reviewhead__logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.rb-prose h4 {
  margin: 20px 0 7px;
  font-family: var(--rb-sans);
  font-size: 1.08em;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--rb-ink);
}
.rb-prose a { color: var(--rb-green); font-weight: 600; }
.rb-prose img { border-radius: 8px; }
.rb-prose ol, .rb-prose ul { padding-left: 20px; }
.rb-prose li { margin-bottom: 6px; }

/* --------------------------------------------------------- placeholder -- */
/* Marks content the SportsCore API cannot supply yet. See DATA-GAPS.md. */

.rb-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 7px;
  font-family: var(--rb-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: #8A6D1F;
  background: #FFF6E0;
  border: 1px dashed #E0C067;
  border-radius: 4px;
  white-space: nowrap;
}
.rb-placeholder::before { content: "◇"; font-size: 9px; }
.rb-placeholder--block { display: flex; padding: 14px; line-height: 1.5; white-space: normal; }

/* ------------------------------------------------------------- notices -- */

.rb-note {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--rb-muted-warm);
  max-width: 760px;
}
/* Links in the small print, such as the PuntersEdge credit: underlined so
   they read as links without shouting. */
.rb-note a,
.rb-modal__foot a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.rb-note a:hover,
.rb-modal__foot a:hover { color: var(--rb-green); }

.rb-empty {
  padding: 28px 18px;
  text-align: center;
  font: 400 14px/1.5 var(--rb-serif);
  color: var(--rb-muted);
}
.rb-empty a { color: var(--rb-green); font-weight: 600; }
.rb-empty a:hover { text-decoration: underline; }

/* In place of a wagering page's whole main column when wagering is off. */
.rb-wagering-hidden {
  padding: 24px 26px;
  background: var(--rb-tint);
  border: 1px solid var(--rb-line-cool);
  border-radius: 10px;
}
.rb-wagering-hidden h2 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.014em;
  color: var(--rb-ink);
}
.rb-wagering-hidden p {
  margin: 0;
  font: 400 14.5px/1.55 var(--rb-serif);
  color: var(--rb-ink-soft);
}
.rb-wagering-hidden p + p { margin-top: 8px; }
.rb-wagering-hidden a { color: var(--rb-green); font-weight: 600; }
.rb-wagering-hidden a:hover { text-decoration: underline; }

/* -------------------------------------------------------------- footer -- */

.rb-footer {
  background: var(--rb-navy);
  color: var(--rb-on-navy);
}

.rb-footer__inner { padding: 26px var(--rb-gutter) 30px; }
.rb-footer a { color: var(--rb-on-navy); }
.rb-footer a:hover { color: #fff; }

.rb-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.rb-footer__brand {
  display: block;
  margin-bottom: 11px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.032em;
  color: #fff;
}
.rb-footer__blurb {
  margin: 0;
  max-width: 34ch;
  font: 400 13.5px/1.55 var(--rb-serif);
  color: var(--rb-on-navy-dim);
}
.rb-footer__col { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.rb-footer__col h2 {
  margin: 0 0 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
}
.rb-footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 18px;
}
.rb-footer__legal p {
  margin: 0;
  max-width: 72ch;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--rb-on-navy-dim);
}
.rb-footer__age {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 24px;
  flex: none;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 6px;
  font-family: var(--rb-mono);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}

/* ------------------------------------------------------- wagering gate -- */

body[data-wagering="off"] .rb-wagering-only { display: none !important; }
body[data-wagering="on"]  .rb-wagering-off-only { display: none !important; }

/* --------------------------------------------------------------- mobile -- */
/* The bundle specifies a 390px mobile rendering; these are the deltas. */

@media (max-width: 900px) {
  :root { --rb-gutter: 14px; }

  .rb-utility { font-size: 10.5px; }
  .rb-utility__inner { height: 34px; }
  .rb-utility__left a,
  .rb-utility__right a[href="#responsible"] { display: none; }

  .rb-masthead__inner { padding: 12px var(--rb-gutter); gap: 12px; }
  .rb-logo { font-size: 20px; letter-spacing: -.034em; }
  /* Collapsed to a tappable icon; tapping the strip focuses the field, which
     expands it over the masthead. */
  .rb-search { width: 34px; height: 34px; padding: 0; justify-content: center; background: rgba(255,255,255,.14); }
  .rb-search__label { display: none; }
  .rb-search__slash { color: #fff; font-size: 13px; }
  .rb-search__input { width: 0; flex: 0 0 0; }
  .rb-search:focus-within { width: min(78vw, 330px); padding: 10px 13px; background: #fff; }
  .rb-search:focus-within .rb-search__slash { color: var(--rb-green); }
  .rb-search:focus-within .rb-search__input { flex: 1; width: auto; }

  .rb-nav__inner { overflow-x: auto; }
  .rb-nav__list { gap: 18px; white-space: nowrap; }

  /* With scripts running the nav collapses behind a menu button and opens as
     a full-width panel under the masthead, each section's pages listed under
     it. Without them it stays the scrolling strip above, so it is never out
     of reach. */
  .rb-js .rb-logo { margin-right: auto; }
  .rb-js .rb-navtoggle { display: flex; }
  .rb-masthead__inner:has(.rb-search:focus-within) .rb-navtoggle { display: none; }

  .rb-js .rb-nav { display: none; }
  .rb-js .rb-nav.is-open { display: block; box-shadow: 0 10px 22px rgba(10, 29, 46, .12); }
  .rb-js .rb-nav__inner { overflow: visible; }
  .rb-js .rb-nav__list { flex-direction: column; gap: 0; width: 100%; padding: 4px 0 10px; white-space: normal; }

  .rb-js .rb-nav__link {
    padding: 13px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--rb-ink);
    border-bottom: 1px solid var(--rb-line);
  }
  .rb-js .rb-nav__link.is-current { box-shadow: none; }
  .rb-js .rb-nav__link svg { display: none; }

  .rb-js .rb-nav__has-menu { border-bottom: 1px solid var(--rb-line); }
  .rb-js .rb-nav__has-menu > .rb-nav__link { border-bottom: 0; padding-bottom: 6px; }
  .rb-js .rb-nav__menu {
    position: static;
    display: block;
    min-width: 0;
    padding: 0 0 8px 14px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .rb-js .rb-nav__menu a { padding: 8px 0; font-size: 14px; font-weight: 500; color: var(--rb-ink-soft); }
  .rb-js .rb-nav__menu a:hover { background: none; }

  .rb-pagehead h1 { font-size: 21px; line-height: 1.16; }
  .rb-pagehead p { font-size: 13px; }

  .rb-layout { grid-template-columns: minmax(0,1fr); }
  .rb-layout__main { padding-right: 0; }
  .rb-layout__aside { padding-left: 0; border-left: 0; margin-top: 22px; }

  .rb-meeting { grid-template-columns: minmax(0,1fr); gap: 8px; }

  .rb-runner { grid-template-columns: 34px minmax(0,1fr) 84px; }
  .rb-runner__silk-cell { display: none; }

  .rb-footer__top { grid-template-columns: 1fr 1fr; }
  .rb-footer__legal { flex-direction: column; align-items: flex-start; }

  .rb-home { grid-template-columns: minmax(0, 1fr); }
  .rb-home__main { border-right: 0; }
  .rb-home__block { padding: 18px 14px; }
  .rb-home__split { grid-template-columns: minmax(0, 1fr); }
  .rb-home__split > div { padding: 18px 14px; }
  .rb-home__split > div:first-child {
    border-right: 0;
    border-bottom: 1px solid var(--rb-line);
  }
  .rb-home__aside { padding: 18px 14px; }

  .rb-blockhead h2 { font-size: 18px; }
  .rb-bod { grid-template-columns: minmax(0, 1fr); }

  /* Accordion: the column strip does not survive a phone, so the summary
     becomes two lines and the header strip is dropped entirely. */
  .rb-meetings__head { display: none; }
  .rb-meetings { border-top: 1px solid var(--rb-line-cool); border-radius: 10px; }

  .rb-meeting-row__summary {
    grid-template-columns: minmax(0, 1fr) 30px;
    row-gap: 4px;
    padding: 12px 14px;
  }
  .rb-meeting-row__meeting { grid-column: 1; flex-direction: column; gap: 2px; align-items: flex-start; }
  .rb-meeting-row__marker { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .rb-meeting-row__range { grid-column: 1; }
  .rb-meeting-row__type,
  .rb-meeting-row__count { display: none; }

  .rb-meeting-races { padding: 0 14px 12px; }
  .rb-race-row {
    grid-template-columns: 40px 62px minmax(0, 1fr);
    row-gap: 2px;
  }
  .rb-race-row__cls { grid-column: 2; }
  .rb-race-row__runners { grid-column: 3; }

  /* The bundle has no mobile mock for the next-to-jump bar. Rather than drop
     it, the label is dropped and the races scroll horizontally. */
  .rb-nexttojump__label { display: none; }
  .rb-nexttojump__races {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .rb-nexttojump__races::-webkit-scrollbar { display: none; }
  .rb-nexttojump__race { flex: 0 0 auto; padding: 10px 14px; }
}

/* Zone tag beside a meeting's time range, shown only where the track keeps a
   different clock from the site's. */
.rb-meeting-row__zone {
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--rb-muted);
  background: var(--rb-chip);
  border-radius: 3px;
}

/* ------------------------------------------------------------- tracks -- */

/* Racing today */
.rb-today {
  margin-bottom: 26px;
  border: 1px solid var(--rb-green);
  border-radius: 10px;
  overflow: hidden;
}
.rb-today__head { padding: 10px 16px; background: var(--rb-navy); }
.rb-today__head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}
.rb-today__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px auto;
  gap: 12px;
  align-items: center;
  padding: 13px 16px;
  border-top: 1px solid var(--rb-line);
}
.rb-today__track { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.018em; }
.rb-today__meta {
  display: block;
  margin-top: 2px;
  font-family: var(--rb-mono);
  font-size: 10.5px;
  color: var(--rb-muted);
}
.rb-today__going { font-family: var(--rb-mono); font-size: 12px; color: var(--rb-muted); }
.rb-today__first { font-family: var(--rb-mono); font-size: 12.5px; font-weight: 600; color: var(--rb-green); }

/* State filter strip */
.rb-statefilter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}
.rb-statefilter__label {
  margin-right: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rb-muted);
}
.rb-statefilter__btn {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--rb-ink-soft);
  background: var(--rb-surface);
  border: 1px solid var(--rb-line-cool);
  border-radius: 6px;
}
.rb-statefilter__btn:hover { border-color: var(--rb-green); color: var(--rb-green); }
.rb-statefilter__btn.is-active {
  color: #fff;
  background: var(--rb-navy);
  border-color: var(--rb-navy);
}
.rb-statefilter__count { font-family: var(--rb-mono); font-size: 10px; opacity: .7; }

/* A state group's summary has no range or type column. */
.rb-trackgroup__summary { grid-template-columns: minmax(0, 1fr) 96px 30px; }

/* Track table inside an open state */
.rb-track-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px 56px;
  gap: 10px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--rb-line);
}
.rb-track-row--head {
  padding: 9px 0 7px;
  border-top: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--rb-muted-warm);
}
.rb-track-row__name { font-size: 14.5px; font-weight: 600; letter-spacing: -.014em; }
.rb-track-row__loc {
  display: block;
  margin-top: 2px;
  font-family: var(--rb-mono);
  font-size: 10px;
  color: var(--rb-muted);
}
.rb-track-row__club,
.rb-track-row__known { font-size: 12.5px; color: var(--rb-ink-soft); }
.rb-track-row__num { font-family: var(--rb-mono); font-size: 12px; color: var(--rb-muted); }

/* A course with no page is still in the register — it just is not a link. */
.rb-track-row__name.is-plain { font-weight: 500; color: var(--rb-muted); }

.rb-track-row__racing { font-family: var(--rb-mono); font-size: 11.5px; }
/* An upcoming fixture is the one thing on this row worth looking twice at. */
.rb-track-row__next { font-weight: 600; color: var(--rb-green); }
.rb-track-row__last { color: var(--rb-muted); }

.rb-track-row__tips {
  font-family: var(--rb-mono);
  font-size: 12px;
  text-align: right;
  color: var(--rb-muted);
}
.rb-track-row__tips a { font-weight: 600; color: var(--rb-ink); }
.rb-track-row__tips a:hover { color: var(--rb-green); }

/* Track conditions key */
.rb-condition {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px 12px;
  border-bottom: 1px solid var(--rb-line);
}
.rb-condition__swatch { display: block; width: 14px; height: 14px; margin-top: 2px; border-radius: 2px; }
.rb-condition__name { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: -.014em; }
.rb-condition__note { display: block; margin-top: 2px; font-size: 11px; line-height: 1.45; color: var(--rb-muted); }

@media (max-width: 900px) {
  .rb-today__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .rb-today__going { grid-column: 1; }

  .rb-track-row { grid-template-columns: minmax(0, 1fr) 46px; row-gap: 2px; }
  .rb-track-row--head { display: none; }
  /* Name and tip count on the first line, the racing date under the name. */
  .rb-track-row__racing { grid-column: 1; }
  .rb-track-row__tips { grid-row: 1; grid-column: 2; }
}

/* ------------------------------------------------------ racecard fields -- */
/* The design spreads age, weight, jockey and trainer into their own columns
   rather than stacking them under the horse. */

.rb-fields { border-radius: 10px; }

.rb-fields__head,
.rb-fields__row {
  display: grid;
  grid-template-columns: 66px 38px minmax(190px, 1.6fr) 46px 66px minmax(0, 1fr) minmax(0, 1fr) 182px;
  gap: 12px;
  align-items: center;
}

.rb-fields__head {
  padding: 10px 18px;
  background: var(--rb-ink);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}

.rb-fields__row {
  padding: 11px 18px;
  border-top: 1px solid var(--rb-line);
}
.rb-fields__row.is-scratched { opacity: .5; }

.rb-fields__no {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--rb-mono);
  font-size: 15px;
  font-weight: 600;
}
.rb-fields__draw { font-size: 11px; font-weight: 400; color: var(--rb-muted); }

.rb-fields__silk { display: flex; }
.rb-silk-blank { display: block; width: 30px; height: 28px; }

.rb-fields__horseline { display: flex; align-items: baseline; gap: 8px; }
.rb-fields__horse { font-size: 14.5px; font-weight: 700; letter-spacing: -.012em; }
.rb-fields__flag {
  flex: none;
  padding: 2px 6px;
  font-family: var(--rb-mono);
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: var(--rb-navy);
  border-radius: 2px;
}
.rb-fields__form {
  display: block;
  margin-top: 3px;
  font-family: var(--rb-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--rb-muted);
}

/* Transparent on desktop so the four cells sit in the parent grid. */
.rb-fields__meta { display: contents; }

/* Beside a sidebar, the eight-column table cannot fit. The container has a
   max-width, so a wider screen never gives the 320px back — jockey and trainer
   resolve to 63px and clip at every desktop size, 1440 and 1700 alike. Inside a
   two-column layout the table therefore uses the same two-line treatment as the
   phone layout: number, silk, horse and price on row one, the connections
   labelled on row two. The horse page has no sidebar and keeps the wide table. */
.rb-layout__main .rb-fields__head { display: none; }
.rb-layout__main .rb-fields__row {
  grid-template-columns: 46px 30px minmax(0, 1fr) auto;
  row-gap: 6px;
}
.rb-layout__main .rb-fields__price { grid-column: 4; grid-row: 1; }
.rb-layout__main .rb-fields__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  grid-column: 3 / -1;
  grid-row: 2;
  min-width: 0;
  font-size: 12px;
  color: var(--rb-muted);
}
.rb-layout__main .rb-fields__meta > * { font-size: 12px; color: var(--rb-muted); white-space: normal; }
.rb-layout__main .rb-fields__meta > *::before {
  content: attr(data-label) " ";
  font-family: var(--rb-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rb-muted-warm);
}
.rb-layout__main .rb-fields__horseline { flex-wrap: wrap; min-width: 0; }
.rb-layout__main .rb-fields__horse { overflow-wrap: anywhere; }

.rb-fields__num { font-family: var(--rb-mono); font-size: 13px; }
.rb-fields__person {
  font-size: 13px;
  color: var(--rb-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Stacked, not side by side: the column is 182px and the best-price pill takes
   most of it, so a labelled compare control beside it was squeezed below its
   own content width and the text escaped the border. */
.rb-fields__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
}
.rb-fields__forecast { font-size: 10.5px; color: var(--rb-muted); }
.rb-fields__none { font-family: var(--rb-mono); font-size: 14px; color: var(--rb-muted-warm); }

/* Best price + bookmaker badge */
.rb-bestprice {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 3px 3px 9px;
  background: var(--rb-surface);
  border: 1px solid var(--rb-line-cool);
  border-radius: 8px;
}
.rb-bestprice:hover { border-color: var(--rb-green); }
.rb-bestprice__odds { font-family: var(--rb-mono); font-size: 14px; font-weight: 600; color: var(--rb-navy); }
.rb-bestprice__book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 22px;
  padding: 0 5px;
  white-space: nowrap;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  border-radius: 4px;
}

/* Labelled "N books ⌄" rather than an icon: an unlabelled glyph here read as a
   menu, and gave no hint that more prices sat behind it. */
.rb-compare {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: none;
  height: 24px;
  padding: 0 7px;
  color: var(--rb-green);
  background: var(--rb-surface);
  border: 1px solid var(--rb-line-cool);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.rb-compare:hover { background: var(--rb-chip); border-color: var(--rb-green); }
/* Not a button: there is no ladder to open, so it must not invite a click. */
.rb-compare--static { color: var(--rb-muted-deep); border-style: dashed; cursor: default; }
.rb-compare--static:hover { background: var(--rb-surface); border-color: var(--rb-line-cool); }
.rb-compare:focus-visible { outline: 2px solid var(--rb-green); outline-offset: 2px; }
.rb-compare__n { font-family: var(--rb-mono); font-size: 11px; font-weight: 700; }
.rb-compare__label { font-size: 10.5px; font-weight: 600; letter-spacing: -.01em; }
.rb-compare svg { width: 11px; height: 11px; opacity: .75; }

/* ----------------------------------------------------------- price modal -- */

.rb-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 29, 46, .6);
}
.rb-modal[hidden] { display: none; }

.rb-modal__box {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 40px);
  background: var(--rb-surface);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(10, 29, 46, .35);
  overflow: hidden;
}

.rb-modal__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 16px 18px;
  background: var(--rb-navy);
  color: #fff;
}
.rb-modal__eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--rb-green-bright);
}
.rb-modal__title { margin: 4px 0 0; font-size: 21px; font-weight: 800; letter-spacing: -.024em; }
.rb-modal__meta { display: block; margin-top: 4px; font-family: var(--rb-mono); font-size: 11px; color: var(--rb-on-navy-dim); }

.rb-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 8px;
  cursor: pointer;
}

.rb-modal__cols,
.rb-modal__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px 76px;
  gap: 10px;
}
.rb-modal__cols {
  padding: 9px 18px;
  background: var(--rb-tint);
  border-bottom: 1px solid var(--rb-line);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--rb-muted-warm);
}

.rb-modal__body { overflow: auto; }

.rb-modal__row {
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid var(--rb-line);
}
.rb-modal__row.is-best { background: #F2F8F5; }

.rb-modal__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rb-modal__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 52px;
  height: 26px;
  padding: 0 6px;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  border-radius: 4px;
}

.rb-modal__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-family: var(--rb-mono);
  font-size: 15px;
  font-weight: 600;
}
.rb-modal__besttag {
  font-family: var(--rb-sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--rb-green);
}

.rb-modal__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: var(--rb-green);
  border-radius: 8px;
}
.rb-modal__cta:hover { color: #fff; background: var(--rb-navy); }

.rb-modal__foot {
  margin: 0;
  padding: 12px 18px 14px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--rb-muted);
  background: var(--rb-tint);
}

@media (max-width: 900px) {
  .rb-fields__head { display: none; }

  .rb-fields__row {
    grid-template-columns: 46px 30px minmax(0, 1fr) auto;
    row-gap: 6px;
    padding: 12px 14px;
  }

  /* Row one is number, silk, horse, price. */
  .rb-fields__price { grid-column: 4; grid-row: 1; }

  /* Row two carries age, weight and the connections on one wrapped line,
     labelled, rather than as four unlabelled values stacked down the page. */
  .rb-fields__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    grid-column: 3 / -1;
    grid-row: 2;
    min-width: 0;
    font-size: 12px;
    color: var(--rb-muted);
  }
  .rb-fields__meta > * { font-size: 12px; color: var(--rb-muted); white-space: normal; }
  .rb-fields__meta > *::before {
    content: attr(data-label) " ";
    font-family: var(--rb-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--rb-muted-warm);
  }

  /* Let a long name wrap rather than be clipped by the price cell. */
  .rb-fields__horseline { flex-wrap: wrap; min-width: 0; }
  .rb-fields__horse { overflow-wrap: anywhere; }

  .rb-bestprice { padding-left: 7px; gap: 5px; }
  .rb-bestprice__book { min-width: 0; font-size: 9px; }
  /* Under 900px the price cell is barely 100px, so the verb is dropped and
     the control reads "2 books" — still self-explanatory, and it fits. */
  .rb-compare { height: 26px; padding: 0 6px; }
  .rb-compare__verb { display: none; }
}

/* Race navigation is a strip above the table. The handoff had no sidebar on
   this page; one was added later, which is why the table reflows beside it. */

.rb-racestrip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 22px;
}

.rb-racestrip__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 96px;
  padding: 9px 12px;
  background: var(--rb-surface);
  border: 1px solid var(--rb-line-cool);
  border-radius: 6px;
}
.rb-racestrip__item:hover { border-color: var(--rb-green); }

.rb-racestrip__meta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--rb-muted);
}
.rb-racestrip__time { font-family: var(--rb-mono); font-size: 14px; font-weight: 600; color: var(--rb-ink); }

.rb-racestrip__item.is-current {
  background: var(--rb-navy);
  border-color: var(--rb-navy);
}
.rb-racestrip__item.is-current .rb-racestrip__meta { color: var(--rb-on-navy); }
.rb-racestrip__item.is-current .rb-racestrip__time { color: #fff; }

/* ------------------------------------------------------ result variant -- */
/* Same table as the racecard with a finishing position in front, so moving
   between a card and its result does not rearrange the page. */

.rb-fields--result .rb-fields__head,
.rb-fields--result .rb-fields__row {
  grid-template-columns: 56px 62px 38px minmax(170px, 1.5fr) 46px 62px minmax(0, 1fr) minmax(0, 1fr) 96px;
}

.rb-fields__pos {
  font-family: var(--rb-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--rb-ink);
}
.rb-fields__pos.is-first { color: var(--rb-green); }

.rb-fields__row.is-winner { background: #F2F8F5; }

/* The result table has nine columns, not the racecard's eight, so the
   two-line treatment needs its own template here. Without this the shared
   `.rb-layout__main` rules put the price in column four of a nine-column grid
   and left five empty columns to its right. */
.rb-layout__main .rb-fields--result .rb-fields__row {
  grid-template-columns: 42px 42px 30px minmax(0, 1fr) auto;
}
.rb-layout__main .rb-fields--result .rb-fields__price { grid-column: 5; grid-row: 1; }
.rb-layout__main .rb-fields--result .rb-fields__meta { grid-column: 4 / -1; grid-row: 2; }

.rb-fields__sp { font-family: var(--rb-mono); font-size: 14px; font-weight: 600; }

@media (max-width: 900px) {
  .rb-fields--result .rb-fields__row {
    grid-template-columns: 42px 42px 30px minmax(0, 1fr) auto;
  }
  /* Position, number and silk lead; horse then price complete row one. */
  .rb-fields--result .rb-fields__price { grid-column: 5; grid-row: 1; }
  .rb-fields--result .rb-fields__meta { grid-column: 4 / -1; grid-row: 2; }
}

/* -------------------------------------------------------- horse profile -- */

.rb-horse {
  margin-top: 4px;
  border: 1px solid var(--rb-line-cool);
  border-radius: 12px;
  overflow: hidden;
}

.rb-horse__head { padding: 22px 20px; background: var(--rb-navy); color: #fff; }
.rb-horse__eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--rb-green-bright);
}
.rb-horse__name { margin: 4px 0 0; font-size: 34px; line-height: 1.05; font-weight: 800; letter-spacing: -.034em; }
.rb-horse__descriptor { display: block; margin-top: 7px; font-size: 14px; color: var(--rb-on-navy); }
.rb-horse__breeding {
  display: block;
  margin-top: 3px;
  font-family: var(--rb-mono);
  font-size: 12px;
  color: var(--rb-on-navy-dim);
}

.rb-horse__headline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid var(--rb-line);
}
.rb-horse__stat { padding: 14px 16px; border-right: 1px solid var(--rb-line); }
.rb-horse__stat:last-child { border-right: 0; }
.rb-horse__statlabel {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rb-muted-warm);
}
.rb-horse__statvalue {
  display: block;
  margin-top: 4px;
  font-family: var(--rb-mono);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--rb-navy);
}
.rb-horse__statsub { display: block; margin-top: 2px; font-size: 11px; color: var(--rb-muted); }

.rb-horse__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rb-horse__fact {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 11px 16px;
  border-right: 1px solid var(--rb-line);
  border-bottom: 1px solid var(--rb-line);
}
.rb-horse__fact:last-child { border-right: 0; }
.rb-horse__factlabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--rb-muted-warm);
}
.rb-horse__factvalue { font-size: 13.5px; font-weight: 600; color: var(--rb-ink); }

.rb-horse__formline {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  background: var(--rb-tint);
}
.rb-horse__formnote { margin-left: auto; font-size: 11.5px; color: var(--rb-muted); }

.rb-formchips { display: flex; gap: 4px; }
.rb-formchip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-family: var(--rb-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--rb-ink);
  background: var(--rb-chip);
  border-radius: 4px;
}
.rb-formchip.is-win { color: #fff; background: var(--rb-green); }
.rb-formchip.is-place { color: #fff; background: var(--rb-navy); }

/* Next start */
.rb-nextstart {
  margin-top: 22px;
  border: 1px solid var(--rb-green);
  border-radius: 12px;
  overflow: hidden;
}
.rb-nextstart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--rb-green);
  color: #fff;
}
.rb-nextstart__head h2 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.rb-nextstart__head span { font-family: var(--rb-mono); font-size: 12px; font-weight: 600; }

.rb-nextstart__body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, .6fr)) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
}
.rb-nextstart__track { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.rb-nextstart__race { display: block; margin-top: 3px; font-size: 12.5px; color: var(--rb-muted); }
.rb-nextstart__num { display: block; margin-top: 2px; font-family: var(--rb-mono); font-size: 14px; font-weight: 600; }
.rb-nextstart__cta {
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: var(--rb-navy);
  border-radius: 6px;
}
.rb-nextstart__cta:hover { color: #fff; background: var(--rb-green); }

/* ------------------------------------------------------------- tabs -- */

.rb-tabs { margin-top: 22px; }

.rb-tabs__bar {
  display: none;
  gap: 4px;
  padding: 4px;
  margin-bottom: 16px;
  background: var(--rb-chip);
  border-radius: 10px;
}
.rb-tabs.has-js .rb-tabs__bar { display: flex; }

.rb-tabs__btn {
  flex: 1;
  padding: 10px 12px;
  font-family: var(--rb-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--rb-ink-soft);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}
.rb-tabs__btn.is-active { color: #fff; background: var(--rb-navy); }

.rb-tabs__panel + .rb-tabs__panel { margin-top: 28px; }
.rb-tabs.has-js .rb-tabs__panel + .rb-tabs__panel { margin-top: 0; }
.rb-tabs.has-js .rb-tabs__heading { display: none; }
.rb-tabs__heading { margin: 0 0 12px; font-size: 20px; font-weight: 800; letter-spacing: -.022em; }

/* Form table */
.rb-formtable__head,
.rb-formtable__row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1.6fr) 74px 70px 62px minmax(0, 1fr) 70px;
  gap: 10px;
  align-items: center;
}
.rb-formtable__head {
  padding: 10px 14px;
  background: var(--rb-navy);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
}
.rb-formtable__row { padding: 11px 14px; border-top: 1px solid var(--rb-line); }
.rb-formtable__date { font-family: var(--rb-mono); font-size: 11.5px; color: var(--rb-muted); }
.rb-formtable__track { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.014em; }
.rb-formtable__race {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--rb-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rb-formtable__num { font-family: var(--rb-mono); font-size: 12px; color: var(--rb-muted); }
.rb-formtable__pos { font-family: var(--rb-mono); font-size: 13px; font-weight: 600; }
.rb-formtable__pos.is-win { color: var(--rb-green); }
.rb-formtable__person { font-size: 12.5px; color: var(--rb-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-formtable__sp { justify-self: end; font-family: var(--rb-mono); font-size: 13px; font-weight: 600; }

/* Statistics */
.rb-statgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.rb-statgroup {
  border: 1px solid var(--rb-line-cool);
  border-radius: 12px;
  overflow: hidden;
}
.rb-statgroup h3 {
  margin: 0;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--rb-navy);
  background: var(--rb-chip);
}

.rb-statrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 70px;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--rb-line);
}
.rb-statrow__label { font-size: 13px; font-weight: 600; }
.rb-statrow__record { font-family: var(--rb-mono); font-size: 12px; color: var(--rb-ink-soft); }
.rb-statrow__pct { display: flex; flex-direction: column; gap: 4px; }
.rb-statrow__num { font-family: var(--rb-mono); font-size: 11px; font-weight: 600; color: var(--rb-green); }
.rb-statrow__bar { display: block; height: 4px; background: var(--rb-chip); border-radius: 3px; overflow: hidden; }
.rb-statrow__bar > span { display: block; height: 4px; background: var(--rb-green); border-radius: 3px; }

/* Pedigree */
.rb-pedigree {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 16px;
  background: var(--rb-tint);
}
.rb-pedigree__horse {
  display: flex;
  align-items: center;
  padding: 14px;
  background: var(--rb-navy);
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.rb-pedigree__parents { display: grid; gap: 10px; }
.rb-pedigree__box {
  padding: 12px 14px;
  background: var(--rb-surface);
  border: 1px solid var(--rb-line-cool);
  border-radius: 10px;
}
.rb-pedigree__value { display: block; margin-top: 3px; font-size: 14px; font-weight: 700; }
/* Sire and dam only — the two-column form for a pair. */
.rb-pedigree--pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }

@media (max-width: 900px) {
  .rb-horse__name { font-size: 26px; }
  .rb-horse__headline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rb-horse__facts { grid-template-columns: minmax(0, 1fr); }
  .rb-horse__fact:last-child { border-right: 0; }

  .rb-nextstart__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rb-nextstart__cta { grid-column: 1 / -1; text-align: center; }

  .rb-formtable__head { display: none; }
  .rb-formtable__row { grid-template-columns: 70px minmax(0, 1fr) 62px; row-gap: 4px; }
  .rb-formtable__num,
  .rb-formtable__person { grid-column: 2; }
  .rb-formtable__sp { grid-column: 3; grid-row: 1; }

  .rb-statgrid { grid-template-columns: minmax(0, 1fr); }
  .rb-pedigree { grid-template-columns: minmax(0, 1fr); }
}

/* ----------------------------------------------------------- free tips -- */

.rb-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.rb-thumb--empty {
  background: linear-gradient(135deg, var(--rb-chip) 0%, var(--rb-tint) 100%);
  border: 1px solid var(--rb-line-cool);
}

.rb-lead { margin-bottom: 26px; padding-bottom: 24px; border-bottom: 1px solid var(--rb-line); }
.rb-lead__media { display: block; height: 300px; margin-bottom: 14px; }

.rb-lead__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.rb-lead__track {
  padding: 3px 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
  background: var(--rb-navy);
}
.rb-lead__byline { font-family: var(--rb-mono); font-size: 11px; color: var(--rb-muted); }

.rb-lead__title {
  margin: 0 0 10px;
  font-size: 32px;
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -.03em;
  text-wrap: pretty;
}
.rb-lead__standfirst {
  margin: 0 0 12px;
  max-width: 62ch;
  font: 400 16px/1.55 var(--rb-serif);
  color: var(--rb-ink-soft);
}
.rb-lead__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rb-lead__chip {
  padding: 6px 10px;
  font-family: var(--rb-mono);
  font-size: 11.5px;
  color: var(--rb-ink);
  background: var(--rb-tint);
  border: 1px solid var(--rb-line);
  border-radius: 10px;
}

.rb-tipgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 22px; }

.rb-tipcard__media { display: block; height: 160px; margin-bottom: 11px; }
.rb-tipcard__meta { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.rb-tipcard__track {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--rb-green);
}
.rb-tipcard__date { font-family: var(--rb-mono); font-size: 10.5px; color: var(--rb-muted); }
.rb-tipcard__title {
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.022em;
  text-wrap: pretty;
}
.rb-tipcard__meta-line {
  margin: 7px 0 0;
  font: 400 13.5px/1.5 var(--rb-serif);
  color: var(--rb-muted);
}

.rb-loadmore {
  display: block;
  width: 100%;
  margin-top: 26px;
  padding: 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rb-green);
  background: var(--rb-surface);
  border: 1px solid var(--rb-green);
  border-radius: 6px;
}
.rb-loadmore:hover { color: #fff; background: var(--rb-green); }

@media (max-width: 900px) {
  .rb-lead__media { height: 190px; }
  .rb-lead__title { font-size: 22px; line-height: 1.16; }
  .rb-tipgrid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------- tip article -- */

.rb-article__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }

.rb-article__title {
  margin: 0 0 12px;
  font-size: 40px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.034em;
  text-wrap: pretty;
}

.rb-article__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  margin-bottom: 18px;
  border-top: 1px solid var(--rb-line);
  border-bottom: 1px solid var(--rb-line);
}
.rb-article__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  font-family: var(--rb-mono);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--rb-navy-deep);
  border-radius: 50%;
}
.rb-article__author { display: block; font-size: 13px; font-weight: 700; letter-spacing: -.012em; }
.rb-article__published { display: block; font-family: var(--rb-mono); font-size: 11px; color: var(--rb-muted); }

.rb-article__hero { height: 420px; margin-bottom: 26px; }
.rb-article__body { font-size: 16px; }
.rb-article__body > :first-child { margin-top: 0; }

/* Sidebar call-to-action card */
.rb-sidecard {
  padding: 16px;
  background: var(--rb-chip);
  border: 1px solid var(--rb-line-cool);
  border-radius: 10px;
}
.rb-sidecard__title { margin: 0 0 7px; font-size: 14px; font-weight: 800; letter-spacing: -.014em; }
.rb-sidecard__copy { margin: 0 0 11px; font-size: 12px; line-height: 1.55; color: var(--rb-muted); }
.rb-sidecard__cta {
  display: block;
  padding: 10px 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  background: var(--rb-navy);
  border-radius: 6px;
}
.rb-sidecard__cta:hover { color: #fff; background: var(--rb-green); }

/* Breaking news rail */
.rb-breaking { display: flex; flex-direction: column; }

.rb-breaking__item {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 11px 0;
  border-bottom: 1px solid var(--rb-line);
}
.rb-breaking__thumb { display: block; height: 46px; }
.rb-breaking__title {
  display: block;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.012em;
}
.rb-breaking__tag {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rb-green);
  background: var(--rb-tint);
  border: 1px solid var(--rb-line);
  border-radius: 3px;
}

@media (max-width: 900px) {
  .rb-article__title { font-size: 26px; line-height: 1.14; }
  .rb-article__hero { height: 210px; }
}

/* ------------------------------------------------- tables in prose -- */
/* Editorial tips carry plain <table> markup with no classes, and neither the
   live theme nor the handoff styles it — so these follow the same treatment as
   the racecard and statistics tables rather than browser defaults. */

.rb-tablewrap {
  margin: 0 0 22px;
  overflow-x: auto;
  border: 1px solid var(--rb-line-cool);
  border-radius: 10px;
  -webkit-overflow-scrolling: touch;
}

.rb-prose table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-family: var(--rb-sans);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

/* A table that escaped the wrapper still behaves. */
.rb-prose > table {
  display: block;
  overflow-x: auto;
  border: 1px solid var(--rb-line-cool);
  border-radius: 10px;
}

.rb-prose thead th,
.rb-prose thead td {
  padding: 10px 14px;
  text-align: left;
  white-space: nowrap;
  background: var(--rb-ink);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
}

.rb-prose tbody th,
.rb-prose tbody td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--rb-line);
  color: var(--rb-ink-soft);
}

/* First column carries the subject — horse, jockey, trainer. */
.rb-prose tbody td:first-child,
.rb-prose tbody th:first-child {
  font-weight: 600;
  color: var(--rb-ink);
  white-space: nowrap;
}

.rb-prose tbody tr:nth-child(even) { background: var(--rb-tint); }
.rb-prose tbody tr:hover { background: var(--rb-chip); }

/* A table with no thead still gets a header from its first row. */
.rb-prose table:not(:has(thead)) tbody tr:first-child td {
  background: var(--rb-ink);
  border-top: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
}

.rb-prose caption {
  padding: 10px 14px;
  text-align: left;
  font-size: 11.5px;
  color: var(--rb-muted);
}

@media (max-width: 900px) {
  .rb-prose table { font-size: 12.5px; }
  .rb-prose thead th,
  .rb-prose thead td,
  .rb-prose tbody th,
  .rb-prose tbody td { padding: 8px 10px; }
}

/* -- syndicated news ----------------------------------------------------- */

/* A feed item's tag names the publisher, so it reads as attribution rather
   than as one of our own sections. */
.rb-breaking__src {
  font-weight: 800;
  color: var(--rb-navy);
}

.rb-syndicated__credit {
  margin: 0 0 20px;
  padding-bottom: 16px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--rb-muted);
  border-bottom: 1px solid var(--rb-line);
}
.rb-syndicated__credit a { color: var(--rb-green); text-decoration: underline; }

.rb-syndicated__excerpt p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--rb-ink);
}

.rb-syndicated__cta {
  margin: 26px 0 0;
  padding: 20px 22px;
  background: var(--rb-tint);
  border: 1px solid var(--rb-line-cool);
  border-radius: 10px;
}
.rb-syndicated__cta p {
  margin: 0 0 13px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--rb-muted);
}
.rb-syndicated__cta a {
  display: inline-block;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.008em;
  color: #fff;
  background: var(--rb-green);
  border-radius: 7px;
}
.rb-syndicated__cta a:hover { background: var(--rb-green-bright); }

/* -- advertisement slots ------------------------------------------------- */

/* Aligned to the same 1240px column as the grid below it. */
.rb-adrow {
  max-width: var(--rb-container);
  margin: 0 auto;
  padding: 20px var(--rb-gutter) 22px;
}

.rb-adslot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Kept for when a real creative replaces the placeholder: paid placement
   should be labelled, and more so on a gambling site than most. */
.rb-adslot__label {
  font-family: var(--rb-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rb-muted);
}

/* aspect-ratio rather than a fixed height: the box keeps its leaderboard
   proportion when it has to shrink, so a phone gets a smaller banner instead
   of a sideways scrollbar. The space is reserved either way, so the page does
   not jump when a creative loads. */
.rb-adslot__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 728px;
  max-width: 100%;
  aspect-ratio: 728 / 90;
  overflow: hidden;
  background: var(--rb-tint);
  border: 1px dashed var(--rb-line-cool);
  border-radius: 8px;
}

/* With a photograph in it this is no longer an empty box, so it loses the
   dashed outline that said so. */
.rb-adslot__frame--image {
  border-style: solid;
  border-color: var(--rb-line-cool);
}

.rb-adslot__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Centred: on this photograph the band across the horses lands in frame and
     the logo in its top corner does not. */
  object-position: center;
}

.rb-adslot__cta {
  position: relative;
  padding: 9px 22px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  /* The photograph is bright and varies across its width, so the words carry
     their own backing rather than relying on the picture behind them. */
  background: rgba(10, 29, 46, .82);
  border-radius: 7px;
  box-shadow: 0 2px 14px rgba(10, 29, 46, .3);
}

.rb-adslot__size {
  font-family: var(--rb-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--rb-muted);
}

@media (max-width: 860px) {
  .rb-adrow { padding: 14px; }
}

/* -- homepage free tips -------------------------------------------------- */

.rb-hometips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 22px;
}

.rb-hometip__media {
  position: relative;
  display: block;
  height: 160px;
  margin-bottom: 11px;
}

/* A scrim under the track name: the images are photographs we do not control,
   and white on a pale sky is unreadable. */
.rb-hometip__media::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(10, 29, 46, .82), rgba(10, 29, 46, 0));
  border-radius: 0 0 10px 10px;
  pointer-events: none;
}

.rb-hometip__track {
  position: absolute;
  bottom: 10px;
  left: 11px;
  z-index: 1;
  max-width: calc(100% - 22px);
  overflow: hidden;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}

.rb-hometip__title {
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.022em;
}

.rb-hometip__date {
  margin: 7px 0 0;
  font: 400 13.5px/1.5 var(--rb-serif);
  color: var(--rb-muted);
}

@media (max-width: 860px) {
  .rb-hometips { grid-template-columns: minmax(0, 1fr); }
}

/* A contributor with a photo replaces the initials block, same footprint. */
.rb-article__avatar--photo {
  object-fit: cover;
  border-radius: 50%;
}
.rb-article__author a { color: inherit; }
.rb-article__author a:hover { color: var(--rb-green); }

/* -- in-article bookmaker toplist ---------------------------------------- */
/* This is the commercial block in the middle of an article, so it is built to
   be noticed: full-bleed of the prose column, a titled header, brand logos
   rather than text chips, and a button that reads as a button. */

.rb-toplist {
  margin: 30px 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--rb-line-cool);
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(10, 29, 46, .08);
}

.rb-toplist__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  background: var(--rb-navy);
}
.rb-toplist__head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}
.rb-toplist__head span {
  font-family: var(--rb-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

.rb-toplist__list { margin: 0; padding: 0; list-style: none; }

.rb-toplist__item {
  display: grid;
  grid-template-columns: 30px 128px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--rb-line);
}
.rb-toplist__item:last-child { border-bottom: 0; }
.rb-toplist__item:hover { background: var(--rb-tint); }

.rb-toplist__rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-family: var(--rb-mono);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--rb-navy);
  border-radius: 50%;
}
/* The top three carry the green, so the ranking reads at a glance. */
.rb-toplist__item:nth-child(-n+3) .rb-toplist__rank { background: var(--rb-green); }

.rb-toplist__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 7px 10px;
  background: #fff;
  border: 1px solid var(--rb-line);
  border-radius: 8px;
}
.rb-toplist__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.rb-toplist__body { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.rb-toplist__body .rb-badge { align-self: flex-start; }

.rb-toplist__name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.016em;
  color: var(--rb-ink);
}
.rb-toplist__bonus {
  font-size: 13px;
  font-weight: 700;
  color: var(--rb-green);
}
.rb-toplist__blurb { font-size: 12.5px; line-height: 1.45; color: var(--rb-muted); }

/* Scoped under .rb-prose as well: this block sits inside article copy, where
   `.rb-prose a` colours every link green and would otherwise paint the button
   label the same green as its own background. */
.rb-toplist__cta,
.rb-prose .rb-toplist__cta {
  padding: 12px 22px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -.008em;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--rb-green);
  border-radius: 8px;
  box-shadow: 0 2px 0 rgba(0, 78, 50, .55);
}
.rb-toplist__cta:hover,
.rb-prose .rb-toplist__cta:hover { color: #fff; background: var(--rb-green-bright); }

.rb-toplist .rb-note { margin: 0; padding: 11px 18px; background: var(--rb-tint); }

@media (max-width: 680px) {
  .rb-toplist__item {
    grid-template-columns: 28px 1fr;
    grid-template-areas: "rank logo" "body body" "cta cta";
    gap: 10px 12px;
  }
  .rb-toplist__rank { grid-area: rank; }
  .rb-toplist__logo { grid-area: logo; justify-self: start; width: 120px; height: 44px; }
  .rb-toplist__body { grid-area: body; }
  .rb-toplist__cta { grid-area: cta; }
}

/* -- the plays ----------------------------------------------------------- */
/* The summary block an article builds to: the selections, the staking, the
   angle. It is the part a reader scrolls for, so it is lifted out of the copy
   rather than sitting in it as another run of paragraphs. */

.rb-plays {
  position: relative;
  margin: 38px 0;
  padding: 28px 30px 26px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--rb-navy) 0%, var(--rb-navy-deep) 62%, #0d3a2b 100%);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(10, 29, 46, .22);
}

/* A green rule down the edge, echoing the section rules elsewhere. */
.rb-plays::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: linear-gradient(to bottom, var(--rb-green-bright), var(--rb-green));
}

.rb-prose .rb-plays h2 {
  margin: 0 0 4px;
  font-size: 1.7em;
  color: #fff;
}

/* A standing label above the heading, so the block announces itself whatever
   the article decided to call this section. */
.rb-plays::after {
  content: "TODAY'S SELECTIONS";
  position: absolute;
  top: 30px;
  right: 30px;
  font-family: var(--rb-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .42);
}

.rb-prose .rb-plays p {
  margin: 0;
  padding: 13px 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .84);
  border-top: 1px solid rgba(255, 255, 255, .13);
}
.rb-prose .rb-plays p:first-of-type { border-top: 0; }

/* The lead-in of each play — "NAP:", "Value:" — is the scannable part. */
.rb-prose .rb-plays p > strong:first-child {
  display: block;
  margin-bottom: 3px;
  font-family: var(--rb-sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rb-green-bright);
}

.rb-prose .rb-plays a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.rb-prose .rb-plays a:hover { color: var(--rb-green-bright); }

/* The closing line is a sentence, not a play, so it loses the rule above it. */
.rb-prose .rb-plays p:last-child {
  padding-bottom: 0;
  font-style: italic;
  color: rgba(255, 255, 255, .66);
}

@media (max-width: 600px) {
  .rb-plays { padding: 22px 20px; }
  .rb-plays::after { display: none; }
  .rb-prose .rb-plays h2 { font-size: 22px; }
}

/* A linked heading takes the same green as a body link, so a race title reads
   as something to click rather than as a title that happens to be clickable.
   It keeps the heading's own weight and size, and the underline stays on
   hover. */
.rb-prose h2 > a,
.rb-prose h3 > a,
.rb-prose h4 > a {
  color: var(--rb-green);
  font-weight: inherit;
  text-decoration: none;
}
.rb-prose h2 > a:hover,
.rb-prose h3 > a:hover,
.rb-prose h4 > a:hover {
  color: var(--rb-green-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -- verdict and tips at the foot of a racecard --------------------------- */

.rb-racetips { margin-top: 30px; }

.rb-racefoot { margin-top: 30px; }
.rb-racefoot__verdict {
  margin: 0;
  font: 400 15px/1.6 var(--rb-serif);
  color: var(--rb-ink-soft);
}

/* Same heading treatment for both sections at the foot of the card. */
.rb-racefoot h2,
.rb-racetips h2 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.022em;
}

.rb-racetips__link {
  display: block;
  padding: 16px 18px;
  background: var(--rb-tint);
  border: 1px solid var(--rb-line-cool);
  border-left: 4px solid var(--rb-green);
  border-radius: 10px;
}
.rb-racetips__link:hover { background: #fff; border-color: var(--rb-green); }

.rb-racetips__cta {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--rb-green);
}
.rb-racetips__title {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--rb-muted);
}

/* -- bets of the day ----------------------------------------------------- */

.rb-bod__more {
  display: inline-block;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--rb-green);
}
.rb-bod__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.rb-bod__meta a, .rb-bod__name a { color: inherit; }
.rb-bod__name a:hover { color: var(--rb-green); }

/* Today's selections table */
.rb-bodtable {
  border: 1px solid var(--rb-line-cool);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}

.rb-bodtable__head,
.rb-bodtable__row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 18px;
}

.rb-bodtable__head {
  padding: 10px 18px;
  background: var(--rb-ink);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}

.rb-bodtable__row { border-top: 1px solid var(--rb-line); }
.rb-bodtable__row:first-of-type { border-top: 0; }
.rb-bodtable__row:hover { background: var(--rb-tint); }

.rb-bodtable__time {
  font-family: var(--rb-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--rb-green);
}

.rb-bodtable__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.rb-bodtable__meeting { font-size: 12.5px; font-weight: 700; letter-spacing: -.014em; color: var(--rb-ink); }
a.rb-bodtable__meeting:hover { color: var(--rb-green); }
.rb-bodtable__race { font-family: var(--rb-mono); font-size: 10.5px; color: var(--rb-muted); }

/* The slot this selection fills, colour-coded the same way as the homepage
   cards so the three read as one set across both pages. */
.rb-bodtable__grade {
  padding: 3px 7px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 10px;
}
.rb-bodtable__grade--best { color: #00734a; background: #E7F4EE; border: 1px solid #BFE0D0; }
.rb-bodtable__grade--value { color: #8A6D1F; background: #FFF6E0; border: 1px solid #E0C067; }
.rb-bodtable__grade--quaddie { color: #2B4C7E; background: #EAF0F8; border: 1px solid #C3D3E8; }

.rb-bodtable__horse { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.016em; }
.rb-bodtable__horse a { color: var(--rb-ink); }
.rb-bodtable__horse a:hover { color: var(--rb-green); }
.rb-bodtable__note { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--rb-muted); }

.rb-bodtable__price { justify-self: end; text-align: right; }
.rb-bodtable__price .rb-mono { display: block; font-size: 15px; font-weight: 600; color: var(--rb-ink); }
.rb-bodtable__book { display: block; margin-top: 2px; font-size: 10.5px; color: var(--rb-muted); }

/* The article behind the selections */
.rb-bodlead { margin-bottom: 30px; padding-bottom: 26px; border-bottom: 1px solid var(--rb-line); }
.rb-bodlead__media { display: block; height: 260px; margin-bottom: 14px; }
.rb-bodlead h2 { margin: 0 0 8px; font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -.024em; }
.rb-bodlead h2 a { color: var(--rb-ink); }
.rb-bodlead h2 a:hover { color: var(--rb-green); }
.rb-bodlead__standfirst { margin: 0 0 14px; max-width: 62ch; font: 400 16px/1.55 var(--rb-serif); color: var(--rb-ink-soft); }
.rb-bodlead__cta { font-size: 13px; font-weight: 700; color: var(--rb-green); }
.rb-bodlead__cta:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 600px) {
  .rb-bodtable__head { display: none; }
  .rb-bodtable__row { grid-template-columns: 52px minmax(0, 1fr); }
  .rb-bodtable__price { grid-column: 2; justify-self: start; text-align: left; margin-top: 6px; }
  .rb-bodlead__media { height: 180px; }
}

/* -- group 1 races ------------------------------------------------------- */

.rb-g1next {
  margin-bottom: 26px;
  border: 1px solid var(--rb-green);
  border-radius: 10px;
  overflow: hidden;
}
.rb-g1next__head { padding: 10px 16px; background: var(--rb-navy); }
.rb-g1next__head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}
.rb-g1next__body { padding: 16px; }

.rb-g1season, .rb-g1carnivals, .rb-g1previews { margin-bottom: 30px; }
.rb-g1season h2,
.rb-g1carnivals h2,
.rb-g1previews h2 {
  margin: 0 0 12px;
  padding-bottom: 8px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  border-bottom: 2px solid var(--rb-green);
}

/* Group 1 calendar rows and the race index */
.rb-g1row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 16px;
  border-top: 1px solid var(--rb-line);
}
.rb-g1row__date { font-family: var(--rb-mono); font-size: 12.5px; font-weight: 600; color: var(--rb-green); }
.rb-g1row__race { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.018em; color: var(--rb-ink); }
.rb-g1row__race:hover { color: var(--rb-green); }
.rb-g1row__meta { display: block; margin-top: 2px; font-family: var(--rb-mono); font-size: 10.5px; color: var(--rb-muted); }
.rb-g1row__away { font-family: var(--rb-mono); font-size: 11.5px; color: var(--rb-muted); white-space: nowrap; }
.rb-g1row__away a { color: var(--rb-green); font-weight: 600; }

.rb-g1carnivals__lede { margin: 0 0 16px; font: 400 14px/1.5 var(--rb-serif); color: var(--rb-muted); }
.rb-g1group { margin-bottom: 18px; }
.rb-g1group h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.rb-g1group h3 span { font-family: var(--rb-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .06em; color: var(--rb-muted); }

.rb-g1list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; margin: 0; padding: 0; list-style: none; }
.rb-g1list li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rb-line); }
.rb-g1list a { font-size: 13.5px; font-weight: 600; color: var(--rb-ink); }
.rb-g1list a:hover { color: var(--rb-green); }
.rb-g1list span { font-family: var(--rb-mono); font-size: 10.5px; color: var(--rb-muted); white-space: nowrap; }

@media (max-width: 600px) {
  .rb-g1row { grid-template-columns: 80px minmax(0, 1fr); }
  .rb-g1row__away { grid-column: 2; }
  .rb-g1list { grid-template-columns: minmax(0, 1fr); }
}

/* --- a single Group 1 race ------------------------------------------- */

.rb-g1facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 1px;
  margin: 0 0 22px;
  overflow: hidden;
  background: var(--rb-line);
  border: 1px solid var(--rb-line);
  border-radius: 10px;
}
.rb-g1facts > div { padding: 11px 13px; background: var(--rb-bg); }
.rb-g1facts dt {
  margin: 0 0 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--rb-muted-deep);
}
.rb-g1facts dd { margin: 0; font-size: 13.5px; font-weight: 700; letter-spacing: -.014em; }

/* The archive fallback. Flagged hard so last season's preview is never
   mistaken for this season's. */
.rb-g1prev__flag {
  display: flex;
  gap: 8px;
  margin: 0 0 18px;
  padding: 11px 13px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--rb-ink-soft);
  background: var(--rb-tint);
  border: 1px solid var(--rb-line-cool);
  border-left: 3px solid var(--rb-green);
  border-radius: 8px;
}
.rb-g1prev__title { margin: 0 0 14px; font-size: 20px; font-weight: 800; letter-spacing: -.022em; }
.rb-g1prev__title a { color: var(--rb-ink); }
.rb-g1prev__title a:hover { color: var(--rb-green); text-decoration: underline; }

/* The archive stands in for a preview that is not written yet, so it leads with
   that article's own image the way the article itself would. */
.rb-g1prev__media { margin: 0 0 16px; }

/* The guide is the one durable thing on a race, so it gets a card of its own
   above the dated list rather than a line inside it. */
.rb-g1guide {
  display: block;
  margin-top: 30px;
  padding: 18px 20px;
  border: 1px solid var(--rb-line);
  border-left: 3px solid var(--rb-green);
  border-radius: 10px;
  background: var(--rb-tint);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.rb-g1guide:hover { border-color: var(--rb-green); background: #fff; }

.rb-g1guide__kicker {
  display: block;
  margin-bottom: 5px;
  font-family: var(--rb-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rb-green);
}
.rb-g1guide__name {
  display: block;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--rb-ink);
}
.rb-g1guide:hover .rb-g1guide__name { text-decoration: underline; text-underline-offset: 3px; }

.rb-g1guide__meta {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--rb-ink-soft);
}
.rb-g1prev__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

@media (max-width: 600px) {
  .rb-g1facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ------------------------------------------------------------- dividends -- */

.rb-divs {
  margin-top: 22px;
  padding: 16px 18px;
  background: var(--rb-tint);
  border: 1px solid var(--rb-line-cool);
  border-radius: 12px;
}
.rb-divs__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.rb-divs__head h2 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.018em; }
.rb-divs__head span {
  font-family: var(--rb-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rb-muted-deep);
}

.rb-divs__grid { overflow: hidden; background: var(--rb-bg); border: 1px solid var(--rb-line); border-radius: 9px; }
.rb-divs__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 72px;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  font-size: 13.5px;
}
.rb-divs__row + .rb-divs__row { border-top: 1px solid var(--rb-line); }
.rb-divs__row--head {
  font-family: var(--rb-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--rb-muted-deep);
  background: var(--rb-chip);
}
.rb-divs__row > span:not(.rb-divs__who) { text-align: right; }
/* The head row has no .rb-divs__who, so its first cell would follow the rule
   above and sit over the Win column instead of labelling the runners. */
.rb-divs__row--head > span:first-child { text-align: left; }
.rb-divs__who { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 700; letter-spacing: -.014em; }
.rb-divs__pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  font-family: var(--rb-mono);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--rb-ink);
  border-radius: 5px;
}

.rb-divs__exotics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.rb-divs__exotic {
  padding: 9px 11px;
  background: var(--rb-bg);
  border: 1px solid var(--rb-line);
  border-radius: 9px;
}
.rb-divs__extype {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rb-muted-deep);
}
.rb-divs__examount { display: block; margin-top: 2px; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.rb-divs__exsel { display: block; margin-top: 1px; font-family: var(--rb-mono); font-size: 10.5px; color: var(--rb-muted); }

@media (max-width: 600px) {
  .rb-divs { padding: 14px; }
  .rb-divs__row { grid-template-columns: minmax(0, 1fr) 58px 58px; font-size: 13px; }
}


/* ------------------------------------------------- sidebar bookmaker card -- */
/* The live site's sidebar card, rebuilt: circular logo on the brand colour, a
   star strip filled to the rating, the hook, an outlined CTA and its terms. */

.rb-bookmakers { display: flex; flex-direction: column; gap: 10px; }

.rb-bookcard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  color: var(--rb-ink);
  background: var(--rb-bg);
  border: 1px solid var(--rb-line);
  border-radius: 10px;
}
.rb-bookcard:hover { border-color: var(--rb-green); box-shadow: 0 2px 10px rgba(10, 29, 46, .06); }

.rb-bookcard__left { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: none; }

.rb-bookcard__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: 50%;
}
.rb-bookcard__logo img { width: 66px; height: auto; max-height: 52px; object-fit: contain; }
.rb-bookcard__initials {
  font-family: var(--rb-mono);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .04em;
}

/* Two copies of the same star: a muted row, overlaid to the rating in gold. */
.rb-bookcard__stars {
  position: relative;
  width: 75px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 24 22'%3E%3Cpath d='M12 0l2.694 8.292h8.719l-7.054 5.124 2.694 8.292L12 16.584l-7.053 5.124 2.694-8.292L.587 8.292h8.719z' fill='%23D8D3C8'/%3E%3C/svg%3E") repeat-x left center / 15px 14px;
}
.rb-bookcard__stars-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 24 22'%3E%3Cpath d='M12 0l2.694 8.292h8.719l-7.054 5.124 2.694 8.292L12 16.584l-7.053 5.124 2.694-8.292L.587 8.292h8.719z' fill='%23FAC916'/%3E%3C/svg%3E") repeat-x left center / 15px 14px;
}

.rb-bookcard__right { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; text-align: center; }
.rb-bookcard__title { font-size: 13.5px; font-weight: 800; line-height: 1.3; letter-spacing: -.014em; }
.rb-bookcard__cta {
  display: block;
  width: 100%;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--rb-green);
  background: var(--rb-bg);
  border: 1px solid var(--rb-green);
  border-radius: 20px;
}
.rb-bookcard:hover .rb-bookcard__cta { color: #fff; background: var(--rb-green); }
.rb-bookcard__note {
  font-size: 9.5px;
  line-height: 1.35;
  color: var(--rb-muted);
  /* The terms run long; four lines is the live site's shape and enough to
     carry the gambling-help line without swamping the card. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 600px) {
  .rb-bookcard__logo { width: 60px; height: 60px; }
  .rb-bookcard__logo img { width: 54px; max-height: 42px; }
}

/* --------------------------------------------------------- review page -- */

.rb-bookhero {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 18px;
  background: var(--rb-tint);
  border: 1px solid var(--rb-line-cool);
  border-radius: 12px;
}
.rb-bookhero__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 104px;
  height: 104px;
  overflow: hidden;
  border-radius: 50%;
}
.rb-bookhero__logo img { width: 92px; height: auto; max-height: 72px; object-fit: contain; }
.rb-bookhero__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.rb-bookhero__rating { display: flex; align-items: center; gap: 8px; }
.rb-bookhero__score { font-family: var(--rb-mono); font-size: 12px; font-weight: 700; color: var(--rb-muted-deep); }
.rb-bookhero__lede { margin: 0; font-size: 16px; line-height: 1.45; font-weight: 700; letter-spacing: -.016em; }
.rb-bookhero__cta {
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  background: var(--rb-green);
  border-radius: 22px;
}
.rb-bookhero__cta:hover { background: var(--rb-navy); }
.rb-bookhero__terms { margin: 0; font-size: 10.5px; line-height: 1.45; color: var(--rb-muted); }

.rb-proscons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.rb-proscons__col {
  padding: 15px 17px;
  background: var(--rb-bg);
  border: 1px solid var(--rb-line);
  border-radius: 10px;
}
.rb-proscons__col h2 { margin: 0 0 9px; font-size: 15px; font-weight: 800; letter-spacing: -.018em; }
.rb-proscons__col ul { margin: 0; padding: 0; list-style: none; }
.rb-proscons__col li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.5;
}
.rb-proscons__col li + li { margin-top: 6px; }
.rb-proscons__col li::before {
  position: absolute;
  left: 0;
  font-weight: 800;
}
.rb-proscons__col--pro li::before { content: "+"; color: var(--rb-green); }
.rb-proscons__col--con li::before { content: "\2212"; color: var(--rb-muted-deep); }

@media (max-width: 600px) {
  .rb-bookhero { flex-direction: column; align-items: center; text-align: center; }
  .rb-bookhero__body { align-items: center; }
}

/* -- [bp-cta] recommended bet banner ------------------------------------- */
/* Sits inside article prose, so it carries its own margins and never
   inherits the body copy's serif. */

.rb-cta {
  margin: 30px 0;
  overflow: hidden;
  font-family: var(--rb-sans);
  background: #fff;
  border: 1px solid var(--rb-line-cool);
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(10, 29, 46, .08);
}

.rb-cta__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  background: var(--rb-navy);
}
.rb-cta__head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}
.rb-cta__head span {
  flex: none;
  font-family: var(--rb-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

.rb-cta__picks { margin: 0; padding: 0; list-style: none; }
.rb-cta__picks li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rb-line);
}
.rb-cta__pick {
  font-size: 16px;
  font-weight: 700;
  color: var(--rb-ink);
}
.rb-cta__event {
  font-size: 13px;
  color: var(--rb-muted);
}
/* The price pushes to the end of the row on its own, with no filler element. */
.rb-cta__price {
  margin-left: auto;
  font-family: var(--rb-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--rb-green);
}

.rb-cta__books { margin: 0; padding: 0; list-style: none; }
/* Flex rather than a three-column grid: the older banners carry no price,
   so the row is sometimes a logo and a button and nothing between them. */
.rb-cta__book {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rb-line);
}
.rb-cta__book:last-child { border-bottom: 0; }

.rb-cta__logo {
  display: flex;
  flex: 0 0 112px;
  align-items: center;
  justify-content: center;
  height: 34px;
}
.rb-cta__logo img { max-width: 100%; max-height: 34px; width: auto; object-fit: contain; }

.rb-cta__odds {
  flex: none;
  font-family: var(--rb-mono);
  font-size: 19px;
  font-weight: 600;
  color: var(--rb-ink);
  white-space: nowrap;
}

/* The button takes the end of the row on its own, with no filler element. */
.rb-cta__btn {
  flex: none;
  margin-left: auto;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--rb-green);
  border-radius: 6px;
  white-space: nowrap;
}
.rb-cta__btn:hover { color: #fff; background: var(--rb-green-bright); }

.rb-cta__note {
  margin: 0;
  padding: 11px 18px 0;
  font-size: 12px;
  color: var(--rb-muted);
}
.rb-cta .rb-note { padding: 8px 18px 14px; }

@media (max-width: 560px) {
  /* Logo and price share the first row, the button takes the full width
     under them — at 112px + price + button the three never fit. */
  .rb-cta__btn {
    flex: 1 0 100%;
    margin-left: 0;
    text-align: center;
  }
}

/* -- single track page sections ------------------------------------------ */

.rb-tracksec { margin-top: 30px; }
.rb-tracksec:first-child { margin-top: 0; }

/* The date sits beside the heading rather than under it: "Latest results"
   alone does not say which meeting is being shown. */
.rb-tracksec__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding-bottom: 9px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.024em;
  border-bottom: 1px solid var(--rb-line);
}
.rb-tracksec__title span {
  font-family: var(--rb-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--rb-muted);
}

.rb-tracksec__more { margin: 12px 0 0; font-size: 13.5px; font-weight: 600; }
.rb-tracksec__more a { color: var(--rb-green); }
.rb-tracksec__more a:hover { text-decoration: underline; }

/* The winner replaces the fields count on a result row, and a horse's name
   needs more than the 78px "13 runners" was given — "Forever Victorious" and
   "Intimidation Time" both wrapped to two lines. The race title absorbs it;
   that column already truncates by design. */
.rb-tracksec .rb-race-row { grid-template-columns: 44px 60px minmax(0, 1fr) 58px 118px; }

.rb-track-winner {
  font-family: var(--rb-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--rb-ink);
}

/* -- metropolitan track profile cards ------------------------------------ */

.rb-trackprofiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

.rb-trackprofile {
  display: block;
  padding: 12px 14px;
  background: var(--rb-tint);
  border: 1px solid var(--rb-line-cool);
  border-radius: 9px;
}
.rb-trackprofile:hover { background: #fff; border-color: var(--rb-green); }

.rb-trackprofile__name {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.016em;
}
.rb-trackprofile__meta {
  display: block;
  margin-top: 3px;
  font-family: var(--rb-mono);
  font-size: 10.5px;
  color: var(--rb-muted);
}

/* [top-bookmakers]: the live site's row of bookmaker cards, rebuilt. Logo on
   the brand colour, a review link, the offer, and a Join now button; the first
   card is marked Recommended. */
.rb-topbooks { margin: 20px 0; }
.rb-topbooks__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rb-topbooks__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 14px 12px 12px;
  text-align: center;
  background: var(--rb-bg);
  border: 1px solid var(--rb-line);
  border-radius: 10px;
}
.rb-topbooks__card.is-top { border-color: var(--rb-green); }
.rb-topbooks__badge {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: var(--rb-green);
  border-radius: 10px;
}
.rb-topbooks__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 64px;
  border-radius: 8px;
}
.rb-topbooks__logo img { max-width: 80%; max-height: 44px; object-fit: contain; }
.rb-topbooks__review { font-size: 12px; font-weight: 600; color: var(--rb-green); text-decoration: underline; }
.rb-topbooks__offer { font-size: 13px; font-weight: 800; line-height: 1.3; letter-spacing: -.012em; color: var(--rb-ink); }
.rb-topbooks__new { margin-top: auto; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--rb-muted); }
.rb-topbooks__join {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: var(--rb-green);
  border-radius: 20px;
}
.rb-topbooks__join:hover { filter: brightness(1.08); }
/* Inside article copy, ahead of the prose list and link rules. */
.rb-prose .rb-topbooks__list { padding-left: 0; }
.rb-prose .rb-topbooks__card { margin-bottom: 0; }
.rb-prose .rb-topbooks__join { color: #fff; }