/* Racing — frames racing (6:367) and mobile-racing (36:351).
 * Shares .intro / .work / .odd with the sports page (sports.css is not loaded here,
 * so the intro block is repeated with its own numbers). */

/* ── intro ────────────────────────────────────────────────────────────── */
.intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 232px; padding: 48px var(--container-pad); background: var(--color-purple); box-shadow: inset 0 -1px 0 var(--color-border); }
.intro__left { display: flex; flex-direction: column; gap: 12px; width: 700px; max-width: 100%; }
.intro__crumb { font-weight: 900; font-size: 12px; line-height: 16px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-brand); }
.intro__title { font-family: var(--font-display); font-size: 48px; line-height: 52px; text-transform: uppercase; color: var(--color-text); }
.intro__lead { font-size: 15px; line-height: 22px; color: var(--color-card-3); }
.codes { display: flex; gap: 8px; }
.codes__tab {
  display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: var(--radius-sm);
  background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border);
  font-weight: 700; font-size: 12px; line-height: 16px; text-transform: uppercase; color: var(--color-text); text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.codes__tab:hover { background: var(--color-surface-2); }
.codes__tab.is-active { background: var(--color-brand); color: var(--color-ink); box-shadow: none; }

/* ── next to jump ─────────────────────────────────────────────────────── */
.ntj { display: flex; flex-direction: column; gap: 16px; padding: 24px var(--container-pad); background: var(--color-bg); }
.ntj__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 41px; }
.ntj__titles { display: flex; flex-direction: column; gap: 2px; }
.ntj__title { font-family: var(--font-display); font-size: 20px; line-height: 22px; text-transform: uppercase; color: var(--color-text); }
.ntj__sub { font-size: 13px; line-height: 17px; color: var(--color-muted); }
.ntj__all { font-weight: 600; font-size: 13px; line-height: 17px; text-transform: uppercase; color: var(--color-text); text-decoration: none; }
.ntj__all:hover { text-decoration: underline; }
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.tile { display: flex; }
.tile__link {
  display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px; border-radius: var(--radius-sm);
  background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); text-decoration: none;
  transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.tile__link:hover { box-shadow: inset 0 0 0 1px var(--color-brand); transform: translateY(-2px); }
.tile__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 21px; }
.tile__min { font-family: var(--font-mono); font-weight: 900; font-size: 16px; line-height: 21px; color: var(--color-brand); }
.tile__code { display: inline-flex; padding: 2px 6px; border-radius: var(--radius-xs); background: var(--color-surface-2); font-weight: 800; font-size: 9px; line-height: 12px; text-transform: uppercase; color: var(--color-muted); }
.tile__bottom { display: flex; flex-direction: column; gap: 2px; }
.tile__track { font-family: var(--font-display); font-size: 14px; line-height: 15px; text-transform: uppercase; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile__race { font-size: 12px; line-height: 16px; color: var(--color-muted); }
.tile--live .tile__link { background: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-brand); }
.tile--live .tile__min, .tile--live .tile__track { color: var(--color-ink); }
.tile--live .tile__code { background: var(--color-ink); color: var(--color-brand); }
.tile--live .tile__race { color: var(--color-muted-3); }
.tile[hidden] { display: none; }

/* ── workspace ────────────────────────────────────────────────────────── */
.work { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 24px; align-items: start; padding: 32px var(--container-pad) 64px; background: var(--color-bg); }
.rleft { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.racehead { display: flex; flex-direction: column; gap: 20px; padding: 24px; border-radius: 6px; background: var(--color-card); box-shadow: inset 0 0 0 1px var(--color-border-light); }
.racehead__details { display: flex; flex-direction: column; gap: 6px; }
.racehead__crumb { font-weight: 800; font-size: 11px; line-height: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--color-purple-light); }
.racehead__title { font-family: var(--font-display); font-size: 28px; line-height: 30px; text-transform: uppercase; color: var(--color-ink); }
.meta { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 0; }   /* frame is FIXED 28: the bottom 4 is clipped */
.meta__pill { display: inline-flex; padding: 4px 8px; border-radius: 3px; background: var(--color-card-3); font-weight: 700; font-size: 12px; line-height: 16px; text-transform: uppercase; color: var(--color-muted-3); }
.racehead__line { height: 1px; margin: 0 0 -1px; border: 0; background: var(--color-border-light); }
.racenums { display: flex; align-items: center; gap: 12px; min-height: 33px; }
.racenums__label { font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 1px; text-transform: uppercase; color: var(--color-muted-3); white-space: nowrap; }
.racenums__list { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.racenums__tab {
  display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: var(--radius-sm);
  background: var(--color-card-3); font-weight: 700; font-size: 13px; line-height: 17px; color: var(--color-muted-3); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.racenums__tab:hover { background: var(--color-border-light); color: var(--color-ink); }
.racenums__tab.is-active { background: var(--color-brand); color: var(--color-ink); }
.mtabs { display: flex; gap: 16px; min-height: 33px; }
.mtab {
  display: inline-flex; padding: 8px 12px; border: 0; background: none; cursor: pointer;
  font-weight: 700; font-size: 13px; line-height: 17px; text-transform: uppercase; color: var(--color-muted-3);
  box-shadow: inset 0 -3px 0 transparent; transition: color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.mtab:hover { color: var(--color-ink); }
.mtab[aria-selected="true"] { color: var(--color-ink); box-shadow: inset 0 -3px 0 var(--color-brand); }
.mtab:focus-visible { outline: none; box-shadow: inset 0 -3px 0 var(--color-brand), var(--focus-ring-light); }

.runners { display: flex; flex-direction: column; border-radius: 6px; background: var(--color-card); box-shadow: inset 0 0 0 1px var(--color-border-light); overflow: hidden; }
.runners__head { display: flex; align-items: center; gap: 12px; padding: 12px;   /* the frame draws this header 765px wide, short of the 916px card — a mockup slip, drawn full width here */ background: var(--color-card-3); box-shadow: inset 0 -1px 0 var(--color-border-light); }
.runners__col { font-weight: 700; font-size: 11px; line-height: 14px; text-transform: uppercase; color: var(--color-muted-3); }
.runners__col--no { flex: 0 0 30px; }
.runners__col--name { flex: 1; }
.runners__col--jt { flex: 0 0 180px; }
.runners__col--form { flex: 0 0 80px; }
.runners__col--bar { flex: 0 0 60px; text-align: center; }
.runners__col--wt { flex: 0 0 60px; }
.runners__col--win, .runners__col--place { flex: 0 0 100px; text-align: center; }
.runner { display: flex; align-items: center; gap: 12px; min-height: 61px; padding: 12px; background: var(--color-card); box-shadow: inset 0 -1px 0 var(--color-border-light); }
.runner__id, .runner__stats, .runner__odds { display: contents; }          /* desktop: the cells are the flex items; the wrappers exist for the stacked mobile row */
.runner--fav { background: rgba(255, 222, 0, .082); }                /* favourite row tint from the frame */
.runner__no { flex: 0 0 30px; font-weight: 700; font-size: 14px; line-height: 18px; color: var(--color-ink); }
.runner__name { flex: 1; min-width: 0; font-weight: 800; font-size: 14px; line-height: 18px; text-transform: uppercase; color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runner__jt { display: flex; flex-direction: column; gap: 1px; flex: 0 0 180px; min-width: 0; }
.runner__jockey { font-size: 13px; line-height: 17px; color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runner__trainer { font-size: 11px; line-height: 14px; color: var(--color-muted-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runner__form, .runner__bar, .runner__wt { font-size: 13px; line-height: 17px; color: var(--color-muted-3); }
.runner__form { flex: 0 0 80px; }
.runner__bar { flex: 0 0 60px; text-align: center; }
.runner__wt { flex: 0 0 60px; }
.runner__odd { flex: 0 0 100px; justify-content: center; min-height: 37px; padding: 10px; }
.runner .odd__price { color: var(--color-red); }
.runner .odd[aria-pressed="true"] .odd__price { color: var(--color-ink); }
.runners__empty { padding: 24px; font-size: 14px; line-height: 20px; color: var(--color-ink-2); }

.upcoming { display: flex; flex-direction: column; border-radius: 6px; background: var(--color-card); box-shadow: inset 0 0 0 1px var(--color-border-light); overflow: hidden; }
.upcoming__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 49px; padding: 16px; background: var(--color-card-3); box-shadow: inset 0 -1px 0 var(--color-border-light); }
.upcoming__title { font-family: var(--font-display); font-size: 16px; line-height: 17px; text-transform: uppercase; color: var(--color-ink); }
.upcoming__all { font-weight: 600; font-size: 13px; line-height: 17px; text-transform: uppercase; color: var(--color-red); text-decoration: none; }
.upcoming__all:hover { text-decoration: underline; }
.upcoming__list { display: flex; flex-direction: column; }
.urow { display: flex; align-items: center; gap: 20px; min-height: 50px; padding: 16px; background: var(--color-card); box-shadow: inset 0 -1px 0 var(--color-border-light); }
.urow__time { flex: 0 0 80px; font-weight: 700; font-size: 14px; line-height: 18px; color: var(--color-ink); }
.urow__names { display: flex; align-items: center; gap: 20px; flex: 0 0 370px; }   /* name 200 + gap + code 150, as drawn */
.urow__name { flex: 0 0 200px; font-family: var(--font-display); font-size: 14px; line-height: 15px; text-transform: uppercase; color: var(--color-ink); }
.urow__code { flex: 0 0 150px; font-weight: 600; font-size: 12px; line-height: 16px; text-transform: uppercase; color: var(--color-muted-3); }
.urow__starts { flex: 1; font-weight: 600; font-size: 13px; line-height: 17px; color: var(--color-red); }
.urow__link { flex: 0 0 120px; text-align: right; font-weight: 700; font-size: 13px; line-height: 17px; text-transform: uppercase; color: var(--color-red); text-decoration: none; }
.urow__link:hover { text-decoration: underline; }

/* bet slip — the racing frame draws a 340px, radius-6 variant */
.work--racing .betslip { position: sticky; top: 96px; gap: 16px; padding: 16px; border-radius: 6px; }
.work--racing .betslip__count { border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: 700; }
.work--racing .pick { gap: 10px; padding: 12px 12px 2px; border-radius: var(--radius-sm); background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border); }   /* frame is FIXED 88: content runs into the bottom padding */
.work--racing .pick__sport { border-radius: 3px; background: rgba(239, 68, 68, .133); font-weight: 700; }
.work--racing .pick__event { font-size: 11px; line-height: 14px; }
.work--racing .pick__remove { font-weight: 400; font-size: 11px; line-height: 14px; }
.work--racing .pick__bottom { min-height: 18px; }
.work--racing .pick__market { font-size: 13px; line-height: 17px; }
.work--racing .pick__name { font-weight: 700; font-size: 14px; line-height: 18px; }
.work--racing .pick__odds { font-family: var(--font-body); font-weight: 800; font-size: 14px; line-height: 18px; }
.work--racing .betslip__form { gap: 16px; }
.work--racing .stake { gap: 6px; }
.work--racing .stake__label { font-weight: 700; }
.work--racing .stake__input { min-height: 42px; padding: 0 12px; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--color-border); }
.work--racing .stake__currency, .work--racing .stake__field { font-weight: 700; font-size: 14px; line-height: 18px; }
.work--racing .stake__field { padding: 12px 0; }
.work--racing .betslip__return { min-height: 21px; }
.work--racing .betslip__return-label { font-weight: 400; font-size: 13px; line-height: 17px; text-transform: none; }
.work--racing .betslip__return-value { font-weight: 800; font-size: 16px; line-height: 21px; }
.work--racing .betslip__place { min-height: 46px; padding: 14px; border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: 800; font-size: 14px; line-height: 18px; }
.work--racing .betslip__compliance { font-size: 11px; line-height: 14px; }
.work--racing .betslip__limit { font-weight: 600; }
.slipbar { display: none; }

@media (min-width: 1200px) and (max-width: 1439px) {
  .runners__col--jt, .runner__jt { flex-basis: 140px; }
  .runners__col--form, .runner__form { flex-basis: 70px; }
  .runners__col--bar, .runner__bar, .runners__col--wt, .runner__wt { flex-basis: 50px; }
  .runners__col--win, .runners__col--place, .runner__odd { flex-basis: 80px; }
}

/* ── mobile (390 frame) ───────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .intro { flex-direction: column; align-items: stretch; gap: 24px; min-height: 0; padding: 32px var(--container-pad) 24px; box-shadow: none; }
  .intro__left { width: auto; }
  .intro__crumb { font-weight: 700; }
  .intro__title { font-size: 32px; line-height: 36px; }
  .intro__lead { font-size: 14px; line-height: 20px; color: var(--color-card-2); }
  .codes { align-self: stretch; gap: 4px; }
  .codes__tab { flex: 1; min-height: 48px; padding: 0; font-size: 11px; line-height: 14px; }

  .ntj__head { min-height: 38px; }
  .ntj__title { font-size: 18px; line-height: 20px; }
  .ntj__sub { font-size: 12px; line-height: 16px; }
  .ntj__all { font-weight: 700; font-size: 12px; line-height: 16px; color: var(--color-brand); }
  .tiles { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .tiles::-webkit-scrollbar { display: none; }
  .tile { flex: 0 0 112px; }
  .tile__link { gap: 8px; padding: 12px; }
  .tile__top { flex-direction: column; align-items: flex-start; gap: 2px; min-height: 0; }
  .tile__code { order: -1; padding: 2px 6px; background: var(--color-bg); font-size: 10px; line-height: 13px; }
  .tile__min { font-size: 14px; line-height: 18px; }
  .tile__bottom { gap: 1px; }
  .tile__track { font-size: 12px; line-height: 13px; }
  .tile__race { font-size: 11px; line-height: 14px; }

  .work { display: block; padding: 0; }
  .rleft { gap: 0; }
  .racehead { gap: 0; padding: 0; border-radius: 0; box-shadow: none; background: none; }
  .racehead__details { gap: 12px; padding: 16px var(--container-pad); background: var(--color-card-2); }
  .racehead__crumb { font-weight: 700; }
  .racehead__title { margin-top: -8px; font-size: 24px; line-height: 26px; }
  .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0; }
  .meta__pill { justify-content: center; min-height: 28px; padding: 6px 10px; border-radius: var(--radius-sm); }
  .racehead__line { display: none; }
  .racenums { gap: 8px; min-height: 60px; padding: 12px var(--container-pad); background: var(--color-card-2); box-shadow: inset 0 1px 0 var(--color-border), inset 0 -1px 0 var(--color-border); }
  .racenums__label { font-size: 11px; line-height: 14px; letter-spacing: 0; }
  .racenums__list { flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .racenums__list::-webkit-scrollbar { display: none; }
  .racenums__tab { flex: 0 0 36px; width: 36px; height: 36px; padding: 0; font-family: var(--font-mono); font-weight: 900; }
  .mtabs { gap: 0; min-height: 41px; background: var(--color-card-2); }
  .mtab { flex: 1; justify-content: center; padding: 12px 0; }

  .runners { border-radius: 0; box-shadow: none; background: var(--color-card-2); }
  .runners__head { display: none; }
  .runner { flex-direction: column; align-items: stretch; gap: 10px; min-height: 0; padding: 12px; box-shadow: inset 0 -1px 0 var(--color-border); background: var(--color-card); }
  .runner--fav { background: rgba(255, 222, 0, .082); }
  .runner__id { display: flex; align-items: center; gap: 8px; min-height: 18px; }
  .runner__no { flex: 0 0 20px; }
  .runner__name { flex: 1; font-family: var(--font-display); font-weight: 400; font-size: 14px; line-height: 15px; }
  .runner__jt { flex-direction: row; align-items: center; gap: 8px; flex: none; min-height: 16px; }
  .runner__jockey { font-weight: 700; font-size: 12px; line-height: 16px; }
  .runner__trainer { font-size: 11px; line-height: 14px; }
  .runner__stats { display: flex; gap: 12px; min-height: 14px; }
  .runner__form, .runner__bar, .runner__wt { flex: none; font-size: 11px; line-height: 14px; text-align: left; text-transform: uppercase; }
  .runner__odds { display: flex; gap: 8px; }
  .runner__odd { flex: 1; justify-content: space-between; min-height: 44px; padding: 12px; }
  .runner .odd__name { display: inline; font-size: 11px; line-height: 14px; color: var(--color-muted-3); }
  .runner .odd[aria-pressed="true"] .odd__name { color: var(--color-ink); }
  .runner .odd__price { font-size: 14px; line-height: 18px; }
  .runner__odd--place { background: var(--color-card-2); box-shadow: inset 0 0 0 1px var(--color-border); }

  .upcoming { gap: 16px; padding: 24px var(--container-pad); border-radius: 0; box-shadow: none; background: var(--color-card-2); }
  .upcoming__head { min-height: 17px; padding: 0; background: none; box-shadow: none; }
  .upcoming__all { font-weight: 700; font-size: 12px; line-height: 16px; }
  .upcoming__list { gap: 1px; background: var(--color-border-light); }
  .urow { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "time starts" "names link"; row-gap: 8px; column-gap: 8px; min-height: 0; padding: 12px; box-shadow: none; }
  .urow__time { grid-area: time; flex: none; font-size: 13px; line-height: 17px; }
  .urow__starts { grid-area: starts; flex: none; text-align: right; font-weight: 800; font-size: 11px; line-height: 14px; text-transform: uppercase; color: var(--color-muted-2); }
  .urow__names { grid-area: names; flex: none; flex-direction: column; align-items: flex-start; gap: 2px; }
  .urow__name, .urow__code { flex: none; }
  .urow__name { font-size: 13px; line-height: 14px; }
  .urow__code { font-weight: 400; font-size: 11px; line-height: 14px; text-transform: none; color: var(--color-muted-2); }
  .urow__link { grid-area: link; flex: none; padding: 6px 10px; border-radius: var(--radius-sm); font-size: 11px; line-height: 14px; }

  /* bet slip as the mobile sheet (10-bet-slip-bottom-sheet) + sticky bar (11) */
  .work--racing .betslip { position: static; gap: 16px; padding: 16px var(--container-pad); border-radius: 0; box-shadow: inset 0 1px 0 var(--color-border), inset 0 -1px 0 var(--color-border); }
  .work--racing .pick { padding: 12px; }
  .work--racing .betslip::before { content: ""; display: block; width: 36px; height: 4px; margin: 0 auto; border-radius: 2px; background: var(--color-border); }
  .work--racing .betslip__head { height: 20px; }
  .work--racing .betslip__count { padding: 2px 6px; background: var(--color-purple); font-weight: 800; font-size: 10px; line-height: 13px; }
  .work--racing .pick__sport { border-radius: var(--radius-xs); background: var(--color-purple); color: var(--color-text); font-weight: 800; }
  .work--racing .pick__event { font-size: 12px; line-height: 16px; }
  .work--racing .pick__remove { font-weight: 700; font-size: 12px; line-height: 16px; }
  .work--racing .pick__bottom { min-height: 34px; }
  .work--racing .pick__market { font-size: 11px; line-height: 14px; }
  .work--racing .pick__odds { padding: 4px 8px; border-radius: var(--radius-sm); background: var(--color-brand); font-family: var(--font-mono); font-weight: 900; font-size: 12px; line-height: 16px; color: var(--color-ink); }
  .work--racing .stake__currency, .work--racing .stake__field { font-weight: 900; }
  .work--racing .betslip__return-value { font-weight: 900; }
  .work--racing .betslip__place { min-height: 42px; font-family: var(--font-display); font-weight: 400; font-size: 13px; line-height: 14px; }
  .work--racing .betslip__compliance { flex-direction: row; align-items: center; justify-content: space-between; min-height: 14px; }
  .work--racing .betslip__place ~ .betslip__line { display: none; }
  .work--racing .betslip__limit { font-weight: 700; }
  .work--racing .betslip__return-label { font-weight: 700; font-size: 12px; line-height: 16px; text-transform: uppercase; }
  .slipbar {
    display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 14px;
    background: var(--color-purple); box-shadow: inset 0 1px 0 var(--color-border), inset 0 -1px 0 var(--color-border); text-decoration: none;
    position: sticky; bottom: 0; z-index: var(--z-sheet);
  }
  .slipbar__left { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 13px; line-height: 14px; text-transform: uppercase; color: var(--color-text); }
  .slipbar__count { display: inline-flex; padding: 2px 6px; border-radius: var(--radius-xs); background: var(--color-brand); font-family: var(--font-body); font-weight: 800; font-size: 10px; line-height: 13px; color: var(--color-ink); }
  .slipbar__right { display: flex; align-items: center; gap: 12px; }
  .slipbar__return { font-family: var(--font-mono); font-weight: 900; font-size: 14px; line-height: 18px; color: var(--color-brand); }
  .slipbar__arrow { font-weight: 700; font-size: 14px; line-height: 18px; color: var(--color-text); }
}