/* ============================================
   UI Enhancement Layer — readability & touch
   Loaded AFTER styles.css on every page.
   ============================================ */

/* Some pages reference --text-main / --text-muted which were never
   defined; give them real values so those texts stop falling back
   to low-contrast inherited colors. */
:root {
    --text-main: #1d1d1f;
    --text-muted: #55555e;
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-main: #e2e8f0;
        --text-muted: #94a3b8;
    }
}

/* Smooth anchor scrolling that doesn't hide content under the fixed nav */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

/* Numbers in stat cards/tables align vertically — easier to compare */
.stat-value,
.stat-change,
.stat-delta,
.metric-value {
    font-variant-numeric: tabular-nums;
}

/* Keyboard/assistive focus is clearly visible */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* --------------------------------------------
   Toggle buttons (SPY/QQQ, SPX/NDX …)
   Previously nearly invisible on the light
   glass background. Give them real contrast.
   -------------------------------------------- */
.toggle-btn {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.14);
    color: var(--text-main);
    min-width: 84px;
}

.toggle-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.toggle-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 2px 10px rgba(0, 113, 227, 0.35);
}

@media (prefers-color-scheme: dark) {
    .toggle-btn {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.18);
    }
}

/* --------------------------------------------
   Charts: allow vertical page scroll to pass
   through while the chart keeps horizontal
   pan/pinch gestures for itself.
   -------------------------------------------- */
.chart-container,
.chart-container-sm,
#chart,
#chart-leverage,
#index-chart,
#product-chart,
#trend-chart,
#ranking-chart,
#model-trend-chart,
#usage-trend-chart,
#model-usage-trend-chart,
#chart-container,
#avg-return-chart,
#win-rate-chart {
    touch-action: pan-y;
}

/* --------------------------------------------
   Touch devices: comfortable hit areas
   -------------------------------------------- */
@media (pointer: coarse) {
    .btn,
    .toggle-btn,
    .filter-btn,
    .filter-tab,
    .nav-action,
    .read-more {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* 16px stops iOS Safari from auto-zooming into the control */
    .styled-select,
    select,
    input[type="text"],
    input[type="password"] {
        font-size: 16px !important;
        min-height: 44px;
    }
}

/* --------------------------------------------
   Mobile navigation — styles.css hides the nav
   links entirely on phones, leaving sub-pages
   with no way back to sections. Show them as a
   compact row instead.
   -------------------------------------------- */
@media (max-width: 768px) {
    .nav-content {
        padding: 0.6rem 1rem;
        flex-wrap: wrap;
        row-gap: 0.25rem;
    }

    .nav-links {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        margin-left: 0;
        margin-right: 0.5rem;
    }

    .nav-links a {
        display: inline-block;
        font-size: 0.82rem;
        padding: 0.35rem 0;
    }

    .nav-links .btn {
        margin-left: 0.25rem !important;
    }

    .nav-action {
        font-size: 0.82rem;
        padding: 0.4rem 0.8rem;
    }

    /* Slightly larger base text on small screens */
    .section-header p,
    .item-card p {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    /* Legend/hint rows: stack instead of squeezing */
    .chart-legend-row {
        gap: 0.6rem 1rem;
        padding: 0.6rem 0.8rem;
    }
}

/* Very small phones: keep stat numbers from overflowing */
@media (max-width: 380px) {
    .stat-value {
        font-size: 1.3rem !important;
    }
}