/* Desktop/tablet never affected. Loaded last to override existing mobile sheets. */
@media (max-width: 720px), (min-width: 721px) and (max-width: 1060px) and (orientation: landscape) and (max-height: 500px) and (any-pointer: coarse) {
  /* Match benchmark and screener revenue/price controls at 31px. */
  html.mobile-reflow-active #heroRevenueHistory .revenue-history-controls button,
  html.mobile-reflow-active .hero-metrics-header .mobile-time-glance .period-tabs button,
  #screenerRevenueHistoryControls .revenue-history-controls button,
  #tablePeriodControls button {
    box-sizing:border-box!important;
    height:31px!important;
    min-height:31px!important;
    max-height:31px!important;
    padding:0 1px!important;
    margin:0!important;
    display:inline-flex!important;
    justify-content:center;
    align-items:center;
    line-height:1!important;
    font-size:clamp(9px,2.5vw,12px)!important;
  }

  /* Align heading rows and button rows across each pair of controls. */
  html.mobile-reflow-active .hero-panel .hero-metrics-header,
  .tokens-panel .table-period-row {
    align-items:end!important;
  }
  html.mobile-reflow-active .hero-panel .hero-metrics-header {
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)!important;
  }
  .tokens-panel .table-period-row {
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)!important;
  }
  html.mobile-reflow-active #heroRevenueHistory .revenue-single-controls-line,
  html.mobile-reflow-active .hero-metrics-header .mobile-time-glance,
  #screenerRevenueHistoryControls,
  .tokens-panel .table-period-row .mobile-screener-time-glance {
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:end!important;
    gap:5px!important;
    min-width:0!important;
  }
  /* Revenue first, Time Glance second; the price group is wrapped on mobile. */
  .tokens-panel .table-period-row > .mobile-screener-time-glance {
    order:2!important;
  }
  .tokens-panel .table-period-row > #screenerRevenueHistoryControls {
    order:1!important;
  }
  html.mobile-reflow-active #heroRevenueHistory .revenue-single-controls-line > span,
  html.mobile-reflow-active .hero-metrics-header .mobile-time-glance > span,
  #screenerRevenueHistoryControls > span,
  #mobileScreenerTimeGlanceLabel {
    display:block!important;
    height:15px!important;
    margin:0!important;
    padding:0!important;
    color:#a5c8bb!important;
    font-size:clamp(10px,2.55vw,12px)!important;
    font-weight:600!important;
    line-height:15px!important;
    white-space:nowrap!important;
  }
  .tokens-panel .table-period-row .mobile-screener-time-glance {
    justify-content:flex-end!important;
  }
  html.mobile-reflow-active .hero-metrics-header .mobile-time-glance .period-tabs,
  .tokens-panel .table-period-row .mobile-screener-time-glance #tablePeriodControls {
    box-sizing:border-box!important;
    padding:0!important;
    border:0!important;
  }
  #tablePeriodControls {
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  html.mobile-reflow-active .tokens-panel #tablePeriodControls button {
    flex:1 1 0!important;
    font-size:clamp(8px,2.5vw,12px)!important;
  }
  html.mobile-reflow-active .tokens-panel #tablePeriodControls [data-table-period="annual"] {
    flex:1.4 1 0!important;
  }
  #screenerRevenueHistoryControls .revenue-history-controls,
  html.mobile-reflow-active #heroRevenueHistory .revenue-history-controls,
  html.mobile-reflow-active .hero-metrics-header .mobile-time-glance .period-tabs {
    align-self:stretch!important;
    margin:0!important;
  }

  /* Hide the caption only; retain points, gap metadata and unavailable messages. */
  #heroSpark .revenue-single-caption,
  #mobileTokenCards .mobile-chart-field .revenue-single-caption,
  #mobileTokenCards .one-line-metrics .revenue-single-caption {
    display:none!important;
  }

  /* Keep the SVG viewBox and aspect ratio; use more of the existing chart cell. */
  #mobileTokenCards .mobile-chart-field .mobile-token-field-value {
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    overflow:hidden;
  }
  #mobileTokenCards .mobile-four-metrics > .mobile-chart-field .mobile-token-field-value svg.mini-chart-svg {
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:clamp(42px,14vw,60px)!important;
  }
  #heroSpark svg.hero-sparkline-svg {
    display:block!important;
    width:100%!important;
    max-width:100%!important;
  }
}