/* -tabs.css (Logic only)
   Visual styling is now handled by -pill-tabs.css
*/

/* Hide the old dropdown controls completely */
#open-nav-label,
#open-nav-b-label,
#close-nav-label,
#close-nav-b-label,
#nav-ctrl,
#nav-b-ctrl {
    display: none !important;
}

/* Panel visibility */
#panels .container,
#panels-b .container {
    width: 100%;
    margin: 0 auto;
}

#panels section main,
#panels-b section main {
    overflow-y: hidden;
    box-sizing: border-box;
    max-height: 0;
    transition: opacity 400ms;
    opacity: 0;
    pointer-events: none; /* Prevent clicking hidden content */
}

#panels section.active main,
#panels-b section.active main {
    max-height: initial;
    padding: 32px 26px;
    animation: fade-in 0.4s ease-in-out;
    opacity: 1;
    pointer-events: auto;
}
.pill-panels-layout {
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    min-width: 600px;
}

@media all and (min-width: 900px) {
    .pill-panels-layout main {
        width: 100%;
        margin: 0;
    }
}

@media all and (max-width: 720px) {

    .pill-panels-layout {
        min-width: 320px;
    }
}

.panel-radios {
    position: fixed;
    top: -1100px;
    left: 50%;
    width: 20px;
    opacity: 0;
    z-index: -1 !important;
}

main p {
    line-height: 1.8;
}

@keyframes fade-in {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}