/* ===== Racing page ===== */

/* ---------- Hero ---------- */
.rc-hero { position: relative; overflow: hidden; padding: 80px 0; border-bottom: 1px solid var(--c-line); }
.rc-hero__ghost { left: 60px; top: -10px; font-size: 200px; line-height: var(--lh-osw); }
.rc-hero__inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 64px; }
.rc-hero__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.rc-hero__title { display: flex; flex-direction: column; gap: 2px; }
.rc-hero .display__line { font-size: 64px; line-height: 60px; }
.rc-hero .rc-hero__title-accent { font-size: 72px; line-height: 68px; }
.rc-hero__text { font: 400 15px/24px var(--f-plex); color: var(--c-gray); }
.rc-hero__actions { display: flex; align-items: center; gap: 20px; }
.rc-hero__codes { font: 600 12px/var(--lh-osw) var(--f-osw); letter-spacing: 1px; color: var(--c-gray); }
.rc-hero__media { width: 560px; height: 360px; flex: none; --shade: .15; }
.rc-hero__picture { display: block; width: 100%; height: 100%; }
.rc-hero__media .photo__label { padding: 6px 12px; }
.rc-hero__media .photo__bar { width: 260px; }

/* ---------- Next to jump timeline ---------- */
.rc-timeline { background: var(--c-paper); color: var(--c-ink); padding: 60px 0; }
.rc-timeline__inner { display: flex; flex-direction: column; gap: 32px; }
.rc-timeline__head { display: flex; align-items: center; gap: 16px; }
.rc-timeline__title { font: 700 28px/var(--lh-osw) var(--f-osw); letter-spacing: 1px; color: var(--c-ink); }
.rc-timeline__rule { width: 2px; height: 20px; flex: none; background: var(--c-gray); }
/* 2px frame drawn as an inset outline so the five 264px cards keep their exact width */
.rc-timeline__strip { display: flex; background: var(--c-paper); outline: 2px solid var(--c-ink); outline-offset: -2px; }

.rc-meeting {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  padding: 19px; border: 1px solid var(--c-ink); background: var(--c-paper); text-align: left;
  transition: background-color var(--t-med) var(--ease);
}
.rc-meeting:hover { background: #fff; }
.rc-meeting__top { display: flex; justify-content: space-between; align-items: center; }
.rc-meeting__race { background: var(--c-ink); padding: 2px 8px; font: 700 12px/var(--lh-osw) var(--f-osw); color: var(--c-paper); transition: background-color var(--t-med) var(--ease), color var(--t-med); }
.rc-meeting__time { font: 700 14px/var(--lh-osw) var(--f-osw); color: var(--c-ink); transition: color var(--t-med); }
.rc-meeting__venue { font: 700 22px/var(--lh-osw) var(--f-osw); color: var(--c-ink); transition: color var(--t-fast); }
.rc-meeting__type { font: 600 12px/var(--lh-plex) var(--f-plex); color: var(--c-gray); transition: color var(--t-med); }
.rc-meeting:hover .rc-meeting__venue { color: var(--c-orange); }
.rc-meeting--highlight .rc-meeting__time { color: var(--c-orange); }
.rc-meeting--active, .rc-meeting--active:hover { background: var(--c-orange); }
.rc-meeting--active .rc-meeting__race { background: var(--c-bg); }
.rc-meeting--active .rc-meeting__time,
.rc-meeting--active .rc-meeting__venue,
.rc-meeting--active .rc-meeting__type,
.rc-meeting--active:hover .rc-meeting__venue { color: var(--c-bg); }

/* ---------- Race masthead ---------- */
.rc-masthead { background: var(--c-paper); color: var(--c-ink); padding: 20px 0; }
.rc-masthead__card { background: var(--c-bg); border: 2px solid var(--c-line); padding: 30px; display: flex; flex-direction: column; gap: 24px; color: var(--c-paper); }
.rc-masthead__meta { display: flex; align-items: center; gap: 16px; }
.rc-masthead__venue { font: 700 16px/var(--lh-osw) var(--f-osw); color: var(--c-orange); }
.rc-masthead__sep { width: 1px; height: 14px; flex: none; background: var(--c-gray); }
.rc-masthead__info { font: 400 14px/var(--lh-plex) var(--f-plex); color: var(--c-gray); }
.rc-masthead__row { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.rc-masthead__title { font: 700 80px/74px var(--f-osw); color: var(--c-paper); }
.rc-masthead__title.is-swap { animation: rc-title-in .45s var(--ease-out); }
@keyframes rc-title-in { from { opacity: 0; transform: translateY(8px); } }
.rc-masthead__controls { display: flex; gap: 4px; padding: 4px; background: var(--c-line); flex: none; }
.rc-masthead__tab { padding: 10px 20px; font: 700 14px/var(--lh-osw) var(--f-osw); color: var(--c-gray); white-space: nowrap; transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.rc-masthead__tab:hover { color: var(--c-paper); }
.rc-masthead__tab:active { transform: scale(.97); }
.rc-masthead__tab--active, .rc-masthead__tab--active:hover { background: var(--c-orange); color: var(--c-paper); }

/* ---------- Workspace: runner board + bet slip ---------- */
.rc-workspace { background: var(--c-paper); color: var(--c-ink); padding: 20px 0 80px; }
.rc-workspace__inner { display: flex; align-items: flex-start; gap: 32px; }
/* 1px frame as an inset outline: header and rows keep the dump's 888x47 / 888x106 boxes */
.rc-board { flex: 1; min-width: 0; position: relative; overflow: hidden; background: var(--c-paper); outline: 1px solid var(--c-ink); outline-offset: -1px; }
.rc-board__head { display: flex; align-items: center; gap: 16px; background: var(--c-ink); padding: 14px 24px; }
.rc-board__col { font: 700 13px/var(--lh-osw) var(--f-osw); letter-spacing: 1px; color: var(--c-paper); flex: none; }
.rc-board__col--num { width: 48px; }
.rc-board__col--runner { flex: 1; min-width: 0; }
.rc-board__col--barrier { width: 100px; }
.rc-board__col--crew { width: 180px; }
.rc-board__col--form { width: 80px; }
.rc-board__col--odds { width: 240px; display: flex; gap: 8px; }
.rc-board__col--odds > span { width: 116px; text-align: center; }
.rc-board__note { display: block; padding: 12px 24px; background: #fff; border-bottom: 1px solid var(--c-ink); font: 700 12px/var(--lh-osw) var(--f-osw); letter-spacing: 1px; color: var(--c-orange); animation: rc-row-in .4s var(--ease-out) both; }
.rc-board__note[hidden] { display: none; }
.rc-board__body { position: relative; transition: opacity var(--t-med) var(--ease); }
.rc-board__body.is-loading { opacity: .4; pointer-events: none; }

.rc-runner {
  display: flex; align-items: center; gap: 16px; padding: 20px 24px 19px; border-bottom: 1px solid var(--c-ink); background: var(--c-paper);
  animation: rc-row-in .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms);
  transition: background-color var(--t-fast);
}
.rc-runner:last-child { padding-bottom: 20px; border-bottom: 0; }
.rc-runner:hover { background: #fff; }
@keyframes rc-row-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rc-runner__num { width: 48px; flex: none; font: 700 32px/var(--lh-osw) var(--f-osw); color: var(--c-gray); transition: color var(--t-med) var(--ease); }
.rc-runner.is-selected .rc-runner__num { color: var(--c-orange); }
.rc-runner__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rc-runner__name { font: 700 20px/var(--lh-osw) var(--f-osw); color: var(--c-ink); white-space: nowrap; }
.rc-runner__silk { font: 400 12px/var(--lh-plex) var(--f-plex); color: var(--c-gray); }
.rc-runner__barrier { width: 100px; flex: none; font: 600 14px/var(--lh-plex) var(--f-plex); color: var(--c-ink); }
.rc-runner__crew { width: 180px; flex: none; display: flex; flex-direction: column; gap: 2px; }
.rc-runner__jockey { font: 600 13px/var(--lh-plex) var(--f-plex); color: var(--c-ink); }
.rc-runner__trainer { font: 400 11px/var(--lh-plex) var(--f-plex); color: var(--c-gray); }
.rc-runner__form { width: 80px; flex: none; font: 700 14px/var(--lh-plex) var(--f-plex); color: var(--c-ink); }
.rc-runner__form-prefix { display: none; }
.rc-runner__odds { width: 240px; flex: none; display: flex; gap: 8px; }
.rc-runner .odd-btn { width: 116px; height: 53px; gap: 2px; }
.rc-runner .odd-btn__label { font-size: 9px; color: var(--c-gray); }
.rc-runner .odd-btn__value { font-size: 18px; color: var(--c-ink); }
.rc-runner .odd-btn--active .odd-btn__label,
.rc-runner .odd-btn--active .odd-btn__value { color: var(--c-paper); }

/* ---------- Tablet fallback ---------- */
@media (max-width: 1099px) {
  .rc-hero__inner { gap: 40px; }
  .rc-hero .display__line { font-size: 44px; line-height: 40px; }
  .rc-hero .rc-hero__title-accent { font-size: 50px; line-height: 46px; }
  .rc-hero__media { width: 42%; height: auto; aspect-ratio: 14 / 9; }
  .rc-timeline { padding: 48px 0; }
  .rc-timeline__strip { overflow-x: auto; }
  .rc-meeting { flex: 1 0 190px; }
  .rc-masthead__title { font-size: 64px; line-height: 60px; }
  .rc-workspace { padding-bottom: 60px; }
  .rc-workspace__inner { flex-direction: column; align-items: stretch; }
  .rc-board { width: 100%; overflow-x: auto; }
  .rc-board__head, .rc-board__note, .rc-runner { min-width: 800px; }
  .rc-workspace__slip { width: 100%; position: static; }
}

/* ---------- Mobile (390) ---------- */
@media (max-width: 767px) {
  /* Hero */
  .rc-hero { padding: 32px 0 24px; border-bottom: 0; }
  .rc-hero__ghost { display: none; }
  .rc-hero__inner { flex-direction: column; align-items: stretch; gap: 16px; }
  .rc-hero__body { gap: 16px; }
  .rc-hero__title { gap: 0; }
  .rc-hero .display__line { font-size: 44px; line-height: 40px; }
  .rc-hero .rc-hero__title-accent { font-size: 50px; line-height: 46px; }
  .rc-hero__text { font-size: 14px; line-height: 20px; }
  .rc-hero__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .rc-hero__cta { width: 100%; height: auto; padding: 12px 20px; background: transparent; color: var(--c-paper); box-shadow: inset 0 0 0 2px var(--c-line); }
  .rc-hero__cta:hover { background: transparent; box-shadow: inset 0 0 0 2px var(--c-paper); }
  .rc-hero__codes { font-size: 11px; }
  .rc-hero__media { width: 100%; height: 200px; aspect-ratio: auto; border-width: 2px; }
  .rc-hero__media .photo__label { top: auto; bottom: 12px; left: 12px; padding: 4px 8px; font-size: 11px; }
  .rc-hero__media .photo__bar { display: none; }

  /* Timeline: horizontal scroll row bleeding to the right edge */
  .rc-timeline { padding: 24px 0; }
  .rc-timeline__inner { gap: 16px; padding-right: 0; }
  .rc-timeline__title { font-size: 24px; letter-spacing: .5px; }
  .rc-timeline__rule { display: none; }
  .rc-timeline__strip { outline: 0; overflow-x: auto; padding-right: 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .rc-timeline__strip::-webkit-scrollbar { display: none; }
  .rc-meeting { flex: none; width: 128px; height: 105px; padding: 11px; gap: 4px; scroll-snap-align: start; }
  .rc-meeting__top { display: contents; }
  .rc-meeting__race { background: transparent; padding: 0; font-size: 11px; color: var(--c-ink); }
  .rc-meeting__time { order: 3; font-size: 12px; }
  .rc-meeting__venue { font-size: 15px; }
  .rc-meeting__type { font-size: 10px; }
  .rc-meeting--highlight .rc-meeting__race { color: var(--c-orange); }
  .rc-meeting--highlight .rc-meeting__time { color: var(--c-ink); }
  .rc-meeting--active .rc-meeting__race { background: transparent; color: var(--c-bg); }
  .rc-meeting--active .rc-meeting__time { color: var(--c-bg); }

  /* Masthead */
  .rc-masthead { border-top: 1px solid var(--c-ink); border-bottom: 1px solid var(--c-ink); }
  .rc-masthead__meta { flex-direction: column; align-items: flex-start; gap: 4px; }
  .rc-masthead__sep { display: none; }
  .rc-masthead__info { font-size: 12px; color: var(--c-gray-2); }
  .rc-masthead__row { flex-direction: column; align-items: stretch; gap: 24px; }
  .rc-masthead__title { background: var(--c-surface); padding: 12px 16px; font-size: 48px; line-height: var(--lh-osw); }
  .rc-masthead__controls { background: var(--c-surface); }
  .rc-masthead__tab { flex: 1; height: 34px; padding: 8px; font-size: 12px; display: flex; align-items: center; justify-content: center; }

  /* Workspace: full-bleed runners list + full-bleed slip */
  .rc-workspace { padding: 0; }
  .rc-workspace__inner { flex-direction: column; align-items: stretch; gap: 0; }
  .rc-board { flex: none; width: auto; margin: 0 -20px; outline: 0; overflow: visible; }
  .rc-board__head { display: none; }
  .rc-board__note { min-width: 0; padding: 12px 16px; }
  .rc-runner { min-width: 0; flex-wrap: wrap; row-gap: 12px; column-gap: 0; padding: 16px 16px 15px; border-bottom: 1px solid var(--c-ink); }
  .rc-runner:last-child { padding-bottom: 15px; border-bottom: 1px solid var(--c-ink); }
  .rc-runner:hover { background: var(--c-paper); }
  .rc-runner__num { width: 36px; font-size: 28px; color: var(--c-gray-2); }
  .rc-runner__main, .rc-runner__crew { display: contents; }
  .rc-runner__name { width: calc(100% - 48px); margin-left: 12px; font-size: 18px; }
  .rc-runner__silk { width: calc(50% - 4px); align-self: flex-start; color: var(--c-gray-2); }
  .rc-runner__barrier { width: calc(50% - 4px); margin-left: 8px; align-self: flex-start; font-size: 12px; }
  .rc-runner__jockey, .rc-runner__trainer { width: calc(100% / 3); align-self: flex-start; font-size: 12px; }
  .rc-runner__form { width: auto; flex: 1 1 0; min-width: 0; align-self: flex-start; font-size: 12px; }
  .rc-runner__trainer { color: var(--c-gray-2); }
  .rc-runner__form-prefix { display: inline; }
  .rc-runner__odds { width: 100%; }
  .rc-runner .odd-btn { flex: 1; width: auto; height: 53px; border-color: var(--c-ink); }
  .rc-runner .odd-btn--active { border-color: var(--c-orange); }
  .rc-runner .odd-btn--active .odd-btn__label,
  .rc-runner .odd-btn--active .odd-btn__value { color: #fff; }
  .rc-workspace__slip { align-self: stretch; width: auto; margin: 0 -20px; }
}