/* Sports — betaces-sports-page (1440) / betaces-sports-mobile (390).
 * M2: the desktop workspace with a slip sidebar becomes a stack of competition
 * cards plus a sticky slip bar. One markup, two layouts. */

/* ── sports-command-bar ───────────────────────────────────────────────── */
.command-bar { padding: 48px var(--container-pad); background: var(--color-cream); }
.command-bar__inner { display: grid; gap: var(--space-16); max-width: var(--container); margin-inline: auto; }
.command-bar__h {
  font-size: 48px; font-weight: 700; line-height: 44px; letter-spacing: var(--ls-h4);
  text-transform: uppercase; color: var(--color-ink);
}
.command-bar__desc { font-size: var(--fs-body-sm); line-height: 20px; color: var(--color-muted); }

/* ── sport-navigation-rail ────────────────────────────────────────────── */
.rail {
  padding: 0 var(--container-pad); background: var(--color-cream);
  box-shadow: inset 0 -1px 0 var(--color-border);
}
.rail__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); }
.rail__items { display: flex; align-items: center; }
.rail__items > li + li { box-shadow: inset 1px 0 0 var(--color-border); }
.rail__item, .rail__more {
  position: relative; display: flex; align-items: center; height: 58px; padding: 0 var(--space-24);
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 20.2px;
  color: var(--color-ink); text-decoration: none; text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease);
}
.rail__item:hover, .rail__more:hover { color: var(--color-brand); }
.rail__item.is-active { color: var(--color-brand); }
.rail__item.is-active::after {
  content: ""; position: absolute; left: 50%; bottom: 15px; translate: -50% 0;
  width: 32px; height: 3px; background: var(--color-accent);
}

.rail__dates { display: flex; align-items: center; gap: var(--space-20); }
.rail__date {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-brand); font-size: var(--fs-meta); line-height: 15px;
  /* the mockup's 50% ink is 3.58:1 — the muted token is the same family, readable */
  color: var(--color-muted); transition: color var(--dur-fast) var(--ease);
}
.rail__date:hover { color: var(--color-ink); }
.rail__date.is-active { color: var(--color-brand); }

/* ── markets-workspace ────────────────────────────────────────────────── */
.workspace {
  display: flex; align-items: flex-start; gap: var(--space-32);
  padding: 40px var(--container-pad) 64px;
  background: var(--color-page);
}
/* minmax(0,1fr): an implicit auto track grows to the min-content of its widest
   item and pushes the whole column past the viewport. */
.workspace__main { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
.workspace__head { display: grid; gap: var(--space-4); }
.workspace__title { display: flex; align-items: baseline; gap: var(--space-12); }
.workspace__h {
  font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 700; line-height: 43.1px;
  text-transform: uppercase; color: var(--color-ink);
}
.workspace__count { font-size: var(--fs-body-sm); line-height: 18.2px; color: var(--color-muted); }
.workspace__empty {
  padding: var(--space-24); background: var(--color-white);
  font-size: var(--fs-body-sm); line-height: 22px; color: var(--color-muted);
}
.workspace__empty .link-brand { border: 0; background: none; padding: 0; cursor: pointer; }

/* ── competition block ────────────────────────────────────────────────── */
.comp { background: var(--color-white); }
.comp__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  height: 48px; padding: 14px; background: var(--color-page);
}
.comp__title {
  display: flex; align-items: center; gap: var(--space-8);
  font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 20px;
  color: var(--color-brand);
}
.comp__count { font-family: var(--font-body); font-size: var(--fs-meta); font-weight: 400; line-height: 16px; color: var(--color-muted); }
.comp__all { font-size: var(--fs-meta); font-weight: 700; line-height: 16px; }

/* featured match inside a competition */
.feat { display: grid; gap: var(--space-20); padding: var(--space-24); }
.feat__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
.feat__badge {
  padding: 3px var(--space-8); border-radius: var(--radius-sm);
  background: var(--color-brand); color: var(--color-cream);
  font-size: var(--fs-micro); font-weight: 800; line-height: 13px;
}
.feat__when { font-size: var(--fs-meta); font-weight: 700; line-height: 16px; color: var(--color-brand); }
.feat__title {
  font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 700; line-height: 43.1px;
  color: var(--color-ink);
}
.feat__odds { display: grid; gap: var(--space-8); }
.feat__market { font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; color: var(--color-muted); }
.feat__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  font-size: var(--fs-ui); line-height: 17px; color: var(--color-muted);
}
.feat__foot .link-brand { font-size: var(--fs-ui); font-weight: 700; line-height: 17px; }

/* ── odds cells ───────────────────────────────────────────────────────── */
.odds-row { display: flex; gap: var(--space-8); }
.odds-row--featured { gap: var(--space-12); }
.odds-cell {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8);
  flex: 1; min-width: 0; height: 48px; padding: 12px var(--space-16);
  border: 0; border-radius: 0; background: var(--color-cream); color: var(--color-ink);
  cursor: pointer; text-align: left;
  font-size: var(--fs-ui); line-height: 17px;
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.odds-cell__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odds-cell__value { flex: none; font-size: var(--fs-body-sm); line-height: 18.2px; }
.odds-cell:hover { box-shadow: inset 0 0 0 1px var(--color-brand); }
.odds-cell.is-selected { background: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-ink); }

/* ── secondary matches ────────────────────────────────────────────────── */
.match-list > li + li { box-shadow: inset 0 1px 0 var(--color-border); }
.match-row {
  display: flex; align-items: center; gap: var(--space-16);
  height: 80px; padding: var(--space-16);
  transition: background-color var(--dur-fast) var(--ease);
}
.match-row:hover { background: var(--color-cream); }
.match-row__when { width: 300px; flex: none; display: grid; gap: var(--space-4); }
.match-row__time { font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; color: var(--color-muted); }
.match-row__title {
  font-family: var(--font-display); font-size: var(--fs-card); font-weight: 700; line-height: 24.25px;
  color: var(--color-ink);
}
.match-row .odds-row { width: 360px; flex: none; }
.match-row__markets {
  margin-left: auto; font-size: var(--fs-meta); font-weight: 700; line-height: 16px;
  color: var(--color-muted); text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.match-row__markets:hover { color: var(--color-brand); }

/* ── NRL: two cards side by side ──────────────────────────────────────── */
.comp-cards { display: flex; gap: var(--space-20); padding: var(--space-20); }
.comp-card {
  flex: 1; min-width: 0; display: grid; gap: var(--space-16);
  padding: var(--space-16); box-shadow: inset 0 0 0 1px var(--color-border);
  transition: box-shadow var(--dur-fast) var(--ease);
}
.comp-card:hover { box-shadow: inset 0 0 0 1px var(--color-brand); }
.comp-card__meta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-12);
  font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; color: var(--color-muted);
}
.comp-card__meta .link-brand { font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; }
.comp-card__title {
  font-family: var(--font-display); font-size: var(--fs-title); font-weight: 700; line-height: 27px;
  color: var(--color-ink);
}
/* A column of odds: flex-basis 0 would let the cells collapse to their content,
   so they keep their own height here. */
.odds-row--stack { flex-direction: column; gap: var(--space-8); }
.odds-row--stack .odds-cell { flex: none; }

/* ── football: a three-way strip ──────────────────────────────────────── */
.comp-strip { display: grid; gap: var(--space-16); padding: var(--space-20); }
.comp-strip__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-24); }
.comp-strip__when { display: grid; gap: var(--space-4); }
.comp-strip__time { font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; color: var(--color-muted); }
.comp-strip__title {
  font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 32px;
  color: var(--color-ink);
}
.comp-strip__top .link-brand { font-size: var(--fs-meta); font-weight: 700; line-height: 16px; }
.comp-strip__odds { display: grid; gap: 6px; }
.comp-strip__odds .feat__market { font-size: var(--fs-micro); line-height: 13px; }

/* ── cricket: one compact line ────────────────────────────────────────── */
.comp-compact {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-24);
  padding: var(--space-16);
}
.comp-compact__when { display: grid; gap: 2px; }
.comp-compact__time { font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; color: var(--color-muted); }
.comp-compact__title {
  font-family: var(--font-display); font-size: var(--fs-title); font-weight: 700; line-height: 27px;
  color: var(--color-ink);
}
.comp-compact__right { display: flex; align-items: center; gap: var(--space-16); }
.odds-row--narrow { width: 280px; }
.comp-compact__markets {
  font-size: var(--fs-meta); font-weight: 700; line-height: 16px;
  color: var(--color-muted); text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.comp-compact__markets:hover { color: var(--color-brand); }

/* ── tennis: head to head ─────────────────────────────────────────────── */
.comp-versus { display: grid; gap: var(--space-16); padding: var(--space-20); }
.comp-versus__meta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; color: var(--color-muted);
}
.comp-versus__meta .link-brand { font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; }
.comp-versus__body { display: flex; align-items: center; gap: var(--space-24); }
.comp-versus__players { flex: 1; min-width: 0; display: grid; gap: var(--space-12); }
.comp-versus__player { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); height: 24px; }
.comp-versus__name {
  font-family: var(--font-display); font-size: var(--fs-card); font-weight: 700; line-height: 24px;
  color: var(--color-ink);
}
.comp-versus__seed { font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; color: var(--color-muted); }
.comp-versus .odds-row--stack { width: 180px; flex: none; }


/* ── mobile: betaces-sports-mobile (390) ─────────────────────────────── */
@media (max-width: 1199px) {
  .odds-row--stack { flex-direction: row; }
  .odds-row--stack .odds-cell { flex: 1; }
  .command-bar { padding: var(--space-24) var(--container-pad-mobile); }
  .command-bar__inner { gap: var(--space-12); }
  .command-bar__h { font-size: 38px; line-height: 36px; }
  .command-bar__desc { font-size: var(--fs-ui); line-height: 18px; }

  .rail { padding: 0; box-shadow: none; }
  .rail__inner { flex-direction: column; align-items: stretch; gap: 0; }
  .rail__items {
    gap: var(--space-20); padding: 0 var(--container-pad-mobile);
    overflow-x: auto; scrollbar-width: none;
  }
  .rail__items::-webkit-scrollbar { display: none; }
  .rail__items > li + li { box-shadow: none; }
  .rail__item, .rail__more {
    height: 44px; padding: 0; white-space: nowrap;
    font-size: var(--fs-body-sm); line-height: 19px; color: var(--color-muted);
  }
  .rail__item.is-active { color: var(--color-brand); }
  .rail__item.is-active::after { bottom: 6px; width: 24px; }
  .rail__dates {
    gap: var(--space-24); height: 36px; padding: 0 var(--container-pad-mobile);
    background: var(--color-cream-2);
  }
  .rail__date { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 500; line-height: 14px; color: var(--color-muted); }

  .workspace { flex-direction: column; gap: 0; padding: 0; background: var(--color-cream); }
  .workspace__main { width: 100%; gap: 0; }
  .workspace__head { gap: var(--space-4); padding: var(--space-24) var(--container-pad-mobile) var(--space-12); }
  .workspace__h { font-size: 24px; line-height: 32px; }
  .workspace__count { font-size: var(--fs-meta); line-height: 16px; }
  .workspace__empty { margin: 0 var(--container-pad-mobile); }

  .comp {
    display: grid; gap: var(--space-12);
    padding: var(--space-24) var(--container-pad-mobile);
    background: transparent;
  }
  .comp__head { height: auto; padding: 0; background: transparent; }
  .comp__title { font-size: var(--fs-body-sm); line-height: 19px; color: var(--color-ink); }
  .comp__count { display: none; }                 /* not drawn on the mobile frame */

  .feat, .match-row {
    display: grid; gap: 10px; height: auto; padding: var(--space-12);
    background: var(--color-white); border-radius: var(--radius-md);
  }
  .feat__meta { gap: var(--space-12); }
  .feat__badge { padding: 0; background: transparent; color: var(--color-muted); font-size: var(--fs-micro); line-height: 13px; }
  .feat__when { font-size: var(--fs-micro); line-height: 13px; }
  .feat__title { font-size: 16px; line-height: 22px; }
  .feat__odds { gap: 6px; }
  .feat__market { font-size: var(--fs-nano); line-height: 12px; color: var(--color-muted-2); }
  .feat__foot { font-size: var(--fs-micro); line-height: 13px; }
  .feat__foot .link-brand { font-size: var(--fs-micro); line-height: 13px; }

  .odds-row, .odds-row--featured { gap: 6px; }
  .odds-cell { height: 44px; padding: 0 var(--space-12); border-radius: var(--radius-md); background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-border); }
  .odds-cell.is-selected { box-shadow: inset 0 0 0 1px var(--color-ink); }

  .match-list { display: grid; gap: var(--space-12); }
  .match-list > li + li { box-shadow: none; }
  .match-row__when { width: auto; gap: 10px; }
  .match-row__time { font-size: var(--fs-micro); line-height: 13px; }
  .match-row__title { font-size: 16px; line-height: 22px; }
  .match-row .odds-row { width: auto; }
  .match-row__markets { margin: 0; font-size: var(--fs-micro); line-height: 13px; }

  .comp-cards { flex-direction: column; gap: var(--space-12); padding: 0; }
  .comp-card, .comp-strip, .comp-compact, .comp-versus {
    padding: var(--space-12); background: var(--color-white);
    border-radius: var(--radius-md); box-shadow: none;
  }
  .comp-card { gap: 10px; }
  .comp-card__title, .comp-strip__title, .comp-compact__title, .comp-versus__name { font-size: 16px; line-height: 22px; }
  .comp-card__meta, .comp-compact__time, .comp-strip__time, .comp-versus__meta { font-size: var(--fs-micro); line-height: 13px; }
  .comp-strip { gap: 10px; }
  .comp-strip__top { gap: var(--space-12); }
  .comp-compact { flex-direction: column; align-items: stretch; gap: 10px; }
  .comp-compact__right { flex-direction: column; align-items: stretch; gap: 10px; }
  .odds-row--narrow { width: auto; }
  .comp-versus { gap: 10px; }
  .comp-versus__body { flex-direction: column; align-items: stretch; gap: 10px; }
  .comp-versus .odds-row--stack { width: auto; flex-direction: row; }

}

@media (max-width: 389px) {
  .odds-row { flex-wrap: wrap; }
  .odds-cell { min-width: 45%; }
}