/* The Betting Roundup's board (components/roundup-matchups.html): featured
   game cards over the two team colors, then the rest of the ranked games as
   rows. Team colors come in as --away / --home, lifted to read on dark. */
.rb { --rb-kalshi: #00a878; margin: 18px 0 22px; }
html:not(.si-light) .rb { --rb-kalshi: #00ce8e; }
.rb a { color: inherit; text-decoration: none; }

/* ---- featured cards ---- */
.rb-featured { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rb-card {
  display: flex; flex-direction: column; overflow: hidden; border-radius: var(--tl-r-card, 10px);
  border: 1px solid var(--tl-line-10); background: var(--tl-card-body);
  transition: border-color .15s var(--tl-ease, ease), transform .15s var(--tl-ease, ease);
}
.rb-card:hover { border-color: var(--tl-line-20); transform: translateY(-1px); }

.rb-hero {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 6px; padding: 18px 14px 14px; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(circle, var(--tl-line-10) 1px, transparent 1.4px) 0 0 / 8px 8px,
    linear-gradient(110deg,
      color-mix(in srgb, var(--away) 34%, transparent) 0 49.6%,
      color-mix(in srgb, var(--home) 34%, transparent) 50.4% 100%);
}
.rb-hero::after {            /* the seam between the two colors */
  content: ""; position: absolute; inset: -10% auto -10% 50%; width: 1px; z-index: -1;
  background: var(--tl-line-20); transform: rotate(20deg);
}
.rb-ghost {
  position: absolute; z-index: -1; width: 150px; height: 150px; object-fit: contain;
  opacity: .16; filter: saturate(1.2); pointer-events: none;
}
.rb-ghost.is-away { left: -42px; top: -30px; transform: rotate(-12deg); }
.rb-ghost.is-home { right: -42px; bottom: -36px; transform: rotate(12deg); }

.rb-card .rb-team { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.rb-card .rb-logo { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.rb-name { font-size: 13px; font-weight: 600; color: var(--tl-ink); line-height: 1.2; max-width: 100%; }
.rb-name i { font-style: normal; font-family: var(--tl-mono); font-size: 11px; color: var(--tl-ink-50); font-weight: 500; }
.rb-px { font-family: var(--tl-mono); font-size: 13px; font-weight: 600; color: var(--tl-ink-50); }
.rb-card .rb-px { font-size: 20px; letter-spacing: -.02em; }
.rb-team.is-fav .rb-px { color: var(--tl-ink); }
.rb-mid { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rb-at { font-family: var(--tl-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--tl-ink-50); }
.rb-kick { font-family: var(--tl-mono); font-size: 11px; color: var(--tl-ink-70); white-space: nowrap; }

/* the win-chance split: away color from the left, home color the rest */
.rb-split { display: block; height: 6px; background: var(--home); position: relative; }
.rb-split i { display: block; height: 100%; background: var(--away); box-shadow: 2px 0 0 var(--tl-card-body); }

.rb-chart { display: block; position: relative; padding: 10px 40px 4px 14px; }
.rb-chart-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rb-chart-head { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--tl-ink-60); margin: 0 -26px 6px 0; }
.rb-chart-head .spacer { flex: 1; }
.rb-key { display: inline-flex; align-items: center; gap: 4px; font-family: var(--tl-mono); font-size: 10.5px; }
.rb-key img { border-radius: 3px; }
.rb-key.is-novig::before, .rb-key.is-kalshi::before { content: ""; width: 10px; height: 2px; border-radius: 1px; }
.rb-key.is-novig::before { background: var(--tl-ink); }
.rb-key.is-kalshi::before { background: var(--rb-kalshi); }
.rb-chart svg { display: block; width: 100%; height: 64px; overflow: visible; }
.rb-line { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.rb-line.is-novig { stroke: var(--tl-ink); }
.rb-line.is-kalshi { stroke: var(--rb-kalshi); opacity: .85; }
.rb-range {
  position: absolute; right: 12px; top: 30px; bottom: 2px; display: flex; flex-direction: column;
  justify-content: space-between; font-family: var(--tl-mono); font-size: 9.5px; color: var(--tl-ink-45);
  pointer-events: none;
}

.rb-lines { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--tl-line-08); margin-top: 8px; }
.rb-lines > span { display: flex; flex-direction: column; gap: 2px; padding: 9px 14px; font-family: var(--tl-mono); font-size: 12.5px; color: var(--tl-ink); white-space: nowrap; }
.rb-lines > span + span { border-left: 1px solid var(--tl-line-08); }
.rb-lines em { font-style: normal; font-family: var(--tl-font); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--tl-ink-50); }

/* ---- rows ---- */
.rb-rows { border: 1px solid var(--tl-line-10); border-radius: var(--tl-r-card, 10px); overflow: hidden; background: var(--tl-card-body); }
.rb-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) 132px 84px; align-items: center;
  gap: 12px; padding: 9px 14px; transition: background .12s;
}
.rb-row + .rb-row { border-top: 1px solid var(--tl-line-06); }
.rb-more { margin: 0; border-top: 1px solid var(--tl-line-06); }
.rb-more > .rb-row { border-top: 1px solid var(--tl-line-06); }
.rd-body .rb-more > summary, .rb-more > summary {
  display: flex; justify-content: center; align-items: center; gap: 6px; margin: 0; padding: 10px 14px; cursor: pointer;
  list-style: none; font: 500 12px var(--tl-mono); color: var(--tl-ink-60); }
.rb-more > summary::-webkit-details-marker { display: none; }
.rd-body .rb-more > summary::after, .rb-more > summary::after {      /* ours, in place of Pico's chevron image */
  content: "▾"; display: inline-block; float: none; width: auto; height: auto; margin: 0;
  background: none; font-size: 11px; line-height: 1; transform: none; transition: transform .15s; }
.rb-more > summary:hover { color: var(--tl-ink); background: var(--tl-line-05); }
.rb-more[open] > summary { order: 2; }
.rd-body .rb-more[open] > summary::after, .rb-more[open] > summary::after { transform: rotate(180deg); }
.rb-more-close, .rb-more[open] .rb-more-open { display: none; }
.rb-more[open] .rb-more-close { display: inline; }
.rb-more[open] { display: flex; flex-direction: column; }
.rb-more:not([open]) > .rb-row { display: none; }
.rb-row:hover { background: var(--tl-line-05); }
.rb-row .rb-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rb-row .rb-team.is-home { justify-content: flex-end; }
.rb-row .rb-logo { width: 22px; height: 22px; object-fit: contain; flex: none; }
.rb-row .rb-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.rb-row .rb-px { flex: none; }
.rb-row .rb-split { height: 4px; border-radius: 2px; overflow: hidden; }
.rb-meta, .rb-row .rb-kick { font-family: var(--tl-mono); font-size: 11.5px; color: var(--tl-ink-60); white-space: nowrap; }
.rb-row .rb-kick { text-align: right; }
.rb-dot { margin: 0 5px; color: var(--tl-ink-45); }
.rb-ab { display: none; }
.rd-body .rb-asof, .rb-asof { display: flex; align-items: center; gap: 7px; margin: -12px 0 20px; font: 11.5px var(--tl-mono); color: var(--tl-ink-50); }

@media (max-width: 640px) {
  .rb-featured { grid-template-columns: 1fr; }
  .rb-row { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); row-gap: 4px; }
  .rb-meta { grid-column: 1 / 3; }
  .rb-row .rb-kick { grid-column: 3; }
  .rb-row .rb-full { display: none; }
  .rb-row .rb-ab { display: inline; }
}