.container {
    display: flex;
    justify-content: center;
    padding: 20px 20px; /* More breathing room at the top */
    width: 100%;
}

.switch {
    position: relative;
    display: flex;
    height: 50px; /* Made it taller/bigger */
    width: 100%;
    max-width: 500px; /* Wider for desktop */
    background-color: #eeeeee; /* Brighter light gray */
    border-radius: 50px;
    padding: 5px; 
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); /* Inner shadow for depth */
}

.switch-label {
    flex: 1;
    font-weight: 600;
    position: relative;
    z-index: 2;
    line-height: 50px; /* Matches new height */
    font-size: 18px;   /* Slightly bigger font */
    color: #666;       /* Dimmed color for non-selected */
    text-align: center;
    cursor: pointer;
    transition: color 0.4s ease;
}

.switch-input {
    display: none;
}

/* Selected Text Color */
.switch-input:checked + .switch-label {
    color: var(--axis-white);
}

/* The "Pill" Selector */
.switch-selector {
    position: absolute;
    z-index: 1;
    top: 5px;
    left: 5px;
    width: calc(33.33% - 7px); /* Adjusting for padding */
    height: 50px;
    background-color: var(--axis-black);
    border-radius: 50px;
    /* This shadow makes the black pill look like it's "floating" */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* Smoother "Springy" animation */
    transition: transform 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

/* Logic for the slide */
#switch-y:checked ~ .switch-selector {
    transform: translateX(0%);
}
#switch-i:checked ~ .switch-selector {
    transform: translateX(100%);
}
#switch-n:checked ~ .switch-selector {
    transform: translateX(200%);
}

@media (max-width: 480px) {
    .switch {
        height: 45px; /* Shorter for mobile */
    }
    .switch-label {
        font-size: 13px; /* Smaller font so "In Progress" doesn't wrap */
        line-height: 45px;
    }
    .switch-selector {
        height: 45px;
    }
}