/* Dashboard pages (home, sports, racing): hero, entry cards, event cards,
 * market/racing rows, standard cards, RG info, bet slip (panel + sheet + bar).
 * Numbers: fig-spec on 4:60 … 4:320 (home) and 79:38 … 82:52 (mobile). */

/* ── hero (4:60 / 79:38) ──────────────────────────────────────────────── */
.hero {
  position: relative; display: flex; align-items: center;
  height: 360px; padding: 32px; border-radius: var(--radius-xl); overflow: hidden;
  isolation: isolate;
}
.hero__pic { position: absolute; inset: 0; z-index: -2; }
.hero__pic img { width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-scrim); }
.hero__content { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.hero__title { font-family: var(--font-display); font-weight: 800; font-size: 36px; line-height: 44px; color: var(--color-text-strong); }
.hero__lead { font-size: 15px; line-height: 22px; color: var(--color-muted); }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── entry cards (4:72 / 79:48) ───────────────────────────────────────── */
.entries { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.entry {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 20px;
  height: 220px; padding: 24px; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate;
  text-decoration: none; color: inherit;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.entry:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, .4); }
.entry:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.entry__pic { position: absolute; inset: 0; z-index: -2; }
.entry__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.entry:hover .entry__pic img { transform: scale(1.03); }
.entry::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-scrim-card); }
.entry__text { display: flex; flex-direction: column; gap: 8px; }
.entry__title { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 25.2px; color: var(--color-text-strong); }
.entry__title--gold { color: var(--color-gold); }
.entry__desc { font-size: var(--fs-ui); line-height: 17px; color: var(--color-muted); }

/* ── feed sections ────────────────────────────────────────────────────── */
.feed-section { display: flex; flex-direction: column; gap: 12px; }
.feed-section--16 { gap: 16px; }
.section-title .tag-live { margin-left: 8px; vertical-align: 3px; }

/* event cards (4:88 / 79:64) */
.event-grid { display: grid; gap: 16px; }
.event-grid--2 { grid-template-columns: repeat(2, 1fr); }
.event-grid--3 { grid-template-columns: repeat(3, 1fr); }
.event-card {
  display: flex; flex-direction: column; gap: 16px; padding: 16px;
  background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--color-border);
}
.event-card__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--fs-tiny); line-height: 14.3px; color: var(--color-muted); }
.event-card__comp { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-transform: uppercase; }
.event-card__icon { width: 12px; height: 12px; }
.event-card__when { color: var(--color-brand); white-space: nowrap; }
.event-card__teams { display: flex; flex-direction: column; gap: 4px; padding-bottom: 16px; box-shadow: inset 0 -1px 0 var(--color-border); }
.event-card__team { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 19px; color: var(--color-text); }
.event-card__vs { font-size: var(--fs-small); line-height: 16px; color: var(--color-dim); }
.event-card__market { display: flex; flex-direction: column; gap: 8px; }
.event-card__label { font-weight: 600; font-size: var(--fs-tiny); line-height: 14.3px; color: var(--color-muted); text-transform: uppercase; }
.event-card__odds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* market list (4:132) */
.table { display: flex; flex-direction: column; gap: 1px; background: var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.market-row { display: flex; align-items: center; gap: 16px; height: 60px; padding: 12px 16px; background: var(--color-surface); box-shadow: inset 0 -1px 0 var(--color-border); transition: background-color var(--dur-fast) var(--ease); }
.market-row:hover { background: var(--color-surface-hover); }
.market-row__left { display: flex; align-items: center; gap: 12px; width: 180px; flex: none; }
.market-row__icon { width: 16px; height: 16px; color: var(--color-muted); }
.market-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.market-row__time { font-size: var(--fs-tiny); line-height: 14.3px; color: var(--color-brand); }
.market-row__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-ui); line-height: 16px; color: var(--color-text); }
.market-row__odds { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.market-row__odds--3 { grid-template-columns: repeat(3, 1fr); }

/* racing rows (4:196 / 79:158) */
.race-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 58px; padding: 12px 16px; background: var(--color-surface); box-shadow: inset 0 -1px 0 var(--color-border); transition: background-color var(--dur-fast) var(--ease); }
.race-row:hover { background: var(--color-surface-hover); }
.race-row__left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.race-kind { display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; border-radius: var(--radius-xs); background: var(--color-border); color: var(--color-text); font-size: var(--fs-tiny); line-height: 14.3px; font-weight: 700; }
.race-kind--t { background: var(--color-gold-tint); color: var(--color-gold); }
.race-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.race-row__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-body); line-height: 18px; color: var(--color-text); }
.race-row__no { color: var(--color-muted); }
.race-row__tip { font-size: var(--fs-tiny); line-height: 14.3px; color: var(--color-dim); }
.race-row__right { display: flex; align-items: center; gap: 12px; flex: none; }
.race-row__mins { font-weight: 700; font-size: var(--fs-ui); line-height: 17px; color: var(--color-brand); font-variant-numeric: tabular-nums; }
.race-row__mins.is-soon { color: var(--color-danger); }
.race-row__chev { display: none; }

/* standard cards (4:254 / 79:194) */
.standard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.standard { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--color-border); }
.standard__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-brand-tint); color: var(--color-brand); }
.standard__icon .icon { width: 20px; height: 20px; }
.standard__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lead); line-height: 20.16px; color: var(--color-text); }
.standard__text { font-size: var(--fs-ui); line-height: 20px; color: var(--color-muted); }

/* RG info (4:269 / 79:212) */
.rg-info { display: flex; flex-direction: column; gap: 24px; padding: 32px; }
.rg-info__head { display: flex; flex-direction: column; gap: 8px; }
.rg-info__title { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 25.2px; color: var(--color-text-strong); }
.rg-info__lead { font-size: var(--fs-body); line-height: 21px; color: var(--color-muted); }
.rg-info__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rg-tile { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--radius-md); background: var(--color-surface-2); text-decoration: none; color: inherit; transition: background-color var(--dur-fast) var(--ease); }
.rg-tile:hover { background: var(--color-surface-2-hover); }
.rg-tile__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-body); line-height: 18px; color: var(--color-text); }
.rg-tile__text { font-size: var(--fs-small); line-height: 17px; color: var(--color-muted); }
.rg-info__foot { font-size: var(--fs-small); line-height: 16px; color: var(--color-dim); }
.rg-info__foot a { color: var(--color-dim); text-decoration: underline; text-underline-offset: 2px; }
.rg-info__foot a:hover { color: var(--color-brand); }

/* ── bet slip panel (4:287) ───────────────────────────────────────────── */
.betslip-sheet { display: contents; }
.betslip-sheet__scrim { display: none; }
.betslip {
  display: flex; flex-direction: column; gap: 16px; padding: 20px;
  background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: inset 0 0 0 1px var(--color-border);
}
.betslip__handle { display: none; }
.betslip__head { display: flex; align-items: center; justify-content: space-between; }
.betslip__title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lead); line-height: 20.16px; color: var(--color-text-strong); }
.betslip__count { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 10px; background: var(--color-brand); color: var(--color-on-brand); font-size: var(--fs-tiny); line-height: 14px; font-weight: 700; }
.betslip__tabs { padding: 2px; border-radius: var(--radius-md); box-shadow: none; }
.betslip__tabs .segmented__item { padding: 6px 12px; font-weight: 400; font-size: var(--fs-small); line-height: 16px; }
.betslip__tabs .segmented__item[aria-selected="true"] { font-weight: 700; }
.betslip__body { display: flex; flex-direction: column; gap: 12px; }
.betslip__list { display: flex; flex-direction: column; gap: 12px; }
.betslip__list:empty { display: none; }

.bet-card { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: var(--radius-md); background: var(--color-surface-2); box-shadow: inset 0 0 0 1px var(--color-border); }
.bet-card__head { display: flex; justify-content: space-between; gap: 12px; }
.bet-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bet-card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-ui); line-height: 16.38px; color: var(--color-text); }
.bet-card__market { font-size: var(--fs-tiny); line-height: 14.3px; color: var(--color-muted); }
.bet-card__meta { font-size: var(--fs-tiny); line-height: 14.3px; color: var(--color-dim); }
.bet-card__remove { position: relative; flex: none; width: 14px; height: 14px; padding: 0; border: 0; background: none; color: var(--color-muted); cursor: pointer; transition: color var(--dur-fast) var(--ease); }
.bet-card__remove::after { content: ""; position: absolute; inset: -12px; }
.bet-card__remove:hover { color: var(--color-danger); }
.bet-card__remove .icon { width: 14px; height: 14px; }
.bet-card__stake { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.stake { display: inline-flex; align-items: center; gap: 8px; width: 120px; height: 32px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border); cursor: text; transition: box-shadow var(--dur-fast) var(--ease); }
.stake:focus-within { box-shadow: inset 0 0 0 1px var(--color-brand), var(--focus-ring); }
.stake__cur { font-size: var(--fs-tiny); line-height: 14.3px; color: var(--color-dim); }
.stake__input { width: 100%; min-width: 0; border: 0; padding: 0; background: none; color: var(--color-text); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-ui); line-height: 16.38px; font-variant-numeric: tabular-nums; }
.stake__input:focus { outline: none; }
.bet-card__odds { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.bet-card__odds-label { font-size: var(--fs-tiny); line-height: 14.3px; color: var(--color-muted); }
.bet-card__odds-value { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-body); line-height: 18px; color: var(--color-brand); }

.betslip__empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 0 8px; text-align: center; }
.betslip__empty[hidden] { display: none; }
.betslip__empty-icon { display: inline-flex; margin-bottom: 10px; color: var(--color-dim); }
.betslip__empty-icon .icon { width: 32px; height: 32px; }
.betslip__empty-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-body); line-height: 18px; color: var(--color-text); }
.betslip__empty-text { font-size: var(--fs-small); line-height: 16px; color: var(--color-muted); }
.betslip__empty .btn { margin-top: 10px; }
.betslip__multi { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; text-align: center; }
.betslip__multi-legs { display: flex; flex-direction: column; gap: 6px; text-align: left; margin-top: 8px; }
.betslip__multi-legs:empty { display: none; }
.betslip__leg { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-small); line-height: 16px; color: var(--color-muted); }
.betslip__leg strong { color: var(--color-text); }
.betslip__leg span:last-child { color: var(--color-brand); font-weight: 700; }
.betslip__multi .bet-card__stake { margin-top: 8px; }

.betslip__summary { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.betslip__row { display: flex; justify-content: space-between; font-size: var(--fs-ui); line-height: 17px; color: var(--color-muted); }
.betslip__row strong { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-ui); line-height: 16.38px; color: var(--color-text); font-variant-numeric: tabular-nums; }
.betslip__row .betslip__return { color: var(--color-brand); }
.betslip__msg { padding: 10px 12px; border-radius: var(--radius-md); background: var(--color-brand-tint); box-shadow: inset 0 0 0 1px var(--color-brand); font-size: var(--fs-small); line-height: 16px; color: var(--color-text); }
.betslip__msg.is-error { background: var(--color-danger-tint); box-shadow: inset 0 0 0 1px var(--color-danger); }
.betslip__place { padding: 12px 20px; }
.betslip__rg { display: none; }
.betslip__rg-note { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; box-shadow: inset 0 1px 0 var(--color-border); }
.betslip__rg-q { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-tiny); line-height: 14px; color: var(--color-text); }
.betslip__rg-text { font-size: var(--fs-micro); line-height: 14px; color: var(--color-muted); }
.betslip__rg-text a { color: var(--color-muted); text-decoration: underline; text-underline-offset: 2px; }
.betslip__rg-text a:hover { color: var(--color-brand); }

/* ── page intro + filters (sports 13:76 / racing 14:51) ──────────────── */
.dash--page { padding-top: 48px; }
.dash__feed--32 { gap: 32px; }
.page-intro { display: flex; flex-direction: column; gap: 6px; }
.page-intro__title { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 35px; color: var(--color-text-strong); }
.page-intro__lead { font-size: var(--fs-body); line-height: 18px; color: var(--color-muted); }
.filters { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 8px; flex-wrap: wrap; }
.chip--tab { padding: 6px 16px; background: var(--color-surface); box-shadow: none; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); line-height: 15.12px; color: var(--color-text); }
.chip--tab:hover { background: var(--color-surface-hover); }
.chip--tab[aria-pressed="true"] { background: var(--color-brand-tint); box-shadow: inset 0 0 0 1px var(--color-brand); color: var(--color-brand); font-weight: 700; }
.filters .chips:not(.chips--tabs) .chip { background: var(--color-surface); box-shadow: none; font-weight: 500; color: var(--color-muted); }
.filters .chips:not(.chips--tabs) .chip[aria-pressed="true"] { background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-brand); color: var(--color-brand); font-weight: 700; }
.filters__empty { padding: 24px 16px; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); text-align: center; font-size: var(--fs-ui); line-height: 20px; color: var(--color-muted); }

/* competitions (13:161…) */
.comps { display: flex; flex-direction: column; gap: 24px; }
.comps__list { display: flex; flex-direction: column; gap: 24px; }
.comp { border-radius: var(--radius-lg); }
.comp__head { font: inherit; }
.comp__toggle {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 14px 16px; border: 0;
  border-radius: 12px 12px 0 0; background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border);
  color: var(--color-text-strong); cursor: pointer; text-align: left;
  transition: background-color var(--dur-fast) var(--ease);
}
.comp__toggle:hover { background: var(--color-surface-hover); }
.comp__toggle:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--color-border), var(--focus-ring); }
.comp__toggle[aria-expanded="false"] { border-radius: 12px; }
.comp__name { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-body); line-height: 18px; }
.comp__round { font-size: var(--fs-small); line-height: 16px; color: var(--color-muted); }
.comp__chev { margin-left: auto; width: 16px; height: 16px; color: var(--color-muted); transition: transform var(--dur-base) var(--ease); }
.comp__toggle[aria-expanded="false"] .comp__chev { transform: rotate(180deg); }
.comp__body > div { display: flex; flex-direction: column; }
.comp-row {
  position: relative; display: flex; align-items: center; gap: 16px; height: 68px; padding: 14px 16px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-top: 0;
  transition: background-color var(--dur-fast) var(--ease);
}
.comp-row:hover { background: var(--color-surface-hover); }
.comp-row__when { width: 110px; flex: none; font-size: var(--fs-small); line-height: 16px; color: var(--color-brand); }
.comp-row__teams { display: flex; flex-direction: column; gap: 4px; width: 400px; flex: none; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-body); line-height: 18px; color: var(--color-text); }
.comp-row__odds { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.comp-row__odds--3 { grid-template-columns: repeat(3, 1fr); }
.comp-row__odds .odds { height: 37px; }
.comp-row__odds .odds__label { font-size: var(--fs-small); line-height: 16px; }
.comp-row__more { width: 80px; flex: none; text-align: right; font-weight: 600; font-size: var(--fs-ui); line-height: 17px; color: var(--color-brand); text-decoration: none; white-space: nowrap; }
.comp-row__more:hover { text-decoration: underline; text-underline-offset: 2px; }

/* floating bar: only on mobile */
.betslip-bar { display: none; }

/* ── mobile (≤1199): sheet + bar (82:52, 82:3) ───────────────────────── */
@media (max-width: 1199px) {
  .hero { height: auto; min-height: 273px; padding: 24px; border-radius: var(--radius-lg); }
  .hero__content { gap: 16px; }
  .hero__text { gap: 8px; }
  .hero__text .eyebrow { font-size: var(--fs-micro); line-height: 13px; }
  .hero__title { font-size: 24px; line-height: 30px; }
  .hero__lead { font-size: var(--fs-body); line-height: 20px; }
  .hero__actions .btn { padding: 10px 16px; font-size: var(--fs-ui); line-height: 16px; }

  .entries { grid-template-columns: 1fr; }
  .entry { height: 190px; padding: 20px; gap: 16px; }
  .entry__text { gap: 6px; }
  .entry__title { font-size: 18px; line-height: 23px; }
  .entry__desc { font-size: var(--fs-small); line-height: 16px; }
  .entry .btn--sm { padding: 6px 12px; font-size: var(--fs-tiny); line-height: 14px; border-radius: var(--radius-sm); }

  .section-title--sm { font-size: var(--fs-lead); line-height: 20px; }
  .section-link { font-size: var(--fs-small); line-height: 16px; font-weight: 400; }
  .event-grid--2, .event-grid--3 { grid-template-columns: 1fr; gap: 12px; }
  .event-card { padding: 14px; gap: 12px; }
  .event-card__top { font-size: var(--fs-micro); line-height: 13px; }
  .event-card__teams { gap: 2px; padding-bottom: 12px; }
  .event-card__team { font-size: var(--fs-body); line-height: 18px; }
  .event-card__vs { font-size: var(--fs-tiny); line-height: 14.3px; }
  .event-card__label { font-size: var(--fs-micro); line-height: 13px; }
  .hero, .entry { box-shadow: inset 0 0 0 1px var(--color-border); }
  .hero::before { background: rgba(6, 8, 12, .8); }
  .event-card__market { gap: 6px; }

  .market-row { flex-direction: column; align-items: stretch; gap: 10px; height: auto; padding: 12px; }
  .market-row__left { width: auto; gap: 8px; }
  .market-row__icon { width: 14px; height: 14px; }
  .market-row__text { flex-direction: row; align-items: center; gap: 8px; }
  .market-row__time { font-size: var(--fs-tiny); line-height: 14.3px; }
  .market-row__name { font-size: var(--fs-small); line-height: 15.12px; }
  .race-row__mins { font-size: var(--fs-small); line-height: 16px; }   /* home: 79:166 */
  .race-row--chevron .race-row__mins { font-size: var(--fs-ui); line-height: 17px; }   /* racing: 94:49 */
  /* racing page: the button collapses to a 12px chevron (94:416); the link keeps its aria-label */
  .race-row--chevron .race-row__btn { padding: 0; border: 0; box-shadow: none; background: none; }
  .race-row--chevron .race-row__btn .btn__short { display: none; }
  .race-row--chevron .race-row__chev { display: block; width: 12px; height: 12px; color: var(--color-muted); }

  .race-row { height: 56px; padding: 12px; }
  .race-row__left { gap: 10px; }
  .race-row__name { font-size: var(--fs-ui); line-height: 16px; }
  .race-row__right { gap: 8px; }
  .race-row__right .btn { padding: 6px 10px; font-size: var(--fs-tiny); line-height: 14px; }

  .dash--page { padding-top: 16px; }
  .dash__feed--32 { gap: 20px; }
  .page-intro__title { font-size: 24px; line-height: 30px; }
  .page-intro__lead { font-size: var(--fs-ui); line-height: 18px; }
  .filters { flex-direction: column; align-items: stretch; gap: 20px; padding-bottom: 0; }
  .chips--tabs { padding-bottom: 8px; }
  .page-intro { gap: 4px; }
  .chip--tab { padding: 6px 12px; }
  .event-grid--carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .event-grid--carousel::-webkit-scrollbar { display: none; }
  .event-grid--carousel .event-card { flex: 0 0 310px; scroll-snap-align: start; }
  .event-grid--carousel .event-card__odds .odds { height: 44px; }   /* 90:90: 44px odds in the sports carousel, 36 in the home stack (79:79) */
  .comps, .comps__list { gap: 20px; }
  .comp__toggle { padding: 12px; }
  .comp-row { flex-direction: column; align-items: stretch; gap: 10px; height: auto; padding: 12px; border: 0; box-shadow: inset 0 -1px 0 var(--color-border); }
  .comp-row__when { width: auto; align-self: flex-start; font-weight: 600; font-size: var(--fs-tiny); line-height: 14px; }
  .comp-row__teams { width: auto; gap: 2px; font-size: var(--fs-ui); line-height: 16px; }
  .comp-row__odds .odds { height: 44px; }
  .comp-row__odds .odds__label { font-size: var(--fs-small); line-height: 16px; }
  .comp-row__more { position: absolute; right: 12px; top: 12px; width: auto; font-size: var(--fs-small); line-height: 16px; }
  .betslip__rg-note { display: none; }
  .standard-grid { grid-template-columns: 1fr; gap: 12px; }
  .standard { padding: 16px; gap: 8px; }
  .standard__icon { width: 32px; height: 32px; }
  .standard__icon .icon { width: 16px; height: 16px; }
  .standard__title { font-size: var(--fs-body); line-height: 18px; }
  .standard__text { font-size: var(--fs-small); line-height: 17px; }

  .rg-info { padding: 20px; gap: 20px; border-radius: var(--radius-lg); }
  .rg-info__title { font-size: var(--fs-lead); line-height: 20px; }
  .rg-info__lead { font-size: var(--fs-ui); line-height: 18px; }
  .rg-info__grid { grid-template-columns: 1fr; gap: 10px; }
  .rg-tile { padding: 12px; gap: 6px; }
  .rg-tile__title { font-size: var(--fs-ui); line-height: 16px; }
  .rg-tile__text { line-height: 16px; }
  .rg-info__foot { font-size: var(--fs-tiny); line-height: 15px; }

  /* the aside becomes the sheet layer */
  .dash__aside { display: block; position: static; width: auto; flex: none; }
  .betslip-sheet { display: block; position: fixed; inset: 0; z-index: var(--z-sheet); pointer-events: none; visibility: hidden; transition: visibility 0s var(--dur-slow); }   /* hidden: nothing offscreen is tabbable */
  .betslip-sheet__scrim { display: block; position: absolute; inset: 0; background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity var(--dur-slow) var(--ease); }
  .betslip {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: calc(100% - 42px);
    gap: 0; padding: 0; border-radius: 16px 16px 0 0;
    box-shadow: inset 0 0 0 1px var(--color-border), var(--shadow-sheet);
    transform: translateY(100%); transition: transform var(--dur-slow) var(--ease);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .betslip-sheet.is-open { pointer-events: auto; visibility: visible; transition-delay: 0s; }
  .betslip-sheet.is-open .betslip-sheet__scrim { opacity: 1; }
  .betslip-sheet.is-open .betslip { transform: none; }
  .betslip__handle { display: flex; justify-content: center; align-items: center; width: 100%; height: 24px; margin-bottom: -4px; padding: 0; border: 0; background: none; cursor: pointer; }   /* 24px zone, the 20px band as drawn */
  .betslip__handle span { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--color-dim); }
  .betslip__head { padding: 0 16px 12px; }
  .betslip__title { font-size: 18px; line-height: 23px; gap: 6px; }
  .betslip__tabs { margin: 0 16px; padding: 0; background: none; box-shadow: none; border-radius: 0; }
  .betslip__tabs .segmented__item { padding: 10px 0; border-radius: 0; font-size: var(--fs-ui); line-height: 17px; box-shadow: inset 0 -1px 0 var(--color-border); }
  .betslip__tabs .segmented__item[aria-selected="true"] { background: none; box-shadow: inset 0 -2px 0 var(--color-brand); }
  .betslip__body { padding: 16px 16px 0; gap: 16px; }
  .bet-card { gap: 10px; background: var(--color-bg); }
  .betslip__summary { padding: 16px 16px 0; gap: 8px; }
  .betslip__msg { margin: 16px 16px 0; }
  .betslip__place { margin: 16px 16px 24px; width: auto; }
  .betslip__rg {
    display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 8px 16px;
    background: var(--color-bg-deep); font-size: var(--fs-micro); line-height: 13px; color: var(--color-muted);
  }
  .betslip__rg .badge--age { font-size: 9px; line-height: 11.34px; }
  .betslip__rg a { color: var(--color-text); text-decoration: none; }

  .betslip-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-betslip-bar);
    display: flex; align-items: center; justify-content: space-between;
    height: 56px; padding: 0 16px; border: 0; border-radius: 8px 8px 0 0;
    background: var(--color-surface); box-shadow: inset 0 1px 0 var(--color-border);
    color: var(--color-text-strong); cursor: pointer;
    font-family: var(--font-display); font-weight: 700; font-size: var(--fs-body); line-height: 18px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .betslip-bar__left { display: inline-flex; align-items: center; gap: 10px; }
  .betslip-bar__icon { width: 18px; height: 18px; }
  .betslip-bar__total { color: var(--color-brand); font-variant-numeric: tabular-nums; }
  .betslip-bar:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-brand); }
}

/* Between the phone frame and the dashboard breakpoint there is no mockup:
   let the stacked cards use the width instead of stretching one column. */
@media (min-width: 640px) and (max-width: 1199px) {
  .entries, .event-grid--2, .standard-grid, .rg-info__grid { grid-template-columns: repeat(2, 1fr); }
  .event-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .betslip { left: auto; right: 16px; width: 400px; border-radius: 16px 16px 0 0; }
}

@media (max-width: 389px) {
  .hero__actions .btn { flex: 1 1 auto; }
  .market-row__odds, .event-card__odds { grid-template-columns: 1fr 1fr; }
  .market-row__odds--3 { grid-template-columns: 1fr; }
}

/* ── racing: meetings (14:135), race pills (14:140), race card (14:235) ── */
.filters--racing .chip--sm { padding: 6px 12px; font-size: var(--fs-tiny); line-height: 14px; }
.meeting { display: flex; align-items: center; gap: 16px; height: 64px; padding: 14px 16px; background: var(--color-surface); box-shadow: inset 0 -1px 0 var(--color-border); }
.meeting__head { display: flex; flex-direction: column; gap: 4px; width: 200px; flex: none; }
.meeting__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-body); line-height: 18px; color: var(--color-text); }
.meeting__state { color: var(--color-dim); }
.meeting__type { font-size: var(--fs-tiny); line-height: 14.3px; color: var(--color-muted); }
.meeting__races { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.race-pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--color-surface-2); box-shadow: inset 0 0 0 1px var(--color-border); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.race-pill__no { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-tiny); line-height: 14px; color: var(--color-muted); }
.race-pill__time { font-size: var(--fs-tiny); line-height: 14.3px; color: var(--color-text); font-variant-numeric: tabular-nums; }
.race-pill:hover { background: var(--color-surface-2-hover); box-shadow: inset 0 0 0 1px var(--color-border-2); }
.race-pill[aria-pressed="true"] { background: var(--color-brand-tint); box-shadow: inset 0 0 0 1px var(--color-brand); }
.race-pill[aria-pressed="true"] .race-pill__no, .race-pill[aria-pressed="true"] .race-pill__time { color: var(--color-brand); }
.race-pill:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.race-card { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 80px; }
.race-card__head { font: inherit; }
.race-card__toggle {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 14px 16px; border: 0;
  border-radius: 12px 12px 0 0; background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border);
  color: var(--color-text-strong); cursor: pointer; text-align: left;
}
.race-card__toggle[aria-expanded="false"] { border-radius: 12px; }
.race-card__toggle:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--color-border), var(--focus-ring); }
.race-card__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lead); line-height: 20.16px; }
.race-card__meta { font-size: var(--fs-ui); line-height: 17px; color: var(--color-muted); }
.race-card__chev { margin-left: auto; width: 24px; height: 24px; color: var(--color-muted); transition: transform var(--dur-base) var(--ease); }
.race-card__toggle[aria-expanded="false"] .race-card__chev { transform: rotate(180deg); }
.race-card__body { margin-top: 0; }
.race-card__body > div { display: flex; flex-direction: column; }
.runner {
  display: flex; align-items: center; gap: 16px; height: 61px; padding: 12px 16px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-top: 0;
  transition: background-color var(--dur-fast) var(--ease);
}
.runner:hover { background: var(--color-surface-hover); }
.runner__no { width: 40px; flex: none; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-ui); line-height: 16.38px; color: var(--color-dim); }
.runner__name { flex: 1; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-body); line-height: 18px; color: var(--color-text); }
.runner__odds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 340px; flex: none; }
.runner__odds .odds { height: 37px; }
.runner__odds .odds__label { font-size: var(--fs-ui); line-height: 17px; }

@media (max-width: 1199px) {
  .filters--racing { gap: 10px; }
  .filters--racing .chips--tabs { padding-bottom: 0; }
  .filters--racing .chips { gap: 6px; }
  .meeting { flex-direction: column; align-items: stretch; gap: 10px; height: auto; padding: 12px; }
  .meeting__head { flex-direction: row; justify-content: space-between; align-items: center; width: auto; }
  .meeting__name { font-size: var(--fs-ui); line-height: 16px; font-weight: 800; }
  .meeting__state { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-micro); line-height: 13px; color: var(--color-dim); }
  .meeting__type { font-size: var(--fs-tiny); line-height: 15px; }
  .meeting__races { flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
  .meeting__races::-webkit-scrollbar { display: none; }
  .race-pill { flex: none; padding: 6px 10px; }
  .race-pill__no, .race-pill__time { font-size: var(--fs-micro); line-height: 13px; }
  .race-card { gap: 12px; }
  .race-card__toggle { flex-wrap: wrap; padding: 12px; border-radius: 12px; }
  .race-card__title { font-size: 15px; line-height: 19px; flex: 1; }
  .race-card__meta { width: 100%; order: 3; font-size: var(--fs-small); line-height: 16px; }
  .race-card__chev { width: 14px; height: 14px; margin-left: 0; }
  .race-card__body { margin-top: 0; }
  .runner { height: 62px; padding: 12px; gap: 12px; border: 0; box-shadow: inset 0 -1px 0 var(--color-border); }
  .runner__no { width: auto; }
  .runner__odds { width: 180px; gap: 6px; }
  .runner__odds .odds { height: 38px; padding: 0 8px; }
  .runner__odds .odds__label { font-size: var(--fs-small); }
}

/* mobile frames (90:*, 94:*) set a few sizes of their own */
@media (max-width: 1199px) {
  .betslip-bar, .betslip-bar__total { font-weight: 800; }
  .comp-row__teams, .event-card__team { color: var(--color-text-strong); }
  .chip--tab { font-size: var(--fs-tiny); line-height: 14px; }
  .runner__no { font-size: var(--fs-tiny); line-height: 14px; color: var(--color-muted); }
  .runner__name { font-size: var(--fs-ui); line-height: 16.38px; }
  .runner__odds .odds__label { font-weight: 400; font-size: var(--fs-tiny); line-height: 14.3px; }
  .runner__odds .odds__value { font-size: var(--fs-small); line-height: 15.12px; }
  .race-pill__time { font-weight: 500; }
  .page-intro__lead { line-height: 17px; }
}