/* Phase 7 – iPhone graphics hardening.
   Presentation only: no data or coaching semantics are changed. */

.echart-card,.live-chart-card,.live-map-card{
  container-type:inline-size;
}

.echart,.live-chart,#rideEchart,#liveMap{
  box-sizing:border-box;
  min-width:0;
  max-width:100%;
}

@media(max-width:760px){
  /* Tie visual height to the actual phone width instead of a fixed desktop-derived canvas. */
  .echart,.live-chart,#rideEchart{
    width:100%;
    height:clamp(220px,68vw,270px);
    min-height:220px;
    max-height:270px;
  }
  .live-map,#liveMap{
    width:100%;
    height:clamp(210px,62vw,250px);
    min-height:210px;
    max-height:250px;
  }

  /* ECharts creates nested wrappers/canvas nodes with inline pixel sizes. Their container
     is allowed to own those values, but none may establish a wider layout box. */
  .echart>div,.live-chart>div,#rideEchart>div,
  .echart canvas,.live-chart canvas,#rideEchart canvas,
  .echart svg,.live-chart svg,#rideEchart svg{
    max-width:100%!important;
  }

  .echart-card .card-head,.live-chart-card .card-head,.live-map-card .card-head{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:start;
    gap:7px;
  }
  .echart-card .card-head>*,.live-chart-card .card-head>*,.live-map-card .card-head>*{
    min-width:0;
    max-width:100%;
  }
  .legend{
    justify-self:start;
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .legend::-webkit-scrollbar{display:none}

  /* The decorative hero SVG should remain recognizable on a phone instead of being cropped
     by desktop cover behavior. */
  .workout-hero::before{
    inset:0;
    background-size:auto 100%;
    background-position:right center;
    background-repeat:no-repeat;
    opacity:.10;
  }
  .panel-accent-green::after{
    width:92px;
    height:76px;
    right:-8px;
    bottom:-8px;
  }
}

@media(max-width:430px){
  .echart,.live-chart,#rideEchart{
    height:clamp(218px,70vw,248px);
    min-height:218px;
    max-height:248px;
  }
  .live-map,#liveMap{
    height:clamp(205px,64vw,230px);
    min-height:205px;
    max-height:230px;
  }
  .workout-hero::before{
    background-size:auto 92%;
    background-position:82% center;
    opacity:.085;
  }
}

@media(max-width:360px){
  .echart,.live-chart,#rideEchart{height:218px;min-height:218px}
  .live-map,#liveMap{height:202px;min-height:202px}
}

@media(orientation:landscape) and (max-height:520px) and (max-width:900px){
  .echart,.live-chart,#rideEchart{height:200px;min-height:200px;max-height:200px}
  .live-map,#liveMap{height:195px;min-height:195px;max-height:195px}
}