/*
 * RadarČeska — Station Live Intelligence UX v1.0.1
 * Isolated presentation overlay.
 */

.sli-shell{
    --sli-ux-line:#dfe6e7;
    --sli-ux-soft:#f6f9f8;
    --sli-ux-muted:#7b8b90;
    --sli-ux-text:#263e44;
}


/* ------------------------------------------------------------------
   Compact desktop hierarchy
   ------------------------------------------------------------------ */

.sli-shell--hub .sli-grid{
    gap:10px;
}

.sli-shell--hub .sli-card-head{
    min-height:52px;
    padding:10px 12px;
}

.sli-shell--hub .sli-row{
    min-height:54px;
    padding:8px 11px;
}

/* /vlaky/ is only a quick station pulse: TOP 4 */
.sli-shell--hub
.sli-list
.sli-row:nth-child(n+5){
    display:none;
}


/* ------------------------------------------------------------------
   Ranking
   ------------------------------------------------------------------ */

.sli-row{
    position:relative;
    gap:9px;
}

.sli-ux-rank{
    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 24px;

    width:24px;
    height:24px;

    border:1px solid #e0e7e8;
    border-radius:8px;

    background:#f6f8f8;

    color:#89979b;

    font-size:9px;
    font-weight:850;
    line-height:1;
}

.sli-row:first-child{
    background:
        linear-gradient(
            90deg,
            rgba(246,249,248,.98),
            rgba(255,255,255,.98)
        );
}

.sli-row:first-child .sli-ux-rank{
    border-color:#d4e1dc;

    background:#edf4f1;

    color:#506c61;
}

.sli-card[data-sli-ux-kind="problems"]
.sli-row:first-child .sli-ux-rank{
    border-color:#ead9d5;

    background:#faf0ed;

    color:#9c5549;
}


/* ------------------------------------------------------------------
   Mobile tabs — desktop hidden
   ------------------------------------------------------------------ */

.sli-ux-tabs{
    display:none;
}


/* ------------------------------------------------------------------
   Directory
   ------------------------------------------------------------------ */

.sli-shell--directory .sli-head{
    margin-bottom:12px;
}

.sli-shell--directory .sli-card{
    min-width:0;
}


/* ------------------------------------------------------------------
   Mobile
   ------------------------------------------------------------------ */

@media(max-width:780px){

    .sli-shell{
        margin-top:10px;
    }

    .sli-head{
        align-items:center;
        margin-bottom:9px;
    }

    .sli-head h2{
        font-size:18px;
        line-height:1.12;
    }

    .sli-head a{
        display:flex;
        align-items:center;

        min-height:32px;

        font-size:10px;
        white-space:nowrap;
    }


    /*
     * Progressive enhancement:
     * without overlay JS the original three-card stack remains.
     * Only .sli-ux-ready activates tabbed layout.
     */
    .sli-ux-ready .sli-ux-tabs{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:4px;

        margin:0 0 9px;
        padding:4px;

        border:1px solid var(--sli-ux-line);
        border-radius:13px;

        background:#f3f6f6;
    }

    .sli-ux-tab{
        appearance:none;
        -webkit-appearance:none;

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

        padding:0 8px;

        border:0;
        border-radius:9px;

        background:transparent;

        color:#718287;

        font:inherit;
        font-size:10px;
        font-weight:800;
        line-height:1;

        cursor:pointer;

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

    .sli-ux-tab.is-active{
        background:#fff;

        color:#263e44;

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


    .sli-ux-ready .sli-grid{
        display:block;
    }

    .sli-ux-ready .sli-card{
        display:none;
    }

    .sli-ux-ready[data-sli-ux-active="traffic"]
    .sli-card[data-sli-ux-kind="traffic"]{
        display:block;
    }

    .sli-ux-ready[data-sli-ux-active="nearby"]
    .sli-card[data-sli-ux-kind="nearby"]{
        display:block;
    }

    .sli-ux-ready[data-sli-ux-active="problems"]
    .sli-card[data-sli-ux-kind="problems"]{
        display:block;
    }


    .sli-card{
        border-radius:14px;
    }

    .sli-card-head{
        min-height:48px;
        padding:9px 11px;
    }

    .sli-card-head h3{
        font-size:14px;
    }

    .sli-row{
        min-height:52px;
        padding:8px 10px;
    }

    .sli-ux-rank{
        flex-basis:22px;

        width:22px;
        height:22px;

        border-radius:7px;

        font-size:8px;
    }

    .sli-row-copy strong{
        margin-bottom:2px;

        font-size:12px;
    }

    .sli-row-copy small{
        font-size:9px;
    }

    .sli-row b{
        min-width:36px;

        font-size:12px;
    }


    /*
     * On mobile all station intelligence contexts show TOP 4.
     */
    .sli-shell
    .sli-list
    .sli-row:nth-child(n+5){
        display:none;
    }


    .sli-footer{
        display:block;

        margin-top:8px;

        font-size:8px;
    }

    .sli-footer span{
        display:block;
    }

    .sli-footer span:last-child{
        margin-top:2px;
        text-align:left;
    }
}


@media(max-width:430px){

    .sli-head h2{
        font-size:17px;
    }

    .sli-head span{
        font-size:9px;
    }

    .sli-ux-tab{
        min-height:36px;

        padding:0 5px;

        font-size:9px;
    }

    .sli-row-copy small{
        max-width:205px;
    }
}


/* RADARCESKA-STATION-LIVE-INTELLIGENCE-UX-v1.0.2 */