/*
 * RadarČeska — Rail Live Intelligence UX v1.1.0
 *
 * Mobile-only compression of the 30-minute trend.
 * Base Rail Live Intelligence remains untouched.
 */

.rli-ux-trend-tabs{
    display:none;
}


@media(max-width:780px){

    /*
     * Slightly reduce visual dead space between Rail Intelligence
     * and the Station Intelligence card beneath it.
     */
    #railLiveIntelligence{
        margin-bottom:10px;
    }


    /*
     * The current-delay ranking is the primary live signal.
     * Four trains are enough on a phone.
     */
    #rliDelayedList
    > *:nth-child(n+5){
        display:none;
    }


    /*
     * Mobile 30-minute trend:
     *
     * instead of rendering "Nabral" + "Stáhl" vertically,
     * let the visitor switch between them.
     */
    #railLiveIntelligence.rli-ux-v110
    .rli-ux-trend-tabs{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:4px;

        margin:0 11px 8px;
        padding:4px;

        border:1px solid #e0e7e7;
        border-radius:13px;

        background:#f3f6f6;
    }


    #railLiveIntelligence.rli-ux-v110
    .rli-ux-trend-tab{
        appearance:none;
        -webkit-appearance:none;

        display:flex;
        align-items:center;
        justify-content:center;
        gap:6px;

        min-width:0;
        min-height:38px;

        padding:0 10px;

        border:0;
        border-radius:9px;

        background:transparent;

        color:#728287;

        font:inherit;
        font-size:10px;
        font-weight:800;

        cursor:pointer;

        -webkit-tap-highlight-color:transparent;
    }


    #railLiveIntelligence.rli-ux-v110
    .rli-ux-trend-tab small{
        color:#96a2a5;

        font-size:8px;
        font-weight:700;
    }


    #railLiveIntelligence.rli-ux-v110
    .rli-ux-trend-tab.is-active{
        background:#fff;

        color:#263e44;

        box-shadow:
            0 1px 5px rgba(28,48,54,.09);
    }


    #railLiveIntelligence.rli-ux-v110
    .rli-ux-trend-tab.is-active small{
        color:#78898d;
    }


    /*
     * Hide both panels first.
     */
    #railLiveIntelligence.rli-ux-v110
    .rli-trend-section[
        data-rli-ux-trend
    ]{
        display:none;
    }


    /*
     * Then reveal the selected direction.
     */
    #railLiveIntelligence.rli-ux-v110[
        data-rli-ux-trend-active="gained"
    ]
    .rli-trend-section[
        data-rli-ux-trend="gained"
    ]{
        display:block;
    }


    #railLiveIntelligence.rli-ux-v110[
        data-rli-ux-trend-active="recovered"
    ]
    .rli-trend-section[
        data-rli-ux-trend="recovered"
    ]{
        display:block;
    }


    /*
     * The tab already explains whether delay increased or decreased,
     * therefore the old secondary NABRAL/STÁHL bar is redundant
     * on mobile.
     */
    #railLiveIntelligence.rli-ux-v110
    .rli-trend-section[
        data-rli-ux-trend
    ]
    .rli-trend-label{
        display:none;
    }


    /*
     * TOP 2 only in each 30-minute direction.
     */
    #railLiveIntelligence.rli-ux-v110
    #rliGainedList
    > *:nth-child(n+3),

    #railLiveIntelligence.rli-ux-v110
    #rliRecoveredList
    > *:nth-child(n+3){
        display:none;
    }


    /*
     * Keep methodology visible, just remove unnecessary vertical
     * fragmentation on a phone.
     */
    #railLiveIntelligence
    .rli-method{
        margin-top:8px;

        font-size:9px;
        line-height:1.45;
    }


    #railLiveIntelligence
    .rli-method span{
        display:inline;
    }


    #railLiveIntelligence
    .rli-method span + span::before{
        content:" ";
    }
}


@media(max-width:430px){

    #railLiveIntelligence.rli-ux-v110
    .rli-ux-trend-tabs{
        margin-left:9px;
        margin-right:9px;
    }


    #railLiveIntelligence.rli-ux-v110
    .rli-ux-trend-tab{
        min-height:36px;

        font-size:9px;
    }


    #railLiveIntelligence.rli-ux-v110
    .rli-ux-trend-tab small{
        font-size:7px;
    }
}