/* DY Index Spread: desktop first-screen fit. Chart data and interactions are unchanged. */
@media (min-width: 761px) and (min-height: 620px) {
  html,
  body {
    min-height: 100%;
  }

  body:not(:has(.voice-alert-overlay:not([hidden]))) {
    overflow-y: hidden;
  }

  .shell {
    min-height: 0;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .page-header {
    margin-bottom: 1px;
  }

  .combo-row {
    margin-bottom: 1px;
  }

  .combo-cards {
    padding-top: 0;
    padding-bottom: 1px;
  }

  .funding-panel {
    margin-bottom: 2px;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .spread-view.active > .quote-panel,
  .spread-view.active > .live-panel {
    margin-bottom: 2px;
  }

  .spread-insight-bar {
    margin-bottom: 1px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  .spread-view .chart-box {
    height: clamp(280px, calc(100dvh - 328px), 650px) !important;
  }

  /* Lightweight Charts renders the time scale as the final table row. Keep the
     original canvas and interaction layer, but float it over the plot bottom. */
  .spread-view.active .chart-box .tv-lightweight-charts > table {
    position: relative !important;
  }

  .spread-view.active .chart-box .tv-lightweight-charts > table > tr:last-child {
    position: absolute !important;
    right: 0;
    bottom: 1px;
    left: 0;
    z-index: 12;
    display: table !important;
    width: 100% !important;
    height: 28px !important;
    border-top: 1px solid rgba(148, 163, 184, .22);
    background: linear-gradient(180deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .88));
    box-shadow: 0 -3px 10px rgba(31, 41, 55, .04);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
}

@media (max-width: 760px), (max-height: 619px) {
  body {
    overflow-y: auto;
  }
}