/* Application-shell scrolling: the browser page stays fixed while each view owns its scroll area. */
html,
body{
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
}

body{
  display:flex;
  flex-direction:column;
}

.topbar,
.sync-banner{
  flex:0 0 auto;
}

.topbar{
  position:relative;
  top:auto;
}

.sync-banner{
  width:calc(100% - 32px);
  margin:12px auto;
}

.dashboard,
.workspace,
.shelf-page{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
}

.dashboard,
.shelf-page{
  width:100%;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}

.workspace{
  height:auto;
  min-height:0;
  align-items:stretch;
  overflow:hidden;
}

.column{
  min-width:0;
  min-height:0;
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.column-head{
  flex:0 0 78px;
  height:auto;
  min-height:78px;
}

/* The explore header contains both the title and the map/time segmented control.
   It must size itself from its content instead of inheriting the generic 78px
   column-header basis, otherwise the list can visually overlap the control and
   intercept pointer/touch events. */
#levelColumn > .explore-head{
  flex:0 0 auto;
  height:auto;
  min-height:112px;
  position:relative;
  z-index:2;
  overflow:visible;
  background:var(--paper);
}

#levelColumn > .explore-head .dimension-toggle{
  position:relative;
  z-index:3;
  flex:0 0 auto;
  pointer-events:auto;
}

#levelColumn > .column-scroll{
  position:relative;
  z-index:1;
  flex:1 1 0;
  min-height:0;
  height:auto !important;
}

.column-scroll,
.detail-scroll{
  flex:1 1 auto;
  min-height:0;
  height:auto;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}

.detail-column{
  min-height:0;
  overflow:hidden;
}

@media(max-width:1000px){
  .topbar{
    position:relative;
  }

  .sync-banner{
    margin:8px auto;
  }

  .workspace{
    display:block;
    height:auto;
    min-height:0;
    overflow:hidden;
  }

  .column{
    display:none;
    height:100%;
    min-height:0;
    overflow:hidden;
  }

  .column.mobile-active{
    display:flex;
  }

  .column-head{
    position:relative;
    top:auto;
    flex:0 0 auto;
    min-height:78px;
  }

  #levelColumn > .explore-head{
    flex:0 0 auto;
    min-height:112px;
  }

  .column-scroll,
  .detail-scroll{
    flex:1 1 auto;
    min-height:0;
    height:auto;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-gutter:stable;
  }
}