/* Match the approximately 190px card on a 402px iPhone viewport. Mobile
   remains two columns; wider dashboards add columns only when they fit.
   Use the same tall card proportions so labels are not squeezed vertically. */
@media (min-width: 541px) {
  .market-grid.test-grid:not(.detail-grid) {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }
  .test-grid .market-card,
  .test-grid > .add-chart-card { aspect-ratio: .92 / 1; }
  .test-grid .market-card { container-type: inline-size; }
  .test-grid .card-content { padding: 0 5px 5px; grid-template-rows: auto auto minmax(70px, 1fr) auto; }
  .test-grid .card-titlebar { margin: 0 -5px; padding: 4px 5px; }
  .test-grid .card-name { font-size: .94rem; }
  .test-grid .card-change { font-size: clamp(1.65rem, 18.2cqw, 2.3rem); letter-spacing: 0; }
  .test-grid .card-price { flex: 0 1 auto; font-size: clamp(1.05rem, 11cqw, 1.42rem); }
  .test-grid .card-quote { justify-content: center; gap: 4px; overflow: hidden; }
  .test-grid .point-change { flex: 0 1 auto; font-size: .54rem; text-align: left; }
  .test-grid .card-change-row .market-status { bottom: 0; font-size: .5rem; }
  .test-grid .market-status-dot { width: 5px; height: 5px; }
  .test-grid .axis-labels { font-size: .55rem; }
  .test-grid .chart-percent-label, .test-grid .chart-extreme text { font-size: 10px; }
}
/* Give the desktop dashboard the available width without widening reading sections. */
@media (min-width: 851px) {
  body:has(#testPage) .topbar,
  body:has(#testPage) main,
  body:has(#testPage) .dashboard-sticky .dashboard-tabs {
    width: calc(100% - 48px);
  }
  body:has(#testPage) .dashboard-sticky .dashboard-tabs {
    justify-content: flex-start;
    padding-inline: 0;
  }
}