/*
 * Phones in landscape.
 *
 * The mobile traderoom stacks chart over the trade panel and reserves 56px for
 * the bottom nav. With ~390px of viewport that leaves the chart around 70px,
 * so the candles collapse into a strip. Below the lg breakpoint and on short
 * viewports the panel moves to the side instead, which gives the chart the
 * whole column height.
 */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 1023px) {
  div[class~="lg:flex-row"][class~="pb-14"] {
    flex-direction: row !important;
    padding-bottom: 0 !important;
  }

  /* The bottom tab bar costs 56px of a 390px viewport and every destination in
     it also lives in the header menu, so it only shows up in portrait. */
  [class~="fixed"][class~="bottom-0"][class~="lg:hidden"] {
    display: none !important;
  }

  div[class~="lg:flex-row"][class~="pb-14"] > div:first-child {
    min-width: 0 !important;
    height: 100% !important;
  }

  div[class~="lg:flex-row"][class~="pb-14"] > div[class~="lg:hidden"] {
    width: clamp(240px, 36vw, 320px) !important;
    flex: 0 0 auto !important;
    height: 100% !important;
    overflow-y: auto !important;
    border-top: 0 !important;
    border-left: 1px solid hsl(var(--border)) !important;
  }
}