/**
 * Choice Trade-offs Styles - Sprint 3
 * Styles for trade-off indicators
 */

/* ============================================
   TRADEOFF INDICATORS
   ============================================ */

.tradeoff-indicators {
    display: inline-flex;
    gap: 0.25rem;
    margin-left: 0.5rem;
    align-items: center;

.tradeoff-indicator {
    display: inline-block;
    font-size: 1rem;
    cursor: help;
    transition: transform 0.2s;
    line-height: 1;

.tradeoff-indicator:hover {
    transform: scale(1.2);

/* Type-specific styling */
.tradeoff-resource {
    filter: drop-shadow(0 0 2px rgba(var(--color-warning-rgb, 255, 193, 7), 0.5));

.tradeoff-risk {
    filter: drop-shadow(0 0 2px rgba(244, 67, 54, 0.5));
    animation: riskPulse 2s infinite;

@keyframes riskPulse {
    0%, 100% {
        opacity: 1;

    50% {
        opacity: 0.7;

.tradeoff-time {
    filter: drop-shadow(0 0 2px rgba(74, 144, 226, 0.5));

.tradeoff-relationship {
    filter: drop-shadow(0 0 2px rgba(var(--color-success-rgb, 92, 184, 92), 0.5));

.tradeoff-moral {
    filter: drop-shadow(0 0 2px rgba(156, 39, 176, 0.5));

.tradeoff-strategic {
    filter: drop-shadow(0 0 2px rgba(255, 152, 0, 0.5));

/* ============================================
   RESPECT REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .tradeoff-indicator,
    .tradeoff-risk {
        animation: none;
        transition: none;

}}}}}}}}}}}}}}