/* Conviction — styles injected into the fomo.family page (badges only).
   Everything else (cards, HUD, drawer) lives in a shadow root. */

.cv-badge {
  all: unset;
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: none !important;
  height: 18px;
  min-width: 26px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  font: 700 11px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--cv-fg);
  background: color-mix(in srgb, var(--cv-c) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cv-c) 55%, transparent);
  cursor: pointer;
  vertical-align: middle;
  white-space: nowrap;
  user-select: none;
  transition: transform 0.12s ease, background 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  z-index: 2;
}
.cv-badge:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--cv-c) 28%, transparent);
}
.cv-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cv-c);
  box-shadow: 0 0 6px var(--cv-c);
}
.cv-badge .cv-g {
  opacity: 0.7;
  font-weight: 600;
}
.cv-badge[data-style="dot"] { min-width: 0; padding: 0; width: 10px; height: 10px; background: var(--cv-c); box-shadow: 0 0 8px var(--cv-c); }
.cv-badge[data-style="dot"]::before, .cv-badge[data-style="dot"] span { display: none; }

.cv-badge.cv-bump { animation: cv-bump 0.6s ease; }
@keyframes cv-bump {
  0% { box-shadow: inset 0 0 0 1px var(--cv-c), 0 0 0 0 var(--cv-c); }
  100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cv-c) 55%, transparent), 0 0 0 8px transparent; }
}

.cv-badge[data-tone="s"] { --cv-c: #2ee6a6; --cv-fg: #b9ffe6; }
.cv-badge[data-tone="a"] { --cv-c: #7be86b; --cv-fg: #d4ffcb; }
.cv-badge[data-tone="b"] { --cv-c: #c6f04a; --cv-fg: #efffc2; }
.cv-badge[data-tone="c"] { --cv-c: #ffd23f; --cv-fg: #fff0b8; }
.cv-badge[data-tone="d"] { --cv-c: #ff9147; --cv-fg: #ffd9bf; }
.cv-badge[data-tone="f"] { --cv-c: #ff4d6a; --cv-fg: #ffc4ce; }
.cv-badge[data-tone="x"] { --cv-c: #6b7280; --cv-fg: #c7cbd4; }

/* rows below the user's threshold */
.cv-dim { opacity: 0.32 !important; filter: grayscale(0.7); transition: opacity 0.2s ease; }
.cv-dim:hover { opacity: 0.85 !important; filter: none; }
.cv-hidden-badges .cv-badge { display: none !important; }
.cv-watch-row { box-shadow: inset 2px 0 0 #c6f04a; }