.breadth-card { padding-bottom: 14px; }
.breadth-card[hidden] { display: none; }
.breadth-card .chart-head { align-items: flex-start; }
.breadth-head-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.breadth-control-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 7px 0 10px; }
.breadth-controls { margin: 0; }
.breadth-controls button { min-width: 108px; }
.breadth-rate-controls button { min-width: 86px; }
.breadth-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; min-height: 24px; margin: 2px 0 1px; color: var(--muted); font-size: .74rem; }
.breadth-legend-item { display: inline-flex; align-items: center; gap: 7px; }
.breadth-legend-line { display: inline-block; width: 25px; height: 0; border-top: 2px solid var(--accent); }
.breadth-legend-line-dashed { border-top-color: var(--muted); border-top-style: dashed; }
.breadth-data-line { fill: none; stroke: var(--accent); stroke-width: 2.35; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.breadth-average-line { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 7 7; vector-effect: non-scaling-stroke; }
.breadth-latest-dot { fill: var(--accent); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.breadth-axis-tick { stroke: var(--line-dark); stroke-width: 1; vector-effect: non-scaling-stroke; }
.breadth-error { margin: 12px 2px 4px; color: var(--negative); font-size: .82rem; }
#breadthChart { min-height: 300px; }
#breadthChart svg { display: block; width: 100%; height: auto; min-height: 270px; }

@media (max-width: 760px) {
  .breadth-card .chart-head { flex-direction: column; gap: 9px; }
  .breadth-head-pills { justify-content: flex-start; }
  .breadth-control-row { display: grid; grid-template-columns: 1fr; }
  .breadth-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .breadth-controls button, .breadth-rate-controls button { min-width: 0; }
  .breadth-rate-controls { width: 100%; }
  .breadth-rate-controls button { flex: 1; }
  #breadthChart { min-height: 245px; }
  #breadthChart svg { min-height: 235px; }
}