/* Sports betting — frames sports-betting (6:4) and mobile-sports (36:4). */

/* ── intro (editorial-sports-intro) ───────────────────────────────────── */
.intro {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 232px; padding: 48px var(--container-pad);
  background: var(--color-purple); box-shadow: inset 0 -1px 0 var(--color-border);
}
.intro__left { display: flex; flex-direction: column; gap: 12px; width: 700px; max-width: 100%; }
.intro__crumb { font-weight: 900; font-size: 12px; line-height: 16px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-brand); }
.intro__title { font-family: var(--font-display); font-size: 48px; line-height: 52px; text-transform: uppercase; color: var(--color-text); }
.intro__lead { font-size: 15px; line-height: 22px; color: var(--color-card-3); }
.intro__stat { display: flex; flex-direction: column; gap: 8px; width: 258px; flex: none; padding: 24px; border-radius: var(--radius-sm); background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border); }
.intro__stat-label { font-family: var(--font-display); font-size: 12px; line-height: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--color-muted); white-space: nowrap; }   /* one line in the frame (202px of 210) */
.u-mob-br { display: none; }
.intro__stat-value { font-family: var(--font-mono); font-weight: 900; font-size: 28px; line-height: 36px; color: var(--color-brand); }
.intro__stat-text { font-size: 12px; line-height: 16px; color: var(--color-muted); }

/* ── sport tabs + time filters (sports-navigation-grid) ───────────────── */
.sportsnav { display: flex; flex-direction: column; gap: 16px; padding: 20px var(--container-pad); background: var(--color-surface); box-shadow: inset 0 -1px 0 var(--color-border); }
.sportsnav__rail { display: flex; align-items: center; gap: 8px; min-height: 29px; }
.sportsnav__tab {
  display: inline-flex; align-items: center; padding: 8px 16px; border-radius: var(--radius-sm);
  background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border);
  font-family: var(--font-display); font-size: 12px; line-height: 13px; text-transform: uppercase; color: var(--color-muted);
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sportsnav__tab:hover { color: var(--color-text); background: var(--color-surface-2); }
.sportsnav__tab.is-active { background: var(--color-brand); color: var(--color-ink); box-shadow: none; }
.u-desk-flex { display: inline-flex; }
.sportsnav__divider { height: 1px; margin: 0 0 -1px; border: 0; background: var(--color-border); }
.sportsnav__time { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.sportsnav__label { margin-right: 0; font-weight: 900; font-size: 12px; line-height: 16px; letter-spacing: 1px; text-transform: uppercase; color: var(--color-muted); }
.chip {
  display: inline-flex; align-items: center; padding: 6px 14px; border: 0; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border);
  font-weight: 700; font-size: 12px; line-height: 16px; text-transform: uppercase; color: var(--color-muted);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chip:hover { color: var(--color-text); background: var(--color-surface-2); }
.chip.is-active { background: var(--color-purple); color: var(--color-text); box-shadow: none; }
.chip:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--color-border), var(--focus-ring); }

/* ── workspace: feed + slip ───────────────────────────────────────────── */
.work { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 24px; align-items: start; padding: 32px var(--container-pad) 64px; background: var(--color-bg); }
.feed { display: flex; flex-direction: column; gap: 32px; }
.feed__head { display: flex; align-items: baseline; gap: 8px; align-self: flex-start; }
.feed__title { font-family: var(--font-display); font-size: 28px; line-height: 30px; text-transform: uppercase; color: var(--color-text); }
.feed__sub { font-size: 14px; line-height: 18px; color: var(--color-muted); }
.plate { display: flex; flex-direction: column; border-radius: var(--radius-sm); background: var(--color-card-3); overflow: hidden; }
.group { display: flex; flex-direction: column; }
.group__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 49px; padding: 16px; background: var(--color-surface); box-shadow: inset 0 -1px 0 var(--color-border); }
.group__title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.group__name { font-family: var(--font-display); font-size: 16px; line-height: 17px; text-transform: uppercase; color: var(--color-text); white-space: nowrap; }
.group__region { font-size: 13px; line-height: 17px; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.group__all { font-weight: 700; font-size: 13px; line-height: 17px; color: var(--color-brand); text-decoration: none; white-space: nowrap; }
.group__all:hover { text-decoration: underline; }
.srow { display: flex; align-items: center; gap: 20px; min-height: 90px; padding: 16px; box-shadow: inset 0 -1px 0 var(--color-border-light); }
.group:last-child .srow:last-child { box-shadow: none; }
.srow__info { display: flex; flex-direction: column; gap: 4px; flex: 0 0 220px; }
.srow__when { font-weight: 800; font-size: 11px; line-height: 14px; text-transform: uppercase; color: var(--color-muted-3); }
.srow__market--mob { display: none; }
.srow__teams { display: flex; flex-direction: column; font-weight: 800; font-size: 14px; line-height: 18px; color: var(--color-ink); }
.srow__type { display: flex; flex-direction: column; gap: 2px; flex: 0 0 100px; }
.srow__type-label { font-weight: 700; font-size: 9px; line-height: 12px; text-transform: uppercase; color: var(--color-muted-3); }
.srow__type-name { font-weight: 700; font-size: 12px; line-height: 16px; color: var(--color-ink); }
.srow__odds { display: flex; gap: 8px; flex: 1; min-width: 0; }
.srow .odd__price { color: var(--color-orange); }                /* the sports frame prices in orange; kept as drawn (F3) */
.srow .odd[aria-pressed="true"] .odd__price { color: var(--color-ink); }
.srow--3way .odd { padding: 12px 8px; gap: 4px; }
.srow__more { flex: 0 0 110px; text-align: right; font-weight: 700; font-size: 13px; line-height: 17px; color: var(--color-ink); text-decoration: none; }
.srow__more:hover { text-decoration: underline; }
.group[hidden], .srow[hidden] { display: none; }
/* the sports frame's slip: radius 4, purple count badge, cards on the page background */
.work .betslip { position: sticky; top: 96px; border-radius: var(--radius-sm); }
.work .betslip__count { background: var(--color-purple); }
.work .pick { border-radius: var(--radius-sm); background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border); }
.work .pick__sport { background: var(--color-purple); color: var(--color-text); }
.work .pick__remove { color: var(--color-orange); }
.work .stake__label { letter-spacing: .5px; }
.work .stake__input { border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--color-border); }
.work .betslip__return-label { font-size: 13px; line-height: 17px; }
.work .betslip__place { border-radius: var(--radius-sm); }

@media (min-width: 1200px) and (max-width: 1439px) {
  .srow { flex-wrap: wrap; row-gap: 12px; }
  .srow__info { flex: 1 1 200px; }
  .srow__odds { flex: 1 0 100%; order: 5; }
  .srow__more { margin-left: auto; }
}

/* ── mobile (390 frame) ───────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .intro { flex-direction: column; align-items: stretch; gap: 24px; min-height: 0; padding: 32px var(--container-pad); box-shadow: none; }
  .intro__left { width: auto; }
  .intro__crumb { font-weight: 800; }
  .intro__title { font-size: 32px; line-height: 36px; }
  .u-mob-br { display: inline; }   /* the frame breaks the title: SPORTS ⏎ BETTING. */
  .intro__lead { font-size: 14px; line-height: 20px; }
  .intro__stat { width: auto; gap: 4px; padding: 16px; }
  .intro__stat-label { font-size: 11px; line-height: 12px; }

  .sportsnav { gap: 0; padding: 0; background: none; box-shadow: none; }
  .sportsnav__rail { min-height: 48px; padding: 0 var(--container-pad); background: var(--color-surface); box-shadow: inset 0 -1px 0 var(--color-border); overflow-x: auto; scrollbar-width: none; }
  .sportsnav__rail::-webkit-scrollbar { display: none; }
  .sportsnav__tab { padding: 8px 12px; font-size: 11px; line-height: 12px; background: none; box-shadow: inset 0 0 0 1px var(--color-ink-2); }
  .sportsnav__tab.is-active { background: var(--color-brand); box-shadow: none; }
  .u-desk-flex { display: none; }
  .sportsnav__divider { display: none; }
  .sportsnav__time { min-height: 50px; padding: 12px var(--container-pad); background: var(--color-bg); overflow-x: auto; scrollbar-width: none; }
  .sportsnav__time::-webkit-scrollbar { display: none; }
  .sportsnav__label { font-size: 11px; line-height: 14px; }
  .chip { padding: 6px 12px; font-size: 11px; line-height: 14px; }
  .chip:not(.is-active) { background: none; }

  .work { display: block; padding: 0; }
  .feed { gap: 0; }
  .feed__head { flex-direction: column; align-items: flex-start; align-self: stretch; gap: 6px; padding: 24px var(--container-pad) 12px; background: var(--color-card-2); }
  .feed__title { font-size: 22px; line-height: 26px; color: var(--color-ink); }
  .feed__sub { font-size: 13px; line-height: 18px; color: var(--color-muted-3); }
  .plate { border-radius: 0; background: var(--color-card-2); }
  .group { background: var(--color-card-2); }
  .group__head { min-height: 48px; box-shadow: none; }
  .group__name { font-size: 14px; line-height: 15px; }
  .group__region { font-size: 12px; line-height: 16px; }
  .group__all { font-size: 12px; line-height: 16px; }
  .srow { flex-direction: column; align-items: stretch; gap: 12px; min-height: 0; padding: 16px; box-shadow: inset 0 0 0 1px var(--color-border-light); }
  .group:last-child .srow:last-child { box-shadow: inset 0 0 0 1px var(--color-border-light); }
  .srow__info { flex: none; display: grid; grid-template-columns: 1fr auto; gap: 12px 8px; }
  .srow__when { grid-row: 1; grid-column: 1; }
  .srow__market--mob { display: block; grid-row: 1; grid-column: 2; text-align: right; font-weight: 700; font-size: 11px; line-height: 14px; color: var(--color-muted-3); }
  .srow__teams { grid-column: 1 / -1; gap: 2px; font-size: 15px; line-height: 20px; }
  .srow__type { display: none; }
  .srow__odds { flex: none; }
  .srow .odd { min-height: 40px; padding: 12px; }
  .srow .odd__name { font-size: 11px; line-height: 14px; }
  .srow .odd[aria-pressed="true"] .odd__name { font-size: 12px; line-height: 16px; }
  .srow .odd__price { font-size: 12px; line-height: 16px; color: var(--color-ink); }   /* the mobile sports frame prints prices in ink */
  .srow .odd[aria-pressed="true"] .odd__price { color: var(--color-ink); }
  .srow--3way .srow__odds { flex-direction: column; gap: 6px; }
  .srow__more { flex: none; font-size: 12px; line-height: 16px; }

  /* bet slip as the mobile "bottom sheet" section (13-bet-slip-bottom-sheet) */
  .work .betslip { position: static; gap: 16px; padding: 16px var(--container-pad); border-radius: 0; box-shadow: inset 0 1px 0 var(--color-border), inset 0 -1px 0 var(--color-border); }
  .work .pick__remove { color: var(--color-red); }
  .work .betslip__return-label { font-size: 12px; line-height: 16px; }
  .work .betslip::before { content: ""; display: block; width: 36px; height: 4px; margin: 0 auto 4px; border-radius: 2px; background: var(--color-border); }
  .work .betslip__head { height: 20px; }
  .work .betslip__count { padding: 2px 6px; border-radius: var(--radius-sm); background: var(--color-purple); font-family: var(--font-body); font-weight: 800; font-size: 10px; line-height: 13px; }
  .work .pick { gap: 10px; padding: 12px; border-radius: var(--radius-sm); background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border); }
  .work .pick__sport { border-radius: var(--radius-xs); background: var(--color-purple); color: var(--color-text); }
  .work .pick__bottom { min-height: 34px; }
  .work .pick__name { font-size: 14px; line-height: 18px; }
  .work .pick__odds { padding: 2px 6px; border-radius: var(--radius-sm); background: var(--color-brand); font-family: var(--font-body); font-weight: 800; font-size: 10px; line-height: 13px; color: var(--color-ink); }
  .work .betslip__form { gap: 16px; }
  .work .stake { gap: 6px; }
  .work .stake__input { min-height: 42px; padding: 0 12px; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--color-border); }
  .work .stake__currency, .work .stake__field { font-size: 14px; line-height: 18px; }
  .work .stake__field { padding: 12px 0; }
  .work .betslip__return { min-height: 21px; }
  .work .betslip__return-value { font-size: 16px; line-height: 21px; }
  .work .betslip__place { min-height: 42px; padding: 14px; border-radius: var(--radius-sm); font-size: 13px; line-height: 14px; }
  .work .betslip__compliance { flex-direction: row; align-items: center; justify-content: space-between; min-height: 14px; }
  .work .betslip__place ~ .betslip__line { display: none; }   /* the sheet keeps the line after the stake, drops the one after the button */
}

/* 320–389: the region tag no longer fits beside the sport title — it drops to its own line instead of being clipped */
@media (max-width: 389px) {
  .group__title { flex-wrap: wrap; row-gap: 2px; }
  .group__region { flex-basis: 100%; white-space: normal; overflow: visible; }
}