.trends .pop-results-body {
    display: grid;
    gap: 12px;
    padding: 16px;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    color: #fff;
    background-color: #222;
}
.pot-trends-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}
.trends .pop-legend {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.trends .pop-chart-wrapper canvas.pot-trends-chart, .trends .pop-chart-wrapper canvas.pop-chart{ width:100% !important; height:100% !important; min-height: 300px;  }
.trends .pop-legend .legend-item{
    display:flex;
    align-items:center;
    gap:4px;
    margin-bottom:0px;
    color:inherit;
    text-decoration:none;
    padding: 5px;
}
.pop-legend .legend-swatch{
    flex:0 0 auto;
    width:28px;
    height:6px;
    border-radius:3px;
}
.pop-legend .legend-label{
    flex:1 1 auto;
}
.pop-legend{
    width: 100%;
}
/* legend-value removed: no right-side values next to labels */
@media (max-width: 950px){

   .pot-trends-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 600px){
   .trends .pop-results-body{ 
    display: flex; flex-direction: column-reverse;
   }
   .pot-trends-grid{ grid-template-columns:repeat(1, 1fr); }
   .trends .pop-chart-wrapper canvas.pot-trends-chart, .trends .pop-chart-wrapper canvas.pop-chart{ 
    max-height:200px !important; 
    min-height: 200px;  }
}