/*
 * Talking Time ProgrammeSwitcher styles.
 *
 * The switcher pill is rendered inside the app header so its
 * positioning is negotiated with the parent; here we only define the
 * element's own shape / colour. Every selector is scoped under
 * ``.tt-area`` — when the root class is ``.lingo-area`` the switcher
 * is still rendered but the styles come from the LINGO-side equivalent
 * (future work — out of scope for Phase 5 of this spec; for now the
 * switcher is styled identically on both sides).
 *
 * Requirement 4.1, 5.6, 5.5
 */

.tt-area .tt-programme-switcher {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.12);
    color: var(--tt-text-inverse);
    font-family: var(--tt-font-base);
    font-size: var(--tt-font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.tt-area .tt-programme-switcher:hover,
.tt-area .tt-programme-switcher:focus-visible {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
    outline: none;
}

.tt-area .tt-programme-switcher__label {
    white-space: nowrap;
}

/* Note: under the Task 5.3 rework, the LINGO-side switcher was removed
 * from the LINGO header and replaced with a TT_Entry_Card on the LINGO
 * dashboard. This component is now only rendered on the TT side (via
 * TTHeader), so all selectors here are safely scoped to .tt-area.
 */