/*
Map.css
Bottom card for routing / steps.
*/
.panel{position: absolute;
    right:12px;
    bottom:12px;
    width:92%;
    max-width:420px;
    background:var(--glass);
    backdrop-filter: blur(6px);
    border-radius:12px;
    padding:10px;
    box-shadow:0 6px 20px rgba(0,0,0,0.08);
    z-index: 99999;}
.panel h3{margin:0 0 6px 0;font-size:16px}
.route-steps{max-height:260px;overflow:auto}
.step{display:flex;gap:8px;align-items:flex-start;padding:8px 6px;border-radius:8px}
.step+ .step{border-top:1px dashed rgba(0,0,0,0.06)}

/* Small screens: panel stretches */
@media(min-width:720px){
    main{flex-direction:row}
    #map{flex:1}
    .panel{width:360px;left:auto;right:12px;bottom:12px}
}