/* ==========================================================================
   Racing page — "bailrbet-racing" (1440) / "bailrbet-racing-mobile" (390)
   Mobile-first; desktop at min-width 1024px. Figma inside strokes → border + reduced padding.
   ========================================================================== */

.rc-shell { width: 100%; }
.rc [hidden] { display: none !important; }

/* Command board: hero copy + next to jump ---------------------------------- */
.rc-board { background: var(--navy); }
.rc-hero { display: flex; flex-direction: column; gap: 12px; padding: 23px 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rc-hero__kicker { font-size: 11px; line-height: 14px; font-weight: 800; color: var(--yellow); }
.rc-hero__title { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-display); font-weight: 900; font-size: 44px; line-height: 40px; color: var(--white); }
.rc-hero__text { font-size: 13px; line-height: 18px; color: var(--ink-4); }
.rc-hero__badge { display: flex; align-items: center; gap: 6px; padding-top: 4px; }
.rc-hero__badge-text { font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 16px; color: var(--white); white-space: nowrap; }
.rc-hero__badge-line { width: 20px; height: 2px; background: var(--blue); }

.rc-ntj { display: flex; flex-direction: column; gap: 16px; padding: 24px 0 24px 16px; }
.rc-ntj__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-right: 32px; }
.rc-ntj__heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rc-ntj__title { font-family: var(--font-display); font-weight: 900; font-size: 24px; line-height: 29px; color: var(--white); }
.rc-ntj__sub { font-size: 11px; line-height: 14px; color: var(--ink-4); }
.rc-ntj__link { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--yellow); white-space: nowrap; }
.rc-ntj__link:hover { text-decoration: underline; }
.rc-ntj__track { gap: 10px; padding-right: 16px; }
.rc-tile { display: flex; flex-direction: column; gap: 10px; width: 150px; height: 101px; padding: 13px; border-radius: 4px; background: var(--navy-2); border: 1px solid var(--line); transition: border-color var(--t), transform var(--t), box-shadow var(--t); }
.rc-tile:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 71, 255, .25); }
.rc-tile__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.rc-tile__time { font-family: var(--font-display); font-weight: 900; font-size: 22px; line-height: 26px; color: var(--yellow); white-space: nowrap; }
.rc-tile__tag { display: inline-flex; background: var(--navy); color: var(--ink-4); border-radius: 2px; padding: 1px 4px; font-size: 8px; line-height: 10px; font-weight: 800; white-space: nowrap; }
.rc-tile__bottom { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rc-tile__track { font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 22px; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-tile__race { font-size: 11px; line-height: 14px; color: var(--ink-4); }
.rc-tile.is-active, .rc-tile.is-active:hover { background: var(--yellow); border-color: var(--yellow); }
.rc-tile.is-active .rc-tile__time, .rc-tile.is-active .rc-tile__track { color: var(--navy); }
.rc-tile.is-active .rc-tile__tag { color: var(--yellow); }
.rc-tile.is-active .rc-tile__race { color: rgba(5, 8, 33, .8); font-weight: 700; }
.rc-tile.is-closed { opacity: .6; }
.rc-tile.is-soon .rc-tile__time { animation: rc-pulse 1.2s ease-in-out infinite; }
@keyframes rc-pulse { 50% { opacity: .55; } }

@media (min-width: 1024px) {
  .rc-shell { width: min(var(--content), 100% - 2 * var(--gutter)); margin-inline: auto; }
  .rc-board { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 39px 0; }
  .rc-board__inner { display: flex; align-items: flex-start; gap: 48px; }
  .rc-hero { flex: 0 0 340px; gap: 16px; padding: 0; border: 0; }
  .rc-hero__kicker { font-size: 12px; line-height: 16px; color: var(--blue); }
  .rc-hero__title { gap: 4px; font-size: 64px; line-height: 56px; }
  .rc-hero__text { font-size: 14px; line-height: 22px; }
  .rc-hero__badge { align-self: flex-start; gap: 0; padding: 4px 8px; border-radius: 4px; background: var(--line); }
  .rc-hero__badge-text { font-size: 14px; line-height: 17px; }
  .rc-hero__badge-line { display: none; }
  .rc-ntj { flex: 1 1 auto; min-width: 0; gap: 20px; padding: 0; }
  .rc-ntj__header { align-items: center; padding: 0; }
  .rc-ntj__title { font-size: 28px; line-height: 34px; }
  .rc-ntj__sub { font-size: 13px; line-height: 17px; }
  .rc-ntj__link { font-size: 13px; line-height: 17px; font-weight: 600; }
  .rc-ntj__track { gap: 12px; padding: 0; overflow: visible; }
  .rc-tile { flex: 1 1 0; width: auto; height: 124px; gap: 12px; padding: 15px; }
  .rc-tile__time { font-size: 32px; line-height: 38px; }
  .rc-tile__tag { border-radius: 3px; padding: 2px 6px; font-size: 9px; line-height: 12px; }
  .rc-tile__track { font-size: 20px; line-height: 24px; }
  .rc-tile__race { font-size: 13px; line-height: 17px; }
}

/* Race workspace ------------------------------------------------------------- */
.rc-main { background: var(--cream); color: var(--ink); }
.rc-work { display: flex; flex-direction: column; transition: opacity var(--t); }
.rc-work.is-loading { opacity: .6; pointer-events: none; }
.rc-race { display: flex; flex-direction: column; }
.rc-race__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; }
.rc-race__titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rc-race__kicker { font-size: 11px; line-height: 14px; font-weight: 800; color: var(--blue); }
.rc-work[data-status="jumping"] .rc-race__kicker, .rc-work[data-status="resulted"] .rc-race__kicker { color: var(--red); }
.rc-race__title { font-family: var(--font-display); font-weight: 900; font-size: 32px; line-height: 38px; color: var(--navy); }
.rc-race__meta { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.rc-race__num { display: inline-flex; padding: 10px; border-radius: 4px; background: var(--navy); color: var(--yellow); font-family: var(--font-display); font-weight: 900; font-size: 24px; line-height: 29px; white-space: nowrap; }
.rc-race__rule { height: 1px; background: var(--line-light); margin-bottom: -1px; }
.rc-race__rule--markets { display: none; }
.rc-race__tabs-row { display: flex; align-items: center; gap: 16px; }
.rc-race__tabs-label { display: none; }
.rc-race__tabs { flex: 1 1 auto; min-width: 0; gap: 6px; padding: 12px; }
.rc-race__tab { display: inline-flex; align-items: center; height: 38px; padding: 0 11px; border-radius: 4px; background: var(--white); border: 1px solid var(--line-light); color: var(--navy); font-size: 12px; line-height: 16px; font-weight: 700; white-space: nowrap; transition: background-color var(--t), border-color var(--t), color var(--t); }
.rc-race__tab:hover { border-color: var(--blue); }
.rc-race__tab .d-only { white-space: pre; } /* keep the leading space inside the flex item: "R4 SELECTED" */
.rc-race__tab.is-closed { color: var(--ink-3); }
.rc-race__tab.is-active, .rc-race__tab.is-active:hover { background: var(--blue); border-color: var(--yellow); color: var(--white); font-weight: 900; }
.rc-race__markets { display: flex; gap: 8px; padding: 0 16px 12px; }
.rc-race__market { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 12px; border-radius: 4px; background: var(--white); border: 1px solid var(--line-light); color: var(--ink-3); font-size: 11px; line-height: 14px; font-weight: 800; white-space: nowrap; transition: background-color var(--t), border-color var(--t), color var(--t); }
.rc-race__market:hover { border-color: var(--navy); color: var(--navy); }
.rc-race__market.is-active, .rc-race__market.is-active:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }

.rc-runners__head { display: none; }
.rc-runners__note { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; background: var(--white); border-bottom: 1px solid var(--line-light); font-size: 12px; line-height: 16px; color: var(--ink-2); }
.rc-runners__result strong { color: var(--ink); }
.rc-runners__list { display: flex; flex-direction: column; }
.rc-runner { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; row-gap: 10px; align-items: start; padding: 12px 12px 11px; background: var(--white); border-bottom: 1px solid var(--line-light); transition: background-color var(--t); }
.rc-runner.is-selected { background: rgba(0, 71, 255, .04); }
.rc-runner__num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 12px; background: var(--cream); color: var(--navy); font-size: 12px; line-height: 16px; font-weight: 800; }
.rc-runner.is-selected .rc-runner__num { background: var(--blue); color: var(--white); }
.rc-runner__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rc-runner__name { font-size: 14px; line-height: 18px; font-weight: 800; color: var(--navy); text-transform: uppercase; }
.rc-runner__person { font-size: 12px; line-height: 16px; color: rgba(5, 8, 33, .8); }
.rc-runner__trainer { font-size: 10px; line-height: 1; color: var(--ink-3); margin-left: 4px; }
.rc-runner__detail { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.rc-runner__form, .rc-runner__barrier, .rc-runner__weight { display: none; }
.rc-runner__odds { grid-column: 1 / -1; display: flex; gap: 8px; }
.rc-odds.odds { padding: 9px; }
.rc-odds .odds__label { font-size: 11px; line-height: 14px; font-weight: 700; color: var(--ink-3); }
.rc-odds .odds__price { font-size: 13px; line-height: 17px; font-weight: 800; color: var(--blue); }
.rc-odds.odds--selected, .rc-odds.odds--selected:hover { background: var(--blue); border-color: var(--blue); }
.rc-odds.odds--selected .odds__label, .rc-odds.odds--selected .odds__price { color: var(--white); }
.rc-odds.is-closed { opacity: .55; }
.rc-runners__empty { padding: 24px 16px; background: var(--white); font-size: 13px; line-height: 18px; color: var(--ink-2); }
.rc-srm { display: flex; flex-direction: column; gap: 8px; padding: 24px 16px; background: var(--white); border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.rc-srm__title { font-family: var(--font-display); font-weight: 900; font-size: 24px; line-height: 29px; color: var(--navy); }
.rc-srm__text, .rc-srm__note { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.rc-srm__link { margin-top: 4px; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--blue); }
.rc-srm__link:hover { text-decoration: underline; }
.rc-slip { display: none; }

@media (min-width: 1024px) {
  .rc-main { padding: 48px 0; }
  .rc-main__inner { display: flex; align-items: flex-start; gap: 24px; }
  .rc-work { flex: 1 1 auto; min-width: 0; gap: 24px; }
  .rc-race { gap: 20px; padding: 23px; background: var(--white); border: 1px solid var(--line-light); border-radius: 6px; }
  .rc-race__head { padding: 0; }
  .rc-race__titles { gap: 6px; }
  .rc-race__kicker { font-size: 12px; line-height: 16px; }
  .rc-race__title { font-size: 36px; line-height: 43px; color: var(--ink); }
  .rc-race__meta { font-size: 13px; line-height: 17px; color: var(--ink-2); }
  .rc-race__num { padding: 12px; font-size: 32px; line-height: 38px; }
  .rc-race__rule--markets { display: block; }
  .rc-race__tabs-label { display: block; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; white-space: nowrap; }
  .rc-race__tabs { flex-wrap: wrap; overflow: visible; gap: 8px; padding: 0; }
  .rc-race__tab { height: 33px; padding: 0 16px; background: var(--cream); border: 0; color: var(--ink); font-size: 13px; line-height: 17px; }
  .rc-race__tab:hover { background: var(--grey); }
  .rc-race__tab.is-active, .rc-race__tab.is-active:hover { padding: 0 15px; border: 1px solid var(--yellow); background: var(--blue); }
  .rc-race__markets { width: 260px; padding: 0; }
  .rc-race__market { padding: 0 16px; color: var(--ink-2); }
  .rc-runners { position: relative; background: var(--white); border-radius: 6px; overflow: hidden; }
  .rc-runners::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line-light); border-radius: inherit; pointer-events: none; } /* Figma inside stroke drawn over rows, no layout impact */
  .rc-runners__head, .rc-runner { display: grid; grid-template-columns: 30px minmax(0, 1fr) 200px 80px 60px 60px 120px 120px; column-gap: 12px; align-items: center; }
  .rc-runners__head { padding: 12px 12px 11px; background: var(--cream); border-bottom: 1px solid var(--line-light); }
  .rc-runners__col { font-size: 11px; line-height: 14px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
  .rc-runners__col--barrier, .rc-runners__col--win, .rc-runners__col--place { text-align: center; }
  .rc-runners__note { padding: 12px; }
  .rc-runner { row-gap: 0; padding: 12px; border-bottom: 0; }
  .rc-runner:not(:last-child) { padding-bottom: 11px; border-bottom: 1px solid var(--line-light); }
  .rc-runner__num { width: auto; height: auto; justify-content: flex-start; border-radius: 0; background: none; color: var(--ink); font-size: 14px; line-height: 18px; font-weight: 700; }
  .rc-runner.is-selected .rc-runner__num { background: none; color: var(--blue); font-weight: 800; }
  .rc-runner__info { display: contents; }
  .rc-runner__name { color: var(--ink); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rc-runner.is-selected .rc-runner__name { font-weight: 800; }
  .rc-runner__person { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 17px; color: var(--ink); }
  .rc-runner.is-selected .rc-runner__jockey { font-weight: 600; }
  .rc-runner__trainer { margin-left: 0; font-size: 11px; line-height: 14px; }
  .rc-runner__detail { display: none; }
  .rc-runner__form, .rc-runner__barrier, .rc-runner__weight { display: block; font-size: 13px; line-height: 17px; color: var(--ink-2); }
  .rc-runner__barrier { text-align: center; }
  .rc-runner__odds { grid-column: 7 / 9; display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .rc-odds.odds { justify-content: center; padding: 9px; }
  .rc-odds .odds__label { display: none; }
  .rc-srm { padding: 24px; border: 1px solid var(--line-light); border-radius: 6px; }
  .rc-slip { display: block; flex: 0 0 340px; position: sticky; top: 16px; }
}

/* Coming up ------------------------------------------------------------------ */
.rc-coming { background: var(--navy); padding: 20px 0; }
.rc-coming__inner { width: calc(100% - 40px); margin-inline: auto; }
.rc-coming__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rc-coming__heading { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rc-coming__title { font-family: var(--font-display); font-weight: 900; font-size: 24px; line-height: 29px; color: var(--white); white-space: nowrap; }
.rc-coming__sep { width: 1px; height: 16px; background: var(--blue); }
.rc-coming__kicker { font-size: 11px; line-height: 14px; font-weight: 800; color: var(--yellow); white-space: nowrap; }
.rc-coming__link { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--yellow); white-space: nowrap; }
.rc-coming__link:hover { text-decoration: underline; }
.rc-coming__list { display: flex; flex-direction: column; gap: 1px; margin-top: 16px; background: var(--line); border-radius: 4px; overflow: hidden; }
.rc-coming__row { display: flex; align-items: center; gap: 12px; min-height: 57px; padding: 12px; background: var(--navy-2); color: var(--white); transition: background-color var(--t); }
.rc-coming__row:hover { background: var(--navy-3); }
.rc-coming__time { flex: 0 0 45px; font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 24px; color: var(--white); }
.rc-coming__wrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rc-coming__name { font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 19px; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-coming__type { font-size: 10px; line-height: 13px; color: var(--ink-4); }
.rc-coming__starts { font-size: 11px; line-height: 14px; font-weight: 700; color: var(--yellow); white-space: nowrap; }
.rc-coming__view { font-size: 11px; line-height: 14px; font-weight: 700; color: var(--yellow); white-space: nowrap; }
@media (min-width: 1024px) {
  .rc-coming { background: var(--navy-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 39px 0; }
  .rc-coming__inner { width: min(var(--content), 100% - 2 * var(--gutter)); }
  .rc-coming__header { padding-bottom: 16px; }
  .rc-coming__heading { gap: 16px; }
  .rc-coming__title { font-size: 32px; line-height: 38px; }
  .rc-coming__sep { height: 20px; }
  .rc-coming__kicker { font-size: 12px; line-height: 16px; }
  .rc-coming__link { font-size: 13px; line-height: 17px; font-weight: 600; }
  .rc-coming__list { position: relative; gap: 0; margin-top: 0; background: var(--navy); }
  .rc-coming__list::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: inherit; pointer-events: none; }
  .rc-coming__row { display: grid; grid-template-columns: 80px 200px 150px minmax(0, 1fr) 120px; column-gap: 20px; min-height: 0; padding: 16px; background: var(--navy); }
  .rc-coming__row:not(:last-child) { padding-bottom: 15px; border-bottom: 1px solid var(--line); }
  .rc-coming__time { flex: none; }
  .rc-coming__wrap { display: contents; }
  .rc-coming__name { font-size: 20px; line-height: 24px; }
  .rc-coming__type { font-size: 12px; line-height: 16px; font-weight: 600; }
  .rc-coming__starts { font-size: 13px; line-height: 17px; font-weight: 600; }
  .rc-coming__view { font-size: 13px; line-height: 17px; text-align: right; }
}

/* Narrow desktop (1024–1439px): the 1440 layout only fits at full width. Next-to-jump tiles scroll sideways
   and the runners table drops the jockey and form columns so name, barrier, weight and both prices stay readable. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .rc-board__inner { gap: 32px; }
  .rc-hero { flex-basis: 280px; }
  .rc-ntj__track { overflow-x: auto; }
  .rc-tile { flex: 0 0 168px; }
  .rc-main__inner { gap: 20px; }
  .rc-slip { flex-basis: 300px; }
  .rc-runners__head, .rc-runner { grid-template-columns: 24px minmax(0, 1fr) 56px 60px 84px 84px; column-gap: 10px; }
  .rc-runners__col--person, .rc-runners__col--form, .rc-runner__person, .rc-runner__form { display: none; }
  .rc-runner__odds { grid-column: 5 / 7; column-gap: 10px; }
}