/*
 * Compatibility layer for Android in-app browsers that do not understand
 * modern range media queries emitted by the production CSS optimizer.
 */
.table-note,
.table-caption {
  display: block;
  width: 100%;
  margin-top: var(--spacer-12);
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 18px;
  caption-side: initial;
}

@media screen and (max-width: 820px), screen and (max-device-width: 820px) {
  .site-container {
    width: calc(100% - 32px);
    max-width: 1440px;
  }

  .utility-links span,
  .header-search,
  .header-action,
  .data-stamp {
    display: none;
  }

  .brand-row {
    min-height: 68px;
  }

  .nav-scroll {
    gap: var(--spacer-24);
  }

  .intro-inner {
    align-items: flex-start;
    padding-top: var(--spacer-24);
    padding-bottom: var(--spacer-24);
  }

  .quote-strip {
    flex-direction: column;
    align-items: flex-start;
  }

  .quote-strip dl {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .quote-strip dl div {
    padding-left: 0;
    border-left: 0;
  }

  .market-layout,
  .explain-layout,
  .breadth-layout,
  .source-section,
  .insight-layout,
  .featured-insight,
  .method-hero,
  .method-layout {
    grid-template-columns: 1fr;
  }

  .explain-layout,
  .breadth-layout,
  .source-section,
  .method-hero,
  .method-layout {
    gap: var(--spacer-32);
  }

  .section-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .feature-stat {
    border-left: 0;
    border-top: 1px solid var(--border-neutral-l1);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacer-32);
  }

  .footer-grid > div:first-child,
  .footer-grid > div:last-child {
    grid-column: 1 / -1;
  }

  .method-nav {
    position: static;
    flex-direction: row;
    overflow: auto;
  }

  .method-nav strong {
    display: none;
  }

  .chart-control-bar,
  .secondary-control-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .control-spacer {
    display: none;
  }

  .chart-actions {
    margin-left: auto;
  }

  .main-indicator-control {
    max-width: 100%;
    overflow: auto;
  }

  .secondary-control-row {
    flex-direction: column;
  }

  .sub-indicator-manager,
  .compare-toggles {
    width: 100%;
    overflow: auto;
  }

  .performance-legend {
    flex-wrap: wrap;
    gap: var(--spacer-8) var(--spacer-16);
  }

  .performance-legend p {
    width: 100%;
    margin-left: 0;
    text-align: left;
  }
}

@media screen and (max-width: 560px), screen and (max-device-width: 560px) {
  .market-section,
  .content-section {
    padding-top: var(--spacer-40);
    padding-bottom: var(--spacer-40);
  }

  .intro-title-row h1 {
    font-size: 24px;
  }

  .quote-primary strong {
    font-size: 32px;
  }

  .quote-strip dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .advanced-chart {
    height: 470px;
  }

  .chart-canvas {
    height: 330px;
  }

  .indicator-settings,
  .chart-toolbar,
  .chart-footnote,
  .footer-bottom {
    flex-direction: column;
  }

  .indicator-settings,
  .chart-toolbar {
    align-items: flex-start;
  }

  .parameter-fields,
  .range-control,
  .main-indicator-control {
    width: 100%;
    max-width: 100%;
    overflow: auto;
  }

  .chart-actions {
    margin-left: 0;
  }

  .sub-indicator-manager small,
  .insight-list article > a {
    display: none;
  }

  .market-brief {
    display: block;
  }

  .explain-layout {
    padding-top: var(--spacer-48);
    padding-bottom: var(--spacer-48);
  }

  .distribution {
    padding: var(--spacer-16);
  }

  .distribution-row,
  .distribution-axis {
    grid-template-columns: 96px minmax(0, 1fr) 48px;
    gap: var(--spacer-8);
  }

  .insight-list article {
    grid-template-columns: 42px 1fr;
  }

  .source-section {
    margin-bottom: var(--spacer-40);
    padding: var(--spacer-24);
  }

  .source-section dl,
  .source-meta,
  .footer-grid,
  .definition-box,
  .method-steps li,
  .limit-list article {
    grid-template-columns: 1fr;
  }

  .footer-grid > div:first-child,
  .footer-grid > div:last-child {
    grid-column: auto;
  }

  .footer-bottom {
    gap: var(--spacer-6);
  }

  .method-hero h1 {
    font-size: 34px;
    line-height: 42px;
  }

  .definition-box > span,
  .definition-box > p {
    grid-column: auto;
  }

  .definition-box i {
    width: 2px;
    height: 20px;
    justify-self: center;
  }

  .method-steps li,
  .limit-list article {
    gap: var(--spacer-8);
  }

  .compare-table th,
  .compare-table td,
  .method-table th,
  .method-table td {
    padding: var(--spacer-8) var(--spacer-6);
    font-size: 12px;
    white-space: nowrap;
  }
}