/* ==========================================
   YEAR OVER YEAR GROWTH CALCULATOR - NON-CRITICAL CSS
   ========================================== */

/* === INTERACTIVE STATES === */
.input-field:focus-within { border-color: #8b5cf6; box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15); }

/* === TAB ENHANCEMENTS === */
.tab-btn { transition: all 0.2s ease; }
.tab-btn:focus { outline: 2px solid #8b5cf6; outline-offset: 2px; }

/* === RESULT CARD TRANSITIONS === */
.result-card { transition: all 0.3s ease; }
.result-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); }

/* === COLOR CODING ANIMATIONS === */
.result-card.positive, .result-card.negative {
    animation: colorPulse 0.3s ease;
}

@keyframes colorPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* === FORMULA DISPLAY === */
.formula-display { transition: opacity 0.2s ease; }
.formula-display .katex-display { margin: 0.5em 0; }
.formula-display .katex { font-size: 1rem; }

/* === DESKTOP ENHANCEMENTS === */
@media (min-width: 769px) {
    .formula-section:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); }
}

/* === MOBILE ADJUSTMENTS === */
@media (max-width: 768px) {
    .result-value { font-size: 1.125rem; }
    .formula-display .katex { font-size: 0.9rem; }
}