/* Climate Curves — Responsive & Accessibility Styles */

/* ── Mobile responsiveness ─────────────────────────────────────────────────── */

/* Two-column grids collapse to single column on mobile */
@media (max-width: 768px) {
    /* Override inline grid styles */
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="gridTemplateColumns"] {
        display: block !important;
    }

    /* Stack stat cards vertically */
    div[style*="flexWrap: wrap"] {
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Full-width dropdowns on mobile */
    div[style*="paddingLeft: 40px"] {
        padding-left: 10px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* Dropdown width */
    .Select {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ── Tab styling ───────────────────────────────────────────────────────────── */

.tab-container {
    border-bottom: 1px solid #374151;
}

/* ── Accessibility improvements ────────────────────────────────────────────── */

/* Minimum font sizes */
.js-plotly-plot .plotly .annotation-text {
    font-size: 11px !important;
}

/* Focus outlines for keyboard navigation */
.tab:focus,
.Select:focus-within,
button:focus {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px;
}

/* Better contrast for details/summary */
details summary:hover {
    color: #fbbf24 !important;
}

/* ── Glossary columns collapse on mobile ───────────────────────────────────── */
@media (max-width: 768px) {
    div[style*="columns: 2"] {
        columns: 1 !important;
    }
}

/* ── Print styles ──────────────────────────────────────────────────────────── */
@media print {
    .tab-container,
    .Select,
    details {
        display: none !important;
    }

    div[style*="backgroundColor: #111827"] {
        background-color: white !important;
        color: black !important;
    }
}