/* V6 Phase 3 — ride-specific responsive containment.
   Fixes chart/map containers without changing any ride data or coaching semantics. */

#rideLive,#rideDetailSlot,#rideDetailSlot>.live-two,#rideDetailSlot>.live-two>article{
  min-width:0;
  max-width:100%;
}

.live-chart-card,.live-map-card{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
}

#rideEchart,#liveMap{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

#rideEchart>div,
#rideEchart>div>canvas,
#liveMap .maplibregl-canvas-container{
  max-width:100%;
}

/* Headers and legends must never establish a wider intrinsic card width. */
.live-chart-card .card-head,.live-map-card .card-head{
  min-width:0;
  max-width:100%;
  flex-wrap:wrap;
}
.live-chart-card .card-head>div,.live-map-card .card-head>div{
  min-width:0;
}
.live-chart-card .legend{
  min-width:0;
  max-width:100%;
  flex-wrap:wrap;
}

@media(max-width:1080px){
  #rideDetailSlot>.live-two{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%;
  }
}

@media(max-width:760px){
  #rideLive,#rideDetailSlot{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }
  #rideDetailSlot>.live-two{
    gap:10px;
  }
  .live-chart-card,.live-map-card{
    padding:12px;
    border-radius:16px;
  }
  #rideEchart{
    height:240px;
    min-height:220px;
  }
  #liveMap{
    height:230px;
    min-height:210px;
  }
  .live-chart-card .legend{
    justify-content:flex-start;
    width:100%;
  }
  .live-map-card .live-status{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

@media(max-width:430px){
  #rideEchart{
    height:225px;
    min-height:205px;
  }
  #liveMap{
    height:215px;
    min-height:195px;
  }
}

@media(max-width:360px){
  .live-chart-card,.live-map-card{
    padding:10px;
  }
  #rideEchart{
    height:210px;
    min-height:195px;
  }
  #liveMap{
    height:200px;
    min-height:185px;
  }
}