/* Elevate R37 UI13 — Frozen Header Height Control R1
   Compact responsive reflow only. No market/status element is deleted and sticky-height JS is untouched. */

/* Desktop: remove avoidable vertical slack while retaining the established frozen workspace. */
.dashboard-page #option-app-header.ui-product-header-option{
  min-height:118px!important;
  padding-top:9px!important;
  padding-bottom:9px!important;
}
.dashboard-page #option-app-header .market-info{gap:4px!important}

@media(max-width:768px){
  .dashboard-page #option-app-header.ui-product-header-option{
    grid-template-columns:1fr!important;
    grid-template-areas:"brand" "metrics" "spot" "status"!important;
    gap:6px!important;
    min-height:0!important;
    padding:8px!important;
    margin-top:4px!important;
    margin-bottom:6px!important;
    overflow:hidden!important;
  }

  .dashboard-page #option-app-header .header-brand-band{min-height:0!important}
  .dashboard-page #option-app-header .header-left{gap:8px!important}
  .dashboard-page #option-app-header .app-logo{
    width:34px!important;height:34px!important;flex-basis:34px!important
  }
  .dashboard-page #option-app-header .header-title h1{
    margin-bottom:2px!important;font-size:17px!important;line-height:1.05!important
  }
  .dashboard-page #option-app-header .header-title .header-line-2{
    font-size:9px!important;line-height:1.2!important
  }
  /* The second descriptive tagline duplicates module names already visible below; suppress on compact screens. */
  .dashboard-page #option-app-header .header-title .header-line-3{display:none!important}

  /* Six core references remain visible, but use a 3 x 2 compact grid instead of tall phone stacks. */
  .dashboard-page #option-app-header .core-market-tickers{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    width:100%!important;
    max-width:100%!important;
    gap:4px!important;
    margin:0!important
  }
  .dashboard-page #option-app-header .core-market-tickers .market-ticker{
    min-width:0!important;
    padding:4px 6px!important;
    border-radius:7px!important
  }
  .dashboard-page #option-app-header .core-market-tickers .ticker-label{
    font-size:8px!important;line-height:1.05!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important
  }
  .dashboard-page #option-app-header .core-market-tickers strong{
    font-size:11.5px!important;line-height:1.1!important
  }

  .dashboard-page #option-spot-watch-strip{
    grid-template-columns:auto minmax(0,1fr)!important;
    gap:6px!important;
    padding:4px 0!important;
    min-height:24px!important
  }

  /* Status becomes two visual rows: time/connectivity share one row; utilities remain one swipeable row. */
  .dashboard-page #option-app-header .market-info{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    gap:4px 8px!important;
    width:100%!important;
    align-items:center!important
  }
  .dashboard-page #option-app-header .market-info-time{
    grid-column:1!important;grid-row:1!important;width:auto!important;white-space:nowrap!important;flex-wrap:nowrap!important
  }
  .dashboard-page #option-app-header .market-info-connectivity{
    grid-column:2!important;grid-row:1!important;width:100%!important;
    justify-content:flex-end!important;flex-wrap:nowrap!important;white-space:nowrap!important;
    overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important
  }
  .dashboard-page #option-app-header .market-info-connectivity::-webkit-scrollbar{display:none!important}
  .dashboard-page #option-app-header .market-info-account{
    grid-column:1 / -1!important;grid-row:2!important;width:100%!important;
    justify-content:flex-start!important;flex-wrap:nowrap!important;white-space:nowrap!important;
    overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important
  }
  .dashboard-page #option-app-header .market-info-account::-webkit-scrollbar{display:none!important}
  .dashboard-page #option-app-header .market-clock{font-size:10px!important}
  .dashboard-page #option-app-header .market-info-connectivity .kite-status-button,
  .dashboard-page #option-app-header .market-info-connectivity .telegram-header-status{
    min-height:28px!important;padding:4px 6px!important;font-size:9.5px!important;white-space:nowrap!important
  }
}

@media(max-width:430px){
  .dashboard-page #option-app-header.ui-product-header-option{padding:7px!important;gap:5px!important}
  .dashboard-page #option-app-header .app-logo{width:32px!important;height:32px!important;flex-basis:32px!important}
  .dashboard-page #option-app-header .header-title h1{font-size:16px!important}
  .dashboard-page #option-app-header .header-title .header-line-2{font-size:8.5px!important}
  .dashboard-page #option-app-header .core-market-tickers{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:3px!important}
  .dashboard-page #option-app-header .core-market-tickers .market-ticker{padding:4px!important}
  .dashboard-page #option-app-header .core-market-tickers .ticker-label{font-size:7.5px!important}
  .dashboard-page #option-app-header .core-market-tickers strong{font-size:10.5px!important}
  .dashboard-page #option-app-header .spot-watch-label{font-size:8px!important}
  .dashboard-page #option-app-header .spot-watch-track{font-size:9.5px!important}
}