/* assets/css/styles.css */

/* Reset some defaults */
body, h1, h2, h3, p, ul, li, table, th, td, pre, code, select, label {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  
/* Body styling */
body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

/* Center all main headers site-wide */
h1, h2, h3 { text-align: center; }
  
/* Container */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 2rem auto;
}
  
/* Header */
header {
    background-color: #f8f8f8;
    padding: 1rem 0;
    border-bottom: 1px solid #eaeaea;
}
header .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}
header p {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.paper-links {
    display: flex;
    gap: 3rem;
    margin: 1rem 0;
    justify-content: center;
}
.paper-links a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    text-align: center;
}
.paper-links img {
  height: 40px; /* slightly bigger */
    width: auto;
    margin-bottom: 0.5rem;
}
nav ul {
    list-style: none;
    display: flex;
    gap: 1rem;
}
nav a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
  }
  
  /* Footer */
  footer {
    background-color: #f8f8f8;
    padding: 1rem 0;
    text-align: center;
    border-top: 1px solid #eaeaea;
    margin-top: 2rem;
  }
  footer a {
    color: #333;
  }
  
  /* Section styling */
  section {
    margin-bottom: 3rem;
  }
  
  /* Code blocks */
  pre {
    background: #f4f4f4;
    padding: 1rem;
    overflow-x: auto;
    border-radius: 4px;
    font-size: 0.9rem;
  }
  
  /* Reward function code box fixed height and scrollable */
  #rewardFunctionDisplay pre {
    height: 500px;
    overflow-y: auto;
    font-size: clamp(0.65rem, 1.3vw, 0.85rem); /* smaller code font */
    line-height: 1.35;
  }
  
  /* Dropdowns and controls */
  select, label {
    margin: 0.5rem;
    font-size: 1rem;
  }

.project-image {
  text-align: center;
  margin: 1.5rem auto;
  width: 100%;
  max-width: 800px;
}
.project-image img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Responsive, centered image blocks for newly added sections */
.project-splash {
  text-align: center;
  margin: 1.5rem auto;
  /* make splash about 2/3 the width of the normal project-image (which uses max-width:800px) */
  width: 66.666%;
  max-width: 533px; /* ~2/3 of 800px */
}
.project-objects {
  text-align: center;
  margin: 1.5rem auto;
  /* make objects set about 2/3 the width like the splash */
  width: 66.666%;
  max-width: 533px; /* ~2/3 of 800px */
}
.project-range {
  text-align: center;
  margin: 1.5rem auto;
  width: 100%;
  max-width: 800px; /* keep range image full-width like project-image */
}
.project-splash img,
.project-objects img,
.project-range img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  object-fit: contain; /* avoid cropping and keep aspect ratio */
}

/* Mobile override: images become full-width on narrow screens */
@media (max-width: 768px) {
  .project-splash,
  .project-objects,
  .project-range {
    width: 100%;
    max-width: 100%;
  }
}

/* Center Overview and Authors */
#overview, #overview h2, #overview p {
  text-align: center;
}

/* Project Video */
.project-video {
    margin: 2rem auto;
    width: 100%;
    max-width: 800px;
}
.project-video video {
    width: 100%;
    max-width: 900px; /* never wider than this on desktops */
    height: auto;
    display: block;
    margin: 0.5rem auto;
}

/* Video grid: responsive CSS Grid prevents crowding on large screens and collapses to 2x2 on small screens */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  justify-items: center;
  align-items: start;
}
.video-grid .video-container {
  width: 100%;
  max-width: 320px; /* limit how wide a single tile can grow on large screens */
}
.video-grid .video-container video,
.video-grid .video-container iframe {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 768px) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr); /* ensure 2 columns on narrow screens */
  }
}

/* Tables */
.table-responsive {
    overflow-x: auto;
    margin: 2rem 0;
}
.table-responsive table {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  border-collapse: collapse;
  font-size: clamp(11px, 1.2vw, 14px);
  table-layout: auto; /* allow columns to size to content */
}
.table-responsive th,
.table-responsive td {
  padding: 0.4rem 0.6rem;
  text-align: left;
  border: none; /* remove heavy cell borders */
  font-size: inherit;
  line-height: 1.35;
  vertical-align: middle;
}
.table-responsive th { font-weight: 600; }
.table-responsive th[colspan] { border-bottom: 1px solid rgba(0,0,0,0.12); }
.table-responsive th[rowspan],
.table-responsive td[rowspan] {
    vertical-align: middle;
}

/* Real-world table specific styling */
.real-world-table tr.metrics-header {
    border-bottom: 2px solid #000;
}

/* Standardize font sizes, cell padding and cell wrapping for the paper tables under assets/tables */
.paper-table,
.paper-table table,
.paper-table th,
.paper-table td {
  font-family: Cambria, "Times New Roman", Times, serif;
  font-size: clamp(11px, 1.1vw, 13px); /* responsive */
  line-height: 1.35;
}
.paper-table { text-align: center; }
.paper-table table.booktabs {
  table-layout: auto;     /* allow columns to size to content */
  width: 100%;
  white-space: nowrap;    /* prevent wrapping so intrinsic widths are preserved */
  word-break: normal;     /* avoid forced breaks; horizontal scroll will handle overflow */
}
.paper-table th,
.paper-table td {
  padding: .28rem .45rem;
  vertical-align: middle;
}

/* Ensure the group header underline spans and lines up across tables */
.paper-table .group-head th {
  border-bottom: 1px solid rgba(0,0,0,0.12);
}

/* Make first column (usually "LLM" or "Approach") a fixed-ish width so its underline lines up */
.paper-table th:first-child,
.paper-table td:first-child {
  text-align: left;
  width: auto;
  min-width: 70px;
}

/* Metrics separator row (e.g., ROT / TTT) - remove heavy divider between bottom rows */
.paper-table .metrics-row td {
  border-bottom: none;
}

/* Small tweak for tight tables */
.paper-table .tight td,
.paper-table .tight th { padding-top:.28rem; padding-bottom:.28rem; }

/* Strong global override: let paper/booktabs tables size to their content
   and avoid large fixed widths that force columns to expand. Use wrappers
   for scroll when necessary. */
.paper-table table.booktabs,
.table-responsive table {
  table-layout: auto !important; /* size columns to content */
  width: auto !important;        /* avoid forcing full-width distribution */
  max-width: 100%;
  min-width: 0 !important;      /* prevent large minimum widths from stretching table */
  display: inline-table;        /* shrink-wrap table to its content width */
}

/* By default allow header text to wrap so columns can shrink; for headings that must not wrap
   use the .nowrap utility class on the <th> element. */
/* Prevent wrapping in all table header/data cells by default so column widths shrink to content
   and the table can overflow horizontally inside its scroll wrapper instead of wrapping text. */
.paper-table th,
.paper-table td,
.table-responsive th,
.table-responsive td {
  white-space: nowrap;
}

/* Utility to re-enable wrapping for specific cells/headers if needed (e.g., long descriptive labels). */
.wrap { white-space: normal !important; }

/* Utility: prevent wrapping when needed */
.nowrap { white-space: nowrap; }


/* Center headers and table cell content */
.paper-table table.booktabs thead th,
.table-responsive table thead th {
  text-align: center;
}

/* Center the first column cells too (user requested) */
.paper-table td:first-child,
.table-responsive td:first-child {
  text-align: center;
}
/* Constrain the first column so it does not force excessive width. Allow wrapping if needed. */
.paper-table th:first-child,
.table-responsive th:first-child,
.paper-table td:first-child,
.table-responsive td:first-child {
  width: auto !important;
  min-width: 40px !important;
  max-width: 180px; /* prevent the first column from growing unbounded */
  overflow-wrap: anywhere; /* allow breaking long labels if needed */
}

/* Align the inline-table to the left inside its scroll wrapper so it doesn't center */
/* Center booktabs tables that shrink-wrap to content */
.table-wrap {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  text-align: center;
  margin: 0.75rem auto;
}

/* Center full-width responsive tables */
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  text-align: center; /* centers the inline-table inside if any */
  margin: 0.75rem auto;
}
#results h3, .results-heading { text-align: center !important; }

/* Captions: ensure they start on a fresh line below inline-table wrappers */
.paper-table caption,
.table-responsive caption {
  display: block;      /* already block in many cases, reinforce */
  width: 100%;
  float: none;
  clear: both;         /* force new line below preceding inline elements */
  margin-top: .4rem;
}

/* Center section headers for results tables */
#results h3 { text-align: center; }

/* Ensure outer .paper-table container centers its contents */
.paper-table { margin-left: auto; margin-right: auto; }

/* Improve breaking behavior for all table cells so columns can shrink to the smallest
   practical width based on content. This helps with distilled table and numeric columns. */
.paper-table th,
.paper-table td,
.table-responsive th,
.table-responsive td {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .paper-links {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    nav ul {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
    
    .table-responsive table {
        font-size: 12px;
    }
    .table-responsive th,
    .table-responsive td {
        padding: 0.25rem;
    }

    /* Make selectors stack vertically and occupy full width on mobile for neatness */
    .dropdowns {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      align-items: stretch;
    }
    .dropdowns label, .dropdowns select {
      width: 100%;
      margin: 0.25rem 0;
    }

    /* Make reward code box shorter on mobile for easier scrolling */
    #rewardFunctionDisplay pre {
      height: 320px;
    }

    /* Enlarge the paper link icons roughly 2x on mobile and desktop */
    .paper-links img {
      height: 80px;
    }
}


/* Mobile: prevent tables from shrinking to fit narrow viewports. Keep their intrinsic width
   based on content, and make wrappers scroll horizontally. This avoids squishing cells. */
@media (max-width: 768px) {
  .paper-table table.booktabs,
  .table-responsive table {
    /* ensure the table keeps the width it needs for its content */
    min-width: -webkit-max-content;
    min-width: -moz-max-content;
    min-width: max-content;
    width: auto !important;
    display: inline-table; /* shrink-wrap to intrinsic width */
  }

  /* Wrapper becomes a block-level scroller across full viewport width */
  .table-wrap, .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    text-align: left; /* keep table left-aligned inside scroller for predictability */
  }
  /* Prefer no wrapping inside table cells on mobile so values keep their space; scroller prevents overflow issues */
  .paper-table td,
  .paper-table th,
  .table-responsive td,
  .table-responsive th {
    white-space: nowrap;
  }
}