html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* keep body from scrolling */
}

/* Header: make height consistent with layout.css and center contents */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  /* Use 80px to match layout.css min-height */
  height: 80px;
  z-index: 100;

  display: flex;             /* ensure inner .nav can align centrally */
  align-items: center;        /* vertical centering of the container */
}

/* Ensure the inner nav row vertically centers its children */
.header .nav {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0;                 /* remove extra vertical padding to avoid misalignment */
  min-height: 80px;           /* match header height for consistent centering */
}

/* This spacer must match the header height so content clears the fixed header */
.spacer-header {
  height: 80px;
}

#app {
  position: absolute;
  top: 80px;   /* directly below header */
  left: 0;
  right: 0;
  bottom: 0;   /* fills remaining space */
  overflow-y: auto;  /* THIS is scrollable */
  -webkit-overflow-scrolling: touch;
}

/* Small screens: header is 60px tall; keep all in sync */
@media (max-width: 700px){
  .header {
    height: 60px;
  }
  .header .nav {
    min-height: 60px;
  }
  .spacer-header {
    height: 60px;
  }
  #app {
    top: 60px;
  }
}