/* Comps & Bans page extras (lane: comps-bans): walkout comps (C2) + hero
   co-occurrence (C3). Theme tokens only, so night + day both work. Rate signal is an
   inside-row dot in the rate color (design.md anti-vibe rule: NO colored edge stripes
   / side brackets as a category signal). */

.cb-walkout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 10px;
}

@media (max-width: 760px) {
  .cb-walkout-grid {
    grid-template-columns: 1fr;
  }
}

.cb-walkout-col {
  min-width: 0;
}

.cb-walkout-col h3 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--FG_COLOR);
}

.cb-walkout-col .cb-note,
.cb-note {
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--FG_DIM);
}

.cb-empty {
  padding: 18px;
  margin: 0;
  font-size: 12px;
  color: var(--FG_DIM);
  text-align: center;
}

/* Inside-row category/rate dot (replaces any edge stripe). currentColor picks up the
   rate-good/mid/bad text color set on the cell, staying theme-correct. */
.cb-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  opacity: 0.9;
}

.cb-dot.rate-good { color: var(--ACCENT_GREEN); }
.cb-dot.rate-mid { color: var(--ACCENT_YELLOW); }
.cb-dot.rate-bad { color: #FF6B6B; }
.cb-dot:not(.rate-good):not(.rate-mid):not(.rate-bad) { color: var(--FG_DIM); }

.cb-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-size: 12px;
  color: var(--FG_COLOR);
}

.cb-hero-chip img {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  object-fit: cover;
  background: var(--BG_CARD);
}

.cb-join {
  color: var(--FG_DIM);
  font-size: 11px;
  font-weight: 600;
  padding: 0 2px;
}