/* =====================================================
           STOPS PANEL
        ===================================================== */

        #panel-backdrop {
            position: fixed;
            inset: 0;

            z-index: 4900;

            display: none;

            background:
                rgba(0,0,0,0.25);

            border: 0;
            padding: 0;
        }


        #panel-backdrop.visible {
            display: block;
        }


        #stops-panel {
            position: fixed;

            left: 0;
            right: 0;
            bottom: 0;

            height: 72vh;
            height: 72dvh;

            z-index: 5000;

            background: white;

            border-radius:
                22px 22px 0 0;

            box-shadow:
                0 -8px 30px rgba(0,0,0,0.22);

            transform:
                translateY(105%);

            transition:
                transform 0.25s ease;

            padding-bottom:
                env(safe-area-inset-bottom);

            display: flex;
            flex-direction: column;
        }


        #stops-panel.open {
            transform:
                translateY(0);
        }


        #stops-panel-header {
            padding:
                10px 16px 12px 16px;

            border-bottom:
                1px solid #eee;
        }


        #stops-panel-handle {
            width: 42px;
            height: 4px;

            margin:
                0 auto 10px auto;

            border-radius: 10px;

            background: #d6d6d6;
        }


        .stops-title-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }


        #stops-panel-title {
            font-size: 18px;
            font-weight: 700;
        }


        #stops-panel-subtitle {
            margin-top: 3px;
            font-size: 11px;
            color: #888;
        }


        #close-stops {
            width: 44px;
            height: 44px;

            border: 0;
            border-radius: 50%;

            background: #eee;

            font-size: 18px;
            cursor: pointer;
        }


        #stop-arrivals-list {
            flex: 1;
            overflow-y: auto;
            padding:
                10px 12px 20px 12px;
        }


        .arrival-item {
            display: grid;

            grid-template-columns:
                40px 1fr auto;

            gap: 10px;

            align-items: center;

            padding: 12px 9px;

            border-bottom:
                1px solid #eee;

            cursor: pointer;

            width: 100%;
            min-height: 58px;
            border-left: 0;
            border-right: 0;
            border-top: 0;
            background: #fff;
            text-align: left;
            color: inherit;
            font: inherit;
        }


        .arrival-item.next {
            background: #fff4f4;
            border-radius: 12px;
            border-bottom: 0;
            margin-bottom: 4px;
        }


        .arrival-item.passed {
            opacity: 0.45;
        }


        .arrival-order {
            width: 34px;
            height: 34px;

            border-radius: 50%;

            background: #eee;

            display: flex;
            align-items: center;
            justify-content: center;

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


        .arrival-item.next .arrival-order {
            background: #d90000;
            color: white;
        }

        .arrival-item.current { background: #effaf3; border-radius: 12px; opacity: 1; }
        .arrival-item.current .arrival-order { background: #087638; color: white; }
        .arrival-item.current .arrival-name, .arrival-item.current .arrival-time { color: #087638; }


        .arrival-name {
            font-size: 13px;
            font-weight: 700;
        }


        .arrival-public-number {
            margin-top: 3px;
            font-size: 9px;
            color: #888;
        }


        .arrival-time {
            text-align: right;
            font-size: 12px;
            font-weight: 700;
            color: #16803c;
        }


        .arrival-distance {
            display: block;
            margin-top: 2px;
            font-size: 9px;
            font-weight: 400;
            color: #888;
        }


        .arrival-passed {
            color: #999;
            font-size: 10px;
            font-weight: 400;
        }
/* Completion is persisted by the authoritative planner, never browser memory. */
.arrival-item.completed { background: #effaf3; opacity: 1; }
.arrival-item.completed .arrival-order { background: #087638; color: white; }
.arrival-item.completed .arrival-name, .arrival-item.completed .arrival-time { color: #087638; }