/* US stock chart — the light line view and its tabs.
   Mirrors the Gulf chart's visual language on purpose: same teal, same restraint.
   Tokens only (Rule 9) — no raw hex that could drift from the design system. */
.usc-view-tabs,
.usc-chart-tabs {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-block-end: .75rem;
}

.usc-view-tab,
.usc-chart-tab {
    border: 1px solid var(--border, #e2e8f0);
    background: transparent;
    color: var(--text-muted, #6b7280);
    border-radius: 999px;
    padding: .35rem 1rem;
    font: inherit;
    font-size: .875rem;
    cursor: pointer;
    /* 44px is the touch target this project requires (Rule 42). Padding alone gave 32. */
    min-height: 44px;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.usc-view-tab:hover,
.usc-chart-tab:hover {
    border-color: var(--teal, #0E7C7B);
    color: var(--teal, #0E7C7B);
}

.usc-view-tab--active,
.usc-chart-tab--active {
    background: var(--teal, #0E7C7B);
    border-color: var(--teal, #0E7C7B);
    color: #fff;
}

.usc-view-tab:focus-visible,
.usc-chart-tab:focus-visible {
    outline: 2px solid var(--teal, #0E7C7B);
    outline-offset: 2px;
}

.usc-chart-canvas {
    inline-size: 100%;
}

.usc-chart-status {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted, #6b7280);
    font-size: .9375rem;
}