/* Racing page — numbers from gen.js on racing (9:262) and racing-mobile (41:241). */

/* ── hero ─────────────────────────────────────────────────────────────── */
.rhero { display: flex; gap: 24px; padding: 24px 64px 40px; background: var(--color-dark); color: var(--color-ink); }
.rhero__labels { display: none; }
.rhero__panel {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
  width: 755px; min-height: 440px; padding: 48px; border-radius: 16px; background: var(--color-cream); overflow: hidden;
}
.rhero__wm { position: absolute; right: 0; bottom: 0; font-family: var(--font-display); font-size: 220px; line-height: 220px; opacity: .03; }
.rhero__text-wrap { display: flex; flex-direction: column; gap: 16px; }
.rhero__title { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-family: var(--font-display); text-transform: uppercase; }
.rhero__l { font-size: 72px; line-height: 61px; }
.rhero__pill { font-size: 48px; line-height: 48px; padding: 4px 16px; border-radius: 6px; background: var(--color-dark-2); color: var(--color-brand); }
.rhero__text { max-width: 480px; font-size: 16px; line-height: 24px; opacity: .8; }
.rhero__cta { padding: 14px 28px; background: var(--color-dark-2); border-color: var(--color-dark-2); }
.rhero__media { position: relative; width: 533px; height: 440px; flex: none; border-radius: 16px; overflow: hidden; }
.rhero__img { width: 533px; height: 440px; object-fit: cover; }
.rhero__badge {
  position: absolute; left: 16px; top: 16px; padding: 6px 12px; border-radius: 4px; background: var(--color-brand);
  font-size: 11px; line-height: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}

/* ── meetings board ───────────────────────────────────────────────────── */
.meetings { display: flex; flex-direction: column; gap: 24px; padding: 40px 64px; background: var(--color-dark-2); color: var(--color-brand); }
.meetings__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.meetings__heading { display: flex; flex-direction: column; gap: 4px; }
.meetings__eyebrow { letter-spacing: .1em; color: var(--color-gold); }
.meetings__title { font-family: var(--font-display); font-size: 36px; line-height: 54px; text-transform: uppercase; }
.meetings__tz { font-size: 13px; line-height: 17px; color: var(--color-gold); }
.tickets__track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.ticket {
  display: flex; flex-direction: column; gap: 12px; padding: 20px; text-align: left; cursor: pointer;
  border: 0; box-shadow: inset 0 0 0 1px var(--color-dark-3); border-radius: 10px; background: var(--color-dark); color: var(--color-bg);
  font-family: var(--font-body);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.ticket:hover { box-shadow: inset 0 0 0 1px var(--color-gold); transform: translateY(-2px); }
.ticket:focus-visible { outline: 0; box-shadow: var(--focus-ring-on-dark); }
.ticket__top { display: flex; align-items: center; justify-content: space-between; }
.ticket__num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; background: var(--color-dark-2); color: var(--color-gold); font-family: var(--font-display); font-size: 16px; line-height: 24px; }
.ticket__time { font-size: 14px; line-height: 18px; font-weight: 800; }
.ticket__meta { display: flex; flex-direction: column; gap: 2px; }
.ticket__track { font-family: var(--font-display); font-size: 22px; line-height: 33px; text-transform: uppercase; }
.ticket__code { font-size: 12px; line-height: 16px; color: var(--color-gold); }
.ticket[aria-selected="true"] { background: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-brand); color: var(--color-ink); }
.ticket[aria-selected="true"] .ticket__num { color: var(--color-brand); }
.ticket[aria-selected="true"] .ticket__code { color: var(--color-ink); opacity: .65; }   /* .6 = 4.41:1, .65 passes AA */

/* ── race workspace ───────────────────────────────────────────────────── */
.workspace { display: flex; gap: 24px; align-items: flex-start; padding: 40px 64px 64px; background: var(--color-dark); color: var(--color-ink); }
.workspace__races { flex: 1; min-width: 0; }
.racepanel { display: flex; flex-direction: column; gap: 16px; }
.racehead { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 12px; background: var(--color-cream); }
.racehead__top { display: flex; align-items: center; gap: 12px; }
.racehead__eyebrow { font-size: 11px; line-height: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.racehead__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-ink); }
.racehead__meta { font-size: 13px; line-height: 17px; opacity: .7; }
.racehead__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.racehead__title { display: flex; align-items: center; gap: 16px; font-family: var(--font-display); font-size: 48px; line-height: 72px; text-transform: uppercase; }
.racehead__num { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 8px; background: var(--color-dark-2); color: var(--color-brand); font-size: 32px; line-height: 48px; }
.racehead__ctl { display: flex; gap: 8px; }
.pill--ctl { padding: 10px 16px; border-radius: 6px; border-color: var(--color-dark-2); background: transparent; color: var(--color-dark-2); }
.pill--ctl[aria-selected="true"] { background: var(--color-dark-2); color: var(--color-brand); }
.pill--ctl:hover { background: var(--color-brand-hover); color: var(--color-ink); }

.runners { display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border-light); }
.runners__head, .runner {
  display: grid; grid-template-columns: 40px 250px 100px 160px 80px 220px; column-gap: 16px; align-items: center;
  padding: 16px 24px; box-shadow: inset 0 -1px 0 var(--color-border-light);
}
.runners__head { min-height: 38px; padding: 12px 24px; background: var(--color-cream); }
.runners__h { font-size: 11px; line-height: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.runners__h--odds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: center; }
.runners__list { display: flex; flex-direction: column; }
.runner { min-height: 76px; }
.runner:last-child { box-shadow: none; }
.runner__num { display: grid; place-items: center; width: 40px; height: 34px; border-radius: 4px; border: 1px solid var(--color-dark-3); font-family: var(--font-display); font-size: 14px; line-height: 21px; }
.runner__num--first { background: var(--color-dark-2); color: var(--color-brand); border-color: var(--color-dark-3); }
.runner__name { font-size: 16px; line-height: 21px; font-weight: 700; }
.runner__barrier { font-size: 13px; line-height: 17px; opacity: .6; }
.runner__jockey { font-size: 14px; line-height: 18px; opacity: .8; }
.runner__form { font-size: 14px; line-height: 18px; font-weight: 700; }
.runner__details { display: none; }
.runner__odds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.runner__odds .odds { gap: 1px; height: 44px; padding: 0; }
.runner__odds .odds__label { font-size: 9px; line-height: 12px; opacity: .65; text-transform: uppercase; }   /* mockup .4 = 2.5:1 on cream; .65 passes AA */
.runner__odds .odds__price { font-size: 16px; line-height: 21px; }
.odds--place { border-color: var(--color-border-light); }
.odds--win { border-color: var(--color-dark-2); }
.odds[aria-pressed="true"] .odds__label { opacity: .8; }
.runners__hint { padding: 16px 24px; font-size: 13px; line-height: 20px; color: var(--color-muted-ink); box-shadow: inset 0 -1px 0 var(--color-border-light); }
.runners__head--srm, .runner--srm { grid-template-columns: 40px minmax(0, 1fr) 440px; }
.runners__h--srm, .runner__odds--srm { grid-template-columns: repeat(4, 1fr); }
.runner--srm .runner__details { display: none; }

/* racing slip: the frame draws a denser variant (310px, dark-2, gold labels) */
.slip--racing { width: 310px; padding: 24px; gap: 20px; border-radius: 12px; border: 0; border-top: 2px solid var(--color-brand); background: var(--color-dark-2); color: var(--color-bg); }
.slip--racing .slip__head { min-height: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--color-dark-3); }   /* the racing slip rules off its header too */
.slip--racing .slip__title { font-family: var(--font-body); font-size: 16px; line-height: 21px; font-weight: 800; text-transform: none; color: var(--color-bg); }
.slip--racing .slip__count { padding: 4px 8px; border-radius: 4px; background: var(--color-dark); font-size: 11px; line-height: 14px; }
.slip--racing .slip__rule { background: var(--color-dark-3); }
.slip--racing .slip__sels { min-height: 74px; gap: 12px; }
.slip--racing .slip__sel { gap: 4px; }
.slip--racing .slip__event { color: var(--color-bg); }
.slip--racing .slip__market { font-size: 13px; line-height: 17px; color: var(--color-gold); }
.slip--racing .slip__price { font-size: 18px; line-height: 23px; }
.slip--racing .slip__empty, .slip--racing .slip__row, .slip--racing .slip__label { color: var(--color-gold); }
.slip--racing .slip__stake { gap: 10px; }
.slip--racing .slip__input { border-radius: 6px; background: var(--color-dark); box-shadow: inset 0 0 0 1px var(--color-dark-3); color: var(--color-gold); }
.slip--racing .slip__plus { border-radius: 4px; background: var(--color-dark); box-shadow: inset 0 0 0 1px var(--color-dark-3); color: var(--color-bg); }
.slip--racing .slip__totals { gap: 16px; margin-bottom: -4px; }   /* footer gap is 16 in this frame, not 20 */
.slip--racing .slip__row--return { font-weight: 700; }
.slip--racing .slip__row b { color: var(--color-bg); }
.slip--racing .slip__row--return b { color: var(--color-brand); }
.slip--racing .slip__place { min-height: 48px; padding-block: 0; border-radius: 6px; border-color: transparent; font-size: 15px; line-height: 20px; letter-spacing: 0; }

/* ── mobile (390 frame, M2: table → cards) ────────────────────────────── */
@media (max-width: 1199px) {
  .rhero { flex-direction: column; gap: 24px; padding: 24px 16px 32px; background: var(--color-brand); }
  .rhero__labels { display: flex; align-items: center; gap: 8px; }
  .rhero__eyebrow { font-size: 10px; line-height: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-dark-2); }
  .rhero__eyebrow--soft { opacity: .8; }
  .rhero__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-dark-2); }
  .rhero__panel { width: auto; min-height: 0; padding: 0; border-radius: 0; background: none; overflow: visible; }
  .rhero__wm { display: none; }
  .rhero__text-wrap { gap: 24px; }
  .rhero__title { gap: 6px; }
  .rhero__l { font-size: 52px; line-height: 49px; }
  .rhero__l + .rhero__l { font-size: 48px; line-height: 46px; }
  .rhero__pill { font-size: 44px; line-height: 44px; padding: 6px 12px; border-radius: 4px; background: var(--color-dark); }
  .rhero__text { max-width: none; font-size: 14px; line-height: 21px; opacity: 1; }
  .rhero__cta { width: 100%; min-height: 48px; padding: 14px 20px; background: var(--color-dark); border-color: var(--color-dark); }
  .rhero__media { width: 100%; height: 220px; border-radius: 12px; }
  .rhero__img { width: 100%; height: 220px; }
  .rhero__badge { display: none; }

  .meetings { padding: 32px 16px; }
  .meetings__head { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 0; }
  .meetings__heading { gap: 8px; }
  .meetings__eyebrow { letter-spacing: .12em; color: var(--color-white); }
  .meetings__title { font-size: 38px; line-height: 38px; }
  .meetings__tz { font-size: 11px; line-height: 14px; color: var(--color-white); opacity: .8; }
  .tickets { margin-right: -16px; padding-right: 16px; overflow-x: auto; scrollbar-width: none; }
  .tickets::-webkit-scrollbar { display: none; }
  .tickets__track { display: flex; gap: 8px; width: max-content; }
  .ticket { flex: 0 0 155px; gap: 10px; padding: 14px; }
  .ticket__num { width: 28px; height: 28px; font-size: 14px; line-height: 21px; }
  .ticket__time { font-size: 12px; line-height: 16px; }
  .ticket__track { font-size: 18px; line-height: 27px; }
  .ticket__code { font-size: 11px; line-height: 14px; }
  .ticket[aria-selected="true"] .ticket__code { opacity: .7; }

  .workspace { flex-direction: column; align-items: center; gap: 12px; padding: 0 16px 32px; }
  .workspace__races { width: 100%; }
  .racepanel { gap: 12px; }
  .racehead { padding: 16px; box-shadow: inset 0 0 0 1px var(--color-gold); }
  .racehead__top { justify-content: space-between; gap: 8px; }
  .racehead__eyebrow { letter-spacing: 0; color: var(--color-dark-2); }
  .racehead__dot { display: none; }
  .racehead__meta { font-size: 11px; line-height: 14px; color: var(--color-dark-2); }
  .racehead__row { flex-direction: column; align-items: stretch; gap: 16px; min-height: 0; }
  .racehead__title { gap: 12px; font-size: 32px; line-height: 48px; }
  .racehead__num { width: 40px; height: 40px; border-radius: 6px; background: var(--color-dark); font-size: 20px; line-height: 30px; }
  .racehead__ctl { display: grid; grid-template-columns: 1fr 1fr; }
  .pill--ctl { min-height: 44px; border-color: var(--color-dark); color: var(--color-dark); }
  .pill--ctl[aria-selected="true"] { background: var(--color-dark); }

  .runners { gap: 12px; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .runners__head { display: none; }
  .runners__list { gap: 12px; }
  .runner {
    grid-template-columns: 28px 1fr auto; grid-template-areas: "num name form" "details details details" "odds odds odds";
    column-gap: 10px; row-gap: 12px; min-height: 148px; padding: 16px; border-radius: 12px; border: 0;
    background: var(--color-cream); box-shadow: inset 0 0 0 1px var(--color-gold);
  }
  .runner__num { grid-area: num; width: 28px; height: 28px; border-color: var(--color-gold); background: var(--color-brand); color: var(--color-ink); }
  .runner__name { grid-area: name; font-weight: 800; }
  .runner__form { grid-area: form; }
  .runner__barrier, .runner__jockey { display: none; }
  .runner__details { grid-area: details; display: block; font-size: 12px; line-height: 16px; color: var(--color-dark-2); opacity: .8; }
  .runner__odds { grid-area: odds; }
  .runner__odds .odds { height: 48px; gap: 2px; }
  .runner__odds .odds__price { font-size: 15px; line-height: 20px; }
  .odds--place { border-color: var(--color-ink); }
  .runner__odds .odds__label { opacity: .6; }
  .runners__hint { padding: 0 0 4px; box-shadow: none; color: var(--color-muted); }
  .runners__head--srm { display: none; }
  .runner--srm { grid-template-columns: 28px 1fr; grid-template-areas: "num name" "details details" "odds odds"; }
  .runner--srm .runner__details { display: block; }
  .runner__odds--srm { grid-template-columns: repeat(2, 1fr); }
  .slip--racing { width: 310px; margin-top: 12px; }
}

@media (max-width: 389px) {
  .rhero__l { font-size: 44px; line-height: 42px; }
  .rhero__pill { font-size: 36px; line-height: 36px; }
  .slip--racing { width: 100%; }
}

/* desktop widths narrower than the frame: the runner table gives up its fixed columns */
@media (min-width: 1200px) and (max-width: 1439px) {
  .runners__head, .runner { grid-template-columns: 40px minmax(0, 1fr) 84px 140px 64px 200px; column-gap: 12px; padding-inline: 16px; }
  .runners__head--srm, .runner--srm { grid-template-columns: 40px minmax(0, 1fr) 360px; }
  .slip--racing { width: 290px; }
}