.clickable-icon { cursor: pointer; }

/* Stage colors (scoped) */
.vmf-stage-0 { background-color: #ff0000; }
.vmf-stage-10 { background-color: #cc0000; }
.vmf-stage-20 { background-color: #cc3300; }
.vmf-stage-30 { background-color: #ff6600; }
.vmf-stage-40 { background-color: #ff9933; }
.vmf-stage-50 { background-color: #f1c101; }
.vmf-stage-60 { background-color: #0055ff; }
.vmf-stage-70 { background-color: #3267cc; }
.vmf-stage-80 { background-color: #00a600; }
.vmf-stage-90 { background-color: #00d800; }

/* Layout and text */
.progress { position: relative; background-color: #6c757d !important; }
.vmf-label { line-height: 1.1; }
.vmf-title { white-space: nowrap; min-width: 0; align-items: baseline !important; }
.vmf-wrap { margin-top: 0.5rem; }

/* Unavailable/placeholder state handling */
.valuebar-container .valuebar-placeholder { display: none; }
.valuebar-container.valuebar-unavailable .vmf-wrap { display: none; }
.valuebar-container.valuebar-unavailable .valuebar-placeholder { display: block; }
.vmf-chip-disabled { background-color: #adb5bd; color: #fff; }

/* Chip and score */
.vmf-chip { display: inline-block; vertical-align: baseline; padding: 2px 6px; border-radius: 999px; font-weight: 600; font-size: 11px; color: #fff; line-height: 1.1; }
.vmf-score-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; white-space: nowrap; color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.45); font-size: clamp(11px, 2.5vw, 13px); }

/* Responsive label shortening */
.label-short, .label-xs { display: none; }
@media (max-width: 420px) {
  .label-full { display: none; }
  .label-short { display: inline; }
}
@media (max-width: 340px) {
  .label-short { display: none; }
  .label-xs { display: inline; }
}