/* ============================================
   MADx Hub — Weather Strip
   ============================================ */

.weather-strip {
    background: #0d0d1f;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 3px 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    height: 22px;
    min-height: 22px;
}

.wx-data {
    display: flex;
    align-items: center;
    gap: 0;
}

.wx-sep {
    color: rgba(255, 255, 255, 0.15);
    margin: 0 8px;
}

.wx-temp {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.wx-wind {
    color: rgba(255, 255, 255, 0.75);
}

.wx-humidity {
    color: rgba(255, 255, 255, 0.6);
}

.wx-dewpoint {
    color: rgba(255, 255, 255, 0.6);
}

.wx-spread {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
}

.wx-condition {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.wx-icon {
    font-size: 10px;
}

/* ── Condition states ── */

.wx-favorable {
    color: #00ff88;
}

.wx-normal {
    color: rgba(255, 255, 255, 0.6);
}

.wx-neutral {
    color: #ffff00;
}

.wx-info {
    color: #00d9ff;
}

.wx-caution {
    color: #ffa500;
}

.wx-unfavorable {
    color: #ff4444;
}

/* ── Meta (station + time) ── */

.wx-meta {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    white-space: nowrap;
}

/* ── Loading / error states ── */

.wx-loading {
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
    font-size: 10px;
}

.wx-error {
    color: rgba(255, 100, 100, 0.5);
    font-size: 10px;
    font-style: italic;
}

/* ── Mobile ── */

@media (max-width: 768px) {
    .weather-strip {
        font-size: 10px;
        padding: 2px 8px;
        flex-wrap: wrap;
        height: auto;
        min-height: 20px;
    }

    .wx-humidity,
    .wx-dewpoint,
    .wx-meta {
        display: none;
    }

    .wx-sep {
        margin: 0 4px;
    }
}