/* portal-scroll-fix v1 (2026-10-19): at every window size the page scrollbars are visible and nothing is cut off.
   1) app.css body{overflow-x:hidden} clipped everything wider than the window, with no scrollbar to reach it.
      The viewport (html) now owns both scrollbars:
      - vertical is always shown;
      - horizontal appears at the bottom of the window only when the content is wider.
   2) The scrollbars are clearly visible on the dark theme (contrasting thumb on a dark track).
   3) Medium widths (851-1400 px): the top bar wraps its action group (language, credits, account) instead of pushing
      the account out of view. The <=850 px mobile layout from app.css is unchanged. */
html{overflow-x:auto;overflow-y:scroll;scrollbar-width:auto;scrollbar-color:#8b98a5 #14171b}
body{overflow-x:visible}
html::-webkit-scrollbar{width:14px;height:14px}
html::-webkit-scrollbar-track{background:#14171b}
html::-webkit-scrollbar-thumb{background:#8b98a5;border-radius:7px;border:3px solid #14171b}
html::-webkit-scrollbar-thumb:hover{background:#b3bfca}
/* 4) Map Studio below 1000 px: the map tree goes above the editor (editor gets the full width), and the view tabs
      (Table/2D/3D/Hex/2D BIN) wrap instead of being clipped. */
@media (max-width:1000px){
  #mapStudioRoot .ms-layout{grid-template-columns:minmax(0,1fr)!important}
  #mapStudioRoot .ms-tabs{flex-wrap:wrap}
}
@media (min-width:851px) and (max-width:1400px){
  .topbar{height:auto!important;min-height:96px;flex-wrap:wrap;row-gap:10px;padding-top:12px!important;padding-bottom:12px!important}
  .top-actions{flex-wrap:wrap;justify-content:flex-end;row-gap:8px;min-width:0;max-width:100%}
}