/* Short screens need room for content, not another shrinking inner scroller.
   Keep the heading available while the complete menu scrolls beneath it. */
body:not(.compact-ui) #skill-panel {
  max-width:calc((100vw - var(--sidebar-width) - 24px) / var(--interface-menus,1))!important;
}
.compact-ui main>#skill-panel {
  width:min(740px,calc(100vw - 20px))!important;
}
@media (max-height:800px), (max-width:480px) {
  #magic-panel {
    display:block;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  #magic-panel>.catalog-body {
    flex:none;
    min-height:0;
    overflow:visible;
    align-items:start;
  }
  #magic-panel .catalog-nav {
    max-height:220px;
  }
  #magic-panel #magic-scroll {
    flex:none;
    min-height:180px;
    overflow:visible;
  }
  #vendor-panel {
    overflow-y:auto!important;
    overscroll-behavior:contain;
  }
  #vendor-panel>.vendor-layout {
    flex:none;
    min-height:0;
    grid-template-rows:none;
    align-items:start;
  }
  #vendor-panel #vendor-stock {
    flex:none;
    min-height:160px;
    overflow:visible;
  }
  #vendor-panel .vendor-summary {
    overflow:visible;
  }
  #vendor-panel>.tavern-intro {
    margin:8px 0 12px;
  }
}
@media (max-height:800px), (max-width:480px) {
  .compact-ui #magic-panel>.catalog-body {
    display:flex;
    flex-direction:column;
  }
  .compact-ui #magic-panel .catalog-nav {
    flex:none;
    width:100%;
    max-height:125px;
  }
  .compact-ui #magic-panel #magic-scroll {
    width:100%;
  }
}