how do I link a javacript file + R/* ===== Base (Desktop-first) ===== */

/* keep your original rules */
#my_tab_box { height: 600px !important; }
#myplot { height: 550px !important; }

#image img {
  max-width: 100%;
  height: auto;
  display: inline-block; /* avoids weird baseline gaps */
}

#dynamicImage img {
  width: 75% !important;
  height: auto !important;
  display: block;
}



#picky { margin-top: 10px; }
#pick { margin-top: 10px; border: 1px solid black; }

#header {
  position: sticky;
  top: 0;
  z-index: 999;
  border: 1px solid black;
  padding: 5px;
  color: white;
  background: black;
}

#header a {
  font-size: 25px;
  color: white;
  margin: 0 10px;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

#header a:hover { background-color: #333; }
#header a.active { background-color: #555; }

#header h1 { margin: 0; }

#nav-links { display: flex; align-items: center; }

/* Links row */
#links {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 70px;
  flex-wrap: wrap; /* allow wrap on mid screens too */
}
#links a {
  background-color: #000;
  border: 1px solid #333;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  font-size: 20px;
  transition: background-color 0.3s, transform 0.3s;
  text-align: center;
}
#links a:hover { background-color: #111; cursor: pointer; transform: scale(1.05); }
#links a:active { transform: scale(1); background-color: #222; }

/* DataTable defaults */
table.dataTable { font-size: 16px; }
table.dataTable td, table.dataTable th { padding: 12px 8px; }
table.dataTable th { font-weight: bold; }

/* Make long cells behave nicely on small screens when wrapped in Responsive */
table.dataTable td { word-break: break-word; }

/* Improve tap targets for pagination on touch */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 0.5rem 0.75rem;
}

#table-wrap .dataTables_scrollBody {
    overflow-x: visible !important;
  }
  #table-wrap .dataTables_scrollBody table.dataTable {
    width: 100% !important;
    white-space: normal;
  }


#scrollTopBtn {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 9999;
  border: none;
  outline: none;
  background-color: #000;
  color: #fff;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 16px;
}
#scrollTopBtn:hover { background-color: #333; }


#mobileMenuWrap { display: none; }



/* ====== Tablets (<= 992px) ====== */
@media (max-width: 992px) {
  #header a { font-size: 20px; padding: 6px 10px; }
  #links { gap: 28px; }
  #links a { font-size: 18px; padding: 8px 16px; }
  table.dataTable { font-size: 15px; }
  table.dataTable td, table.dataTable th { padding: 10px 6px; }
    
  #table-wrap .dataTables_scrollBody {
    overflow-x: auto !important;   /* the real scroller */
    -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
  }

  /* Make the actual table wider than the viewport so it can scroll */
  #table-wrap .dataTables_scrollBody table.dataTable {
    width: max-content !important;  /* expand to natural width */
    min-width: 900px;               /* fallback for older browsers */
    white-space: nowrap;            /* keep columns on one line */
  }

  #dynamicImage {
    width: 120px !important;    /* pick the size you want (100–160px) */
    height: auto !important;
  }

  /* Ensure the link doesn't force full width */
  #image a {
    display: inline-block;
  }

  /* Parent box shouldn't pin the height on mobile */
  #image {
    height: auto !important;    /* overrides your desktop 105px */
    padding: 6px 0;
    text-align: center;
  }

}

/* ====== Phones (<= 768px) ====== */
@media (max-width: 768px) {

#myplot {}

#header h1 { font-size: 28px !important; }

#nav-links {display: none; }

  /* Make week title smaller and centered */
  h2 { font-size: 1.25rem; text-align: center; }

#links {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: 15px;
    padding-top: 20px;
  }

  #links a {
    font-size: 14px !important;
    padding: 10px 14px !important;
    text-align: center !important;
    display: block;
  }

#mobileMenuWrap { 
    display: block; 
    position: fixed; 
    top: 1px; right: 15px; 
    z-index: 10000; 
  }

#hamburgerBtn {
    background: #000; color: #fff; border: none; 
    border-radius: 8px; padding: 10px 12px; 
    font-size: 20px; line-height: 1; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }
  #hamburgerBtn:active { transform: translateY(1px); }

  /* Dropdown panel */
  #hamburgerMenu {
    display: none;
    position: absolute;
    top: 43px; right: 0; 
    background: #000; color: #fff;
    border: 1px solid #ddd; border-radius: 10px;
    min-width: 160px; padding: 6px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  }
  #hamburgerMenu.open { display: block; }

  #hamburgerMenu ul { list-style: none; margin: 0; padding: 0; }
  #hamburgerMenu li { margin: 0; }
  #hamburgerMenu a {
    display: block; padding: 10px 14px; text-decoration: none;
    color: inherit; font-size: 16px;
  }
  #hamburgerMenu a:hover { background: #f5f5f7; }
 

  /* Image shorter; keep aspect by letting height auto when possible */
   #dynamicImage {
    width: 250px !important;    /* pick the size you want (100–160px) */
    height: auto !important;
  }

  /* Ensure the link doesn't force full width */
  #image a {
    display: inline-block;
  }

  /* Parent box shouldn't pin the height on mobile */
  #image {
    height: auto !important;    /* overrides your desktop 105px */
    padding: 6px 0;
    text-align: center;
  }

  /* Compact table for phones */
  table.dataTable { font-size: 14px; }
  table.dataTable td, table.dataTable th { padding: 8px 6px; }

  /* Remove extra outer margins some themes add */
  .container, .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #table-wrap .dataTables_scrollBody {
    overflow-x: auto !important;   /* the real scroller */
    -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
  }

  /* Make the actual table wider than the viewport so it can scroll */
  #table-wrap .dataTables_scrollBody table.dataTable {
    width: max-content !important;  /* expand to natural width */
    min-width: 900px;               /* fallback for older browsers */
    white-space: nowrap;            /* keep columns on one line */
  }


}

/* ====== Small Phones (<= 420px) ====== */
@media (max-width: 420px) {
  #links a {
    flex: 1 1 100%;
    max-width: none;
  }
  #header a {
    font-size: 15px;
    padding: 6px 8px;
  }
}