/* TrendCard - Figma: TrendCardBetfred (node 9:24772), variants Hit Rate|Average|Last Match x Player|Team|Match.
   Values below are taken from the Figma design and must not be tuned. */

.tc-card {
  box-sizing: border-box;
  width: var(--tc-card-width, 237px);
  background: #ffffff;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tc-card *,
.tc-card *::before,
.tc-card *::after { box-sizing: border-box; }

/* Figma draws the 1px stroke inside the frame, so it must not add to the hugged
   height. Painted over the content rather than as a border, so it carries on
   across the footer instead of being covered by it. */
.tc-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--tc-border);
  pointer-events: none;
}

/* The card hugs its content: a one-line headline does not leave dead space and a
   three-line one grows the card. With the design's own padding and gaps that comes
   out at the Figma heights (96 / 104 / 112) wherever the content is the designed
   length. */

.tc-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 10px 8px;
}

/* the Last Match variants keep the even 10px they were drawn with */
.tc-card[data-tc-variant="last-match"] .tc-body {
  padding: 10px;
}

.tc-header {
  display: flex;
  gap: 4px;
  align-items: baseline;
  font-size: 11px;
  letter-spacing: 0.3px;
  word-break: break-word;
}
.tc-card[data-tc-type="team"] .tc-header { gap: 6px; }
.tc-header .tc-name {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  line-height: 11px;
  color: var(--tc-ink);
  white-space: nowrap;
}
.tc-header .tc-market {
  flex: 1 0 0;
  min-width: 1px;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  line-height: 11px;
  color: var(--tc-ink-muted);
}

.tc-stat { display: flex; flex-direction: column; gap: 8px; }
.tc-rows { display: flex; flex-direction: column; gap: 8px; }

.tc-statline {
  display: flex;
  gap: 6px;
  align-items: baseline;
  letter-spacing: 0.3px;
  white-space: nowrap;
  word-break: break-word;
}
.tc-statline .tc-code {
  flex: 1 0 0;
  min-width: 1px;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 11px;
  color: var(--tc-ink);
  white-space: normal;
}
.tc-value {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 12px;
  /* background-clip:text paints only inside the line box, and the design sets a
     12px line on 12px type: give the glyphs room without moving the layout */
  padding-block: 2px;
  margin-block: -2px;
  background-image: var(--tc-emphasis);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tc-matches {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 11px;
  color: var(--tc-ink-muted);
}

/* BarChart */
.tc-bars {
  display: flex;
  gap: 2px;
  height: 24px;
  align-items: flex-end;
  overflow: hidden;
}
.tc-bar-slot {
  flex: 1 0 0;
  min-width: 1px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}
.tc-bar {
  width: 100%;
  border-radius: 2px;
  background: var(--tc-fill);
}
.tc-bar.tc-miss { height: 2px; background: var(--tc-miss); }
/* a match that fell short of the line keeps its height, loses the colour */
.tc-bar.tc-miss-bar { background: var(--tc-miss); }

/* GridChart */
.tc-grid { display: flex; gap: 0; align-items: center; overflow: hidden; }
.tc-grid-inner {
  display: flex;
  flex: 1 0 0;
  min-width: 1px;
  gap: 2px;
  align-items: center;
  overflow: hidden;
  border-radius: 4px;
}
.tc-cell {
  flex: 1 0 0;
  min-width: 1px;
  height: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--tc-cell-miss-bg);
}
.tc-cell.tc-hit { background: var(--tc-fill); }

/* Every grid is a 4px block strip with no cell labels
   (Figma 9:24895, 13:27273, 9:25065, 13:27294) */
.tc-grid,
.tc-grid-inner,
.tc-cell {
  height: 4px;
}
.tc-card[data-tc-type="match"][data-tc-variant="average"] .tc-code {
  font-size: 12px;
  line-height: 12px;
}

/* Last Match */
.tc-last { display: flex; flex-direction: column; }
.tc-last-inner { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.tc-headline {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.3px;
  word-break: break-word;
  /* background-clip:text paints only inside the line box, and the design sets a
     12px line on 12px type: give the glyphs room without moving the layout */
  padding-block: 2px;
  margin-block: -2px;
  background-image: var(--tc-emphasis-headline);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tc-context {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: flex-end;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 11px;
  letter-spacing: 0.3px;
  color: var(--tc-ink-muted);
  white-space: nowrap;
}

/* Footer */
.tc-footer {
  margin-top: auto;
  background: var(--tc-footer-bg);
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  overflow: hidden;
}
.tc-footer .tc-icon { width: 10px; height: 10px; display: block; flex: none; }
.tc-footer .tc-icon.tc-icon-avg { width: 14px; height: 10px; }
.tc-badge {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.tc-badge b {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  line-height: 11px;
  /* background-clip:text paints only inside the line box, and the design sets a
     12px line on 12px type: give the glyphs room without moving the layout */
  padding-block: 2px;
  margin-block: -2px;
  background-image: var(--tc-emphasis-badge);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tc-badge span {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  line-height: 11px;
  color: var(--tc-ink-muted);
}

/* 8px below an open stats panel, so the card is clear of the leg beneath it.
   Legs with their stats closed keep the app's own spacing. */
.tc-card {
  margin-bottom: 8px;
}

/* Scrollbars: no track behind the bar (the tile shows through) and the bar itself
   at 50%, so it sits back from the content. */
*,
.scrollbar-thin,
[data-testid="extendable-content"],
[data-testid="ScrollableList"] .overflow-y-auto {
  scrollbar-color: var(--tc-scrollbar) transparent;
}
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
  background: transparent;
}
*::-webkit-scrollbar-thumb,
.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: var(--tc-scrollbar);
}
/* the carousel's own bar keeps its own colour, just at 50% */
.scrollbar-short {
  scrollbar-color: var(--tc-scrollbar-carousel) transparent;
}
.scrollbar-short::-webkit-scrollbar-thumb {
  background-color: var(--tc-scrollbar-carousel);
}
.scrollbar-thin::-webkit-scrollbar-track,
.scrollbar-short::-webkit-scrollbar-track {
  background: transparent;
}