.styles-module__positionsContainer--dAgbR {
  padding-bottom: 8px;
}

.styles-module__positionsContainer--dAgbR:last-child {
  padding-bottom: 0;
}

.styles-module__legContainer--LM9aA {
  position: relative;
}

.styles-module__legContainer--LM9aA:not(:last-child)::after {
  content: "";
  width: 1px;
  border-radius: 1px;
  position: absolute;
  top: 20px;
  left: 9.5px;
  bottom: 0;
  z-index: 2;
  background: var(--fd-colors-system-neutral-background-default);
}

.styles-module__legContainer--LM9aA.styles-module__raceStatusOpen--D10dX:not(:last-child)::after {
  background: var(--fd-colors-system-neutral-background-default);
}
.styles-module__legContainer--LM9aA.styles-module__raceStatusRaceOff--bhuUt:not(:last-child)::after {
  background: var(--fd-colors-system-neutral-background-default);
}
.styles-module__legContainer--LM9aA.styles-module__raceStatusWin--YBbR3:not(:last-child)::after {
  background: var(--fd-colors-system-positive-background-default);
}
.styles-module__legContainer--LM9aA.styles-module__raceStatusLost--zhq2T:not(:last-child)::after {
  background: var(--fd-colors-system-important-border-default);
}
.styles-module__legContainer--LM9aA.styles-module__raceStatusAttention--kczQ0:not(:last-child)::after {
  background: var(--fd-colors-system-warning-background-default);
}
.styles-module__legContainer--LM9aA.styles-module__raceStatusUnknown--nALmR:not(:last-child)::after {
  background: var(--fd-colors-system-warning-background-default);
}

.styles-module__horizontalBreak--zBOgG {
  height: 2px;
  width: calc(100% - 4px);
  position: relative;
  left: 2px;
  z-index: 2;
  margin: 8px 0 0;
  border: none;
  background-color: var(--fd-colors-border-subtle);
}

.styles-module__leg--oIrqp {
  display: flex;
}

.styles-module__noLeg--pYK3h {
  display: grid;
  grid-template-columns: 25px 1fr auto;
  gap: 12px 8px;
  width: 100%;
}

@keyframes styles-module__fadeInDetailsHr--Ctafr {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.styles-module__detailsHr--D0KHS {
  height: 1px;
  background-color: var(--fd-colors-border-subtle);
  width: 100%;
  border: none;
  position: relative;
  z-index: 2;
  margin: 8px 0 0;
  animation: styles-module__fadeInDetailsHr--Ctafr 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

.styles-module__container--sF5V1 {
  overflow: hidden;
  border-radius: 2px;
  border: 1px solid var(--fd-colors-border-subtle);
}

.styles-module__container--sF5V1.styles-module__showOnlySelections--mK_PO {
  border: none;
}

/* 20px circular flag, matching Figma "Flags" node (rounded 1000px, 20px). */
.styles-module__flag--ctdLq {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 1000px;
  overflow: hidden;
  border: 1px solid var(--fd-colors-background-base, #eaf0f6);
  flex-shrink: 0;
}

.styles-module__flagImage--kWnvu {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.styles-module__wrapper--_3wz7 {
  display: flex;
  flex-direction: column;
}

.styles-module__sectionHeader--EYT4A {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.styles-module__scrollContainer--NOcis {
  display: flex;
  /*
   * min-width: 0 lets the scroll container shrink below its content within a
   * flex ancestor (e.g. the stacked homepage grid columns at XS/S) so
   * overflow-x scrolling triggers, instead of the cards forcing the column —
   * and the whole page — wider than the viewport. The "sides" variant already
   * sets this; the header/header-less variant needs it too.
   */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.styles-module__scrollContainer--NOcis::-webkit-scrollbar {
  display: none;
}

/*
 * Arrows are hidden on mobile (xs/sm) and shown from md+ where the carousel is
 * paged via the arrow controls. Colour/border/disabled styling is handled by
 * the Formation tertiary Button itself (design tokens), so this only controls
 * layout + responsive visibility.
 */
.styles-module__arrowButtons--e7wPv {
  display: none;
}

@media (min-width: 960px) {
  .styles-module__arrowButtons--e7wPv {
    display: flex;
    gap: 0;
    flex-shrink: 0;
  }

  /*
   * The two header paging arrows are a joined segmented control (Figma), not two
   * separate rounded buttons: they butt together with only the OUTER corners
   * rounded (inner corners square) and share a single middle divider. Round each
   * button's outer corners per side, and pull the right button 1px left so its
   * border overlaps the left button's inner edge into one divider line instead
   * of a 2px double border. (Overrides the Formation Button's uniform corner
   * radius; verify the seam in a browser — jsdom doesn't render it.)
   */
  .styles-module__arrowButtons--e7wPv > :first-child {
    border-radius: 4px 0 0 4px;
  }

  .styles-module__arrowButtons--e7wPv > :last-child {
    margin-left: -1px;
    border-radius: 0 4px 4px 0;
  }
}

/*
 * "sides" arrow placement: chevron buttons flank the cards inline. Unlike the
 * header variant (arrows above the cards, hidden on mobile), the sides chevrons
 * are shown at ALL breakpoints — the Figma XS/S Top Tracks frames flank the
 * cards with chevrons just like desktop. This only affects the "sides" consumer
 * (Top Tracks); header arrows are unchanged.
 *
 * align-items: stretch makes both the chevron tabs and the scroll container fill
 * the flex line height (the cards' height), so the chevrons render as full-card-
 * height rounded-rectangle tabs per the Figma design, not small centered squares.
 */
.styles-module__sidesWrapper--x8uIX {
  display: flex;
  align-items: stretch;
  /*
   * gap: 0 — the chevrons butt FLUSH against the cards, matching the Figma
   * "Top Tracks Module / Desktop" node (5275:120262): the trailing card and the
   * right chevron read as one joined bordered unit (single divider, no gap), and
   * the left chevron sits flush to the first card. The 1px seam-merge (so the
   * touching card + chevron borders read as ONE divider line, not a 2px double
   * line) is done via the sideArrow negative margins below — the same technique
   * the header segmented arrows use.
   *
   * (Supersedes the earlier 7px gap, which detached the chevrons into their own
   * boxes — visibly off vs Figma. Flush also removes the old 4th-card 1px-clip:
   * with no chevron gaps the scroll area is 14px wider, so a fixed 134px card
   * always clears.) Top-Tracks-scoped ("sides" variant only); browser-verify
   * (jsdom has no layout).
   */
  gap: 0;
  /*
   * Let the wrapper shrink below its content width within its flex ancestor so
   * the inner scroll container's overflow-x can trigger instead of forcing the
   * column wider than the viewport.
   */
  min-width: 0;
}

/*
 * The scroll region hugs its content width (up to the available space) rather
 * than growing to fill it: `flex: 0 1 auto` = don't grow, shrink when content
 * overflows. This keeps the right chevron immediately after the last card (per
 * Figma), instead of `flex: 1` pushing it to the far edge with a large gap when
 * a track has fewer cards than the column can hold. min-width: 0 + overflow-x on
 * .scrollContainer still let the cards scroll when they overflow.
 */
.styles-module__scrollContainerSides--B_EjB {
  flex: 0 1 auto;
  min-width: 0;
  /*
   * 8px leading inset before the first card (matches the inter-card gap and the
   * Figma "Top Tracks Module" left inset from the ‹ chevron). This lives as
   * scroll-start padding INSIDE the scroll container — not an external margin on
   * the chevron — so it shows only at rest (scrollLeft 0) and scrolls away with
   * the content. When scrolled, a partial card reaches the chevron edge instead
   * of leaving a dead gap. Reserving this width also narrows the viewport so the
   * trailing card peeks under the right chevron (the Figma "more races"
   * affordance). Sides-only (Top Tracks); browser-verify (jsdom has no layout).
   */
  padding-left: 8px;
}

.styles-module__sideArrow--y_AQm {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}

/*
 * Left chevron: flush to the scroll container (pulled 1px over it, mirroring the
 * right chevron below) so the borders merge into one divider line. The rest-state
 * inset before the first card is NOT an external margin here — it's the scroll
 * container's `padding-left` (see .scrollContainerSides), which scrolls away, so
 * when scrolled a partial card meets the chevron with no dead gap. (Was an 8px
 * external margin, which left a permanent empty gap beside the chevron mid-scroll
 * — visibly wrong when the left arrow is active.)
 */
.styles-module__sidesWrapper--x8uIX > .styles-module__sideArrow--y_AQm:first-child {
  margin-right: -1px;
}

/*
 * Right chevron: pulled 1px over the last card so the touching card + chevron
 * borders read as ONE divider line (flush/joined), not a 2px double line —
 * matching the Figma trailing card + › joined unit. (Header segmented-arrow seam
 * technique.) jsdom has no layout, so verify the seam in a browser.
 */
.styles-module__sidesWrapper--x8uIX > .styles-module__sideArrow--y_AQm:last-child {
  margin-left: -1px;
}

.SaddleClothSilk-module__container--DYn1u {
  width: 32px;
}

.SaddleClothSilk-module__containerIsBadge--zV_c2 {
  width: 20px;
}

.SaddleClothSilk-module__containerUseUpdatedSilk--kwUNZ {
  width: 40px;
}

.SaddleClothSilk-module__containerHasSilk--lEShj {
  width: 59px;
}

@media screen and (min-width: 768px) {
  .SaddleClothSilk-module__container--DYn1u {
    align-items: center;
  }
}

.SaddleClothSilk-module__containerUpdatedSilkMobile--kwv5z {
  position: relative;
}

@media screen and (min-width: 767.98px) {
  .SaddleClothSilk-module__containerUpdatedSilkMobile--kwv5z {
    overflow: initial;
    position: static;
  }
}

.SaddleClothSilk-module__saddleContainer--ATnUd {
  background-color: #fff;
  display: inline-flex;
  flex-shrink: 0;
  z-index: 1;
}

.SaddleClothSilk-module__silkContainer--RxqW6 {
  transform: translateX(-16px);
}

.SaddleClothSilk-module__silkContainerIsScratched--L4nd_ {
  opacity: 0.4;
}

.SaddleClothSilk-module__useUpdatedSilkSilkBorderContainer--a8YjH svg {
  height: 55px;
  width: 56px;
}

.SaddleClothSilk-module__silkImage--sbLQz {
  display: flex;
  object-fit: contain;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
}

.SaddleClothSilk-module__useUpdatedSilkSilkImage--NWQVM {
  height: 53px;
  width: 55px;
}

.styles-module__container--ehy44 {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

/* Dot layers use position:absolute; with this class the anchor is an outer <li> etc. */
.styles-module__containerAnchorToAncestor--jZ0Ob {
  position: static;
}

.styles-module__dotWrapper--pcBE0 {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  pointer-events: none;
  overflow: visible;
}

.styles-module__pulseRing--LBBFK {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  margin-left: -4px;
  border-radius: 50%;
  background-color: var(--fd-colors-system-important-background-default);
  opacity: 0.6;
  animation: styles-module__pulse--wUlFv 2.5s ease-out infinite;
}

.styles-module__pulseRingDelayed--VuMgm {
  animation-delay: 0.75s;
}

.styles-module__dot--sJIQS {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--fd-colors-system-important-background-default);
}

@keyframes styles-module__pulse--wUlFv {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.25);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .styles-module__pulseRing--LBBFK,
  .styles-module__pulseRingDelayed--VuMgm {
    animation: none;
    opacity: 0;
  }
}

.styles-module__cell--LwMVS {
  display: flex;
  flex-direction: row;
  min-height: 64px;
  width: 100%;
  border: 1px solid transparent;
  border-bottom-color: var(--themeExtension-component-lhn-border-default, rgba(255, 255, 255, 0.2));
  box-sizing: border-box;
}

.styles-module__cellInteractive--dOhae {
  cursor: pointer;
}

.styles-module__cell--LwMVS:hover {
  background-color: var(--themeExtension-component-lhn-background-hover, #14417a);
  border-color: var(--themeExtension-component-lhn-border-brand, #0070eb);
  border-radius: 4px;
}

.styles-module__cell--LwMVS:focus-visible {
  outline: 2px solid var(--themeExtension-component-lhn-border-brand, #0070eb);
  outline-offset: -2px;
  border-radius: 4px;
}

.styles-module__header--aS2Z7 {
  position: sticky;
  top: -1px;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-bottom-color: var(--themeExtension-component-lhn-border-default, rgba(255, 255, 255, 0.2));
}

.styles-module__loadingBar--j3lZm {
  width: 100%;
  height: 12px;
  border-radius: 2px;
}

.styles-module__container--WLgrn {
  padding-top: var(--fd-space-space-4);    /* 16px */
  padding-bottom: var(--fd-space-space-8); /* 32px */
  padding-left: var(--fd-space-space-12);  /* 48px — aligns with race card content column */
  padding-right: var(--fd-space-space-2);  /* 8px */
}

.styles-module__groupHeader--coCdp {
  position: sticky;
  top: -1px;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
}

.styles-module__listItem--_kiZH {
  cursor: pointer;
}

.styles-module__listItem--_kiZH:hover {
  background-color: var(--themeExtension-component-lhn-background-hover, #14417A);
}

.styles-module__listItem--_kiZH:focus-visible {
  outline: 2px solid var(--fd-colors-core-blue-d-2, #1672d6);
  outline-offset: -2px;
}

/**
 IFRAME IOS HACK by David Walsh
 https://davidwalsh.name/scroll-iframes-ios
 */
.styles__iframeScrollWrapper--FxXhO {
  background: white;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.styles__iframeContent--Ew67H {
  height: 100%;
  width: 100%;
  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  position: absolute;
}

.styles__splashScreen--oHRcV {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
}

.styles__loadingWrapper--Z9PXH {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #fff;
}