/* talkSPORT trending cards. Values are the talkSPORT mode of the ABS Medium card in Figma
   (file Sr81TZJx7WajijZIKhl0wm, section 8738:49158): the Sky Sports 300x250 layout, talkSPORT's
   colours and Montserrat throughout. */
@font-face { font-family: 'Montserrat'; font-weight: 100 900; font-display: swap; src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype'); }

:root {
  --ts-bg-content: #111111;                 /* background/bg-content */
  --ts-border: #2b2b2b;                     /* border/border-content */
  --ts-text: #ffffff;                       /* text/text-primary */
  --ts-text-secondary: #a3a3a3;             /* text/text-secondary */
  --ts-positive: #3ce800;                   /* foreground/fg-positive */
  --ts-bg-primary: rgba(90, 90, 90, 0.4);   /* background/bg-primary, #5a5a5a at 40% */
  --ts-bar-empty: rgba(163, 163, 163, 0.4); /* border/border-primary, #a3a3a3 at 40% */
  --ts-scrollbar: rgba(163, 163, 163, 0.4);
  --ts-brand: #feed01;                      /* background/bg-brand-primary */
  --ts-on-brand: #1a1a1a;                   /* text/text-brand-secondary */
  --ts-font: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --ts-font-trend: var(--ts-font);
}

.ts-card {
  box-sizing: border-box;
  flex: none;
  width: 300px;
  height: 250px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ts-bg-content);
  border: 1px solid var(--ts-border);
  border-radius: 12px;
  font-family: var(--ts-font);
  color: var(--ts-text);
  -webkit-font-smoothing: antialiased;
}
.ts-card *, .ts-card *::before, .ts-card *::after { box-sizing: border-box; }
.ts-card p { margin: 0; }

/* ---------- header: acca ---------- */
.ts-head { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 8px; }
.ts-head.is-fixture { flex-direction: row; align-items: flex-start; gap: 8px; }
.ts-head-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ts-head-sub { font-weight: 500; font-size: 12px; line-height: 16px; color: var(--ts-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-title { font-weight: 700; font-size: 14px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* absMatchIcon: two 32px team discs overlapping by 8px */
.ts-match { flex: none; display: flex; width: 56px; height: 32px; isolation: isolate; }
.ts-match-team {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9999px;
  border: 1px solid rgba(113, 113, 123, 0.4); color: #fff;
  font: 700 8px/10px var(--ts-font); text-align: center;
}
.ts-match-team:first-child { margin-right: -8px; z-index: 2; }
.ts-match-team.is-light { color: var(--ts-on-brand); } /* dark text on a light kit colour; --ts-text is white on talkSPORT */

/* ---------- body: the scrolling list of legs ---------- */
.ts-body { position: relative; flex: 1 1 0; min-height: 0; padding: 0 14px; }
.ts-list {
  height: 100%; overflow-y: auto; scrollbar-width: none;
  --scroll-fade-b-size: var(--spacing-8); /* 32px, the depth of the card's fade in Figma */
  --scroll-fade-t-size: var(--spacing-3); /* 12px: shallow, so a leg scrolled to the top stays readable */
  --scroll-fade-reveal: 1px;               /* full depth from the first pixel of scroll, no growing */
  display: flex; flex-direction: column;
}
.ts-list::-webkit-scrollbar { display: none; }
.ts-card.is-acca .ts-list { gap: 6px; }
.ts-card.is-spin .ts-list { gap: 4px; }
.ts-card.is-bb .ts-list { gap: 8px; }
/* auto-playing accas: each leg docks flush at the top, where the first leg sits, so no top fade
   (the leg-to-top scroll reads this size and stops at it) */
.ts-autoplay .ts-list { --scroll-fade-t-size: 0px; }
.ts-autoplay .ts-list::after { content: ''; flex: none; height: var(--dock-space, 0px); margin-top: -6px; } /* cancels the list gap */
.ts-scroll { position: absolute; top: 0; bottom: 0; right: 5px; width: 4px; border-radius: 9999px; overflow: hidden; pointer-events: none; }
.ts-scroll-thumb { position: absolute; left: 0; width: 4px; border-radius: 9999px; background: var(--ts-scrollbar); }
/* the card fades its list top and bottom with ScrollFade; no scrollbar */
.ts-scroll { display: none; }

/* ---------- leg: acca (green marker) ---------- */
.ts-leg { flex: none; display: flex; flex-direction: column; gap: 2px; }
.ts-leg-top {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.ts-leg-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; justify-content: center; }
.ts-leg-title { font-weight: 700; font-size: 14px; line-height: 18px; }
.ts-leg-sub { font-weight: 500; font-size: 12px; line-height: 16px; color: var(--ts-text-secondary); }
/* every leg's marker is the same green box: Hit Rate %, Average number, Last Match tick */
/* one size for every box: the TrendIcon pinned 4px in (the same inset as top and bottom), the
   value centred in the rest, so 83%, 6.5 and the tick all sit alike. 60px fits the widest, "60%" */
.ts-mark {
  flex: none; width: 60px; height: 24px; border-radius: 6px; gap: 4px; padding: 0 4px;
  display: flex; align-items: center; justify-content: flex-start;
  /* talkSPORT's fg-positive green, at 14% for the box and full for the value (11:1 on the card) */
  background: rgba(60, 232, 0, 0.14); color: var(--ts-positive);
}
.ts-mark span { flex: 1 1 0; min-width: 0; text-align: center; font-weight: 700; font-size: 13px; line-height: 16px; font-variant-numeric: tabular-nums; }
.ts-mark svg { display: block; margin: 0 auto; }
/* room between the box and the leg's title */
.ts-leg-top:has(.ts-mark) { gap: 12px; }
/* the Bruno DS TrendIcon (src/TrendIcon) at size md: a 16px green square holding the variant's
   12px glyph, rocketLaunch / trendUp / shieldDouble, copied from src/Icon/glyphs. On talkSPORT the
   square is the brand's bright green, so the glyph is the card black (white would be 1.4:1) */
.ts-mark-icon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: var(--icon-size-md, 16px); height: var(--icon-size-md, 16px); border-radius: var(--radius-sm, 4px);
  background: var(--ts-positive); color: var(--ts-bg-content);
}
.ts-mark-icon::before {
  content: ''; display: block; width: var(--icon-size-xs, 12px); height: var(--icon-size-xs, 12px); background: currentColor;
  -webkit-mask: var(--mark-icon) center / contain no-repeat; mask: var(--mark-icon) center / contain no-repeat;
}
.ts-mark-icon.is-hit-rate { --mark-icon: url(icons/trend-rocketLaunch.svg); }
.ts-mark-icon.is-average { --mark-icon: url(icons/trend-trendUp.svg); }
.ts-mark-icon.is-last-match { --mark-icon: url(icons/trend-shieldDouble.svg); }

/* ---------- leg: bet builder (icon + stats toggle) ---------- */
.ts-bbleg { flex: none; display: flex; gap: 8px; align-items: flex-start; }
/* the leg icon and title sit centred on the 24px green marker's first line */
.ts-bbleg-icon { flex: none; width: 14px; height: 24px; display: flex; align-items: center; justify-content: center; }
.ts-bbleg-icon img, .ts-bbleg-icon svg { width: 14px; height: 14px; display: block; }
.ts-bbleg-content { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ts-bbleg-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ts-bbleg-row .ts-leg-title { flex: 1 1 0; min-width: 0; padding-top: 3px; }
.ts-stats-btn { flex: none; display: block; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.ts-leg-top:focus-visible, .ts-stats-btn:focus-visible, .ts-cta:focus-visible { outline: 2px solid var(--ts-brand); outline-offset: 2px; border-radius: 4px; }

/* ---------- TrendCard (Hit Rate) ---------- */
.ts-trend {
  display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 8px;
  background: var(--ts-bg-content); border: 1px solid var(--ts-border); border-radius: 4px;
  font-family: var(--ts-font-trend); 
}
.ts-trend[hidden] { display: none; }
.ts-trend p { margin: 0; }
.ts-trend-badge { display: flex; align-items: center; gap: 6px; }
.ts-trend-badge img { height: 10px; display: block; }
.ts-trend-badge p { display: flex; gap: 4px; font-size: 10px; line-height: 10px; white-space: nowrap; }
.ts-trend-badge b { font-weight: 700; color: var(--ts-text); }
.ts-trend-badge span { font-weight: 500; color: var(--ts-text-secondary); }
.ts-trend-figures { display: flex; gap: 6px; align-items: baseline; white-space: nowrap; }
.ts-trend-figures b { font-weight: 700; font-size: 12px; line-height: 12px; color: var(--ts-positive); }
.ts-trend-figures span { font-weight: 500; font-size: 10px; line-height: 12px; color: var(--ts-text-secondary); }
.ts-trend.is-last { padding: 10px; }
.ts-trend-last { display: flex; flex-direction: column; gap: 6px; }
.ts-trend-headline { font-weight: 700; font-size: 12px; line-height: 16px; color: var(--ts-positive); }
.ts-trend-context { font-weight: 500; font-size: 10px; line-height: 10px; color: var(--ts-text-secondary); white-space: nowrap; }
.ts-trend-strip { display: flex; gap: 2px; border-radius: 4px; overflow: hidden; }
.ts-trend-strip i { flex: 1 1 0; min-width: 0; height: 4px; background: var(--ts-bar-empty); }
.ts-trend-strip i.is-hit { background: var(--ts-positive); }
.ts-trend-rows { display: flex; flex-direction: column; gap: 8px; }
.ts-trend-row { display: flex; flex-direction: column; gap: 8px; }
.ts-trend-rowline { display: flex; justify-content: space-between; align-items: baseline; }
.ts-trend-rowline strong { font-weight: 700; font-size: 12px; line-height: 12px; color: var(--ts-text); }
.ts-trend-bars { display: flex; gap: 2px; height: 24px; align-items: flex-end; }
.ts-trend-bars i { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--ts-bar-empty); }
.ts-trend-bars i.is-hit { background: var(--ts-positive); }

/* ---------- footer ---------- */
.ts-foot { flex: none; display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; background: var(--ts-bg-content); }
/* absButton: the 24px talkSPORT BET logo, then what £10 returns */
.ts-cta {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; padding: 6px;
  border: 0; border-radius: 8px; background: var(--ts-brand); color: var(--ts-on-brand);
  font: inherit; cursor: pointer; overflow: hidden;
}
.ts-cta-logo { flex: none; width: 24px; height: 24px; border-radius: 4px; overflow: hidden; }
.ts-cta-logo img { width: 24px; height: 24px; display: block; }
.ts-cta-text { flex: 1 1 0; min-width: 0; text-align: center; font-weight: 700; font-size: 14px; line-height: 18px; }
.ts-terms { font-weight: 500; font-size: 8px; line-height: 10px; height: 10px; text-align: center; color: var(--ts-text-secondary); }

/* ---------- leg spinner ---------- */
.ts-spin-sub { display: flex; align-items: center; gap: 4px; font-weight: 500; font-size: 12px; line-height: 16px; color: var(--ts-text-secondary); }
.ts-spin-sub img { width: 12px; height: 12px; display: block; }
.ts-leg.is-compact { gap: 4px; }
.ts-leg.is-compact .ts-leg-title { font-size: 12px; line-height: 16px; }
.ts-leg.is-compact .ts-leg-sub { font-size: 10px; line-height: 12px; }
.ts-leg-row { display: flex; align-items: center; gap: 8px; }
.ts-leg-row .ts-leg-top { flex: 1 1 0; min-width: 0; }
.ts-spin-btn {
  flex: none; align-self: stretch; display: flex; align-items: flex-start; padding: 0;
  border: 0; background: none; cursor: pointer;
}
.ts-spin-btn span {
  display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 4px;
  border-radius: 8px; background: var(--ts-bg-primary);
}
.ts-spin-btn img { width: 16px; height: 16px; display: block; transition: transform 300ms ease; }
.ts-spin-btn.is-spun img { transform: rotate(180deg); }
.ts-spin-btn:focus-visible { outline: none; }
.ts-spin-btn:focus-visible span { box-shadow: inset 0 0 0 2px var(--ts-brand); }
.ts-leg.is-new .ts-leg-text { animation: ts-swap 300ms ease; }
@keyframes ts-swap { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }