/* Responsive breakpoints for the platform.
   All rules here must be breakpoint-level only. Component-specific responsive
   rules stay in their own feature CSS files. */

@media (max-width: 1024px) {
  html {
    font-size: 15px;
  }
  .app-layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    width: 100%;
    position: static;
  }
}

@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
  .app-header,
  .paper-header,
  .jn-header,
  .st-header {
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }
  .header-right,
  .jn-header-right,
  .st-header-right {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .btn-backtest,
  .btn-refresh,
  .btn-theme {
    font-size: var(--font-size-xs);
    padding: var(--space-1) var(--space-2);
  }
  table {
    font-size: var(--font-size-xs);
  }
  .chart-header-row1,
  .chart-header-row2 {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 13px;
  }
  .btc-community-widget {
    display: none;
  }
  .coach-today-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 360px) {
  .coach-today-grid {
    grid-template-columns: 1fr;
  }
  .header-left .user-info,
  .header-left .legal-links {
    display: none;
  }
}