/**
 * Signal Card Component Styles
 * 
 * 5-level diverging scale:
 *   under → under-slight → optimal → over-slight → over
 *   (purple)   (blue)      (green)    (yellow)     (red)
 */

.signal-card {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--bg-page);
    border-left: 3px solid transparent;
}

/* Under range (cool tones) */
.signal-card--under {
    border-left-color: var(--signal-under);
    background: var(--signal-under-bg);
}

.signal-card--under-slight {
    border-left-color: var(--signal-under-slight);
    background: var(--signal-under-slight-bg);
}

/* Optimal (in range) */
.signal-card--optimal {
    border-left-color: var(--signal-optimal);
    background: var(--signal-optimal-bg);
}

/* Over range (warm tones) */
.signal-card--over-slight {
    border-left-color: var(--signal-over-slight);
    background: var(--signal-over-slight-bg);
}

.signal-card--over {
    border-left-color: var(--signal-over);
    background: var(--signal-over-bg);
}

.signal-card__content {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
}

.signal-card__nutrient {
    font-weight: var(--font-medium);
    color: var(--text-primary);
}

.signal-card__message {
    color: var(--text-muted);
    font-size: var(--text-md);
    margin-left: auto;
}

/* Values display (for dashboard) */
.signal-card__values {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-left: auto;
    font-size: 0.875rem;
}

.signal-card__current {
    font-weight: 600;
    color: var(--text-primary);
}

.signal-card__target {
    color: var(--text-muted);
}

.signal-card__unit {
    color: var(--text-muted);
    font-size: 0.75rem;
}