/* VlogReward project page — custom styles */
body {
  font-family: 'Noto Sans', 'Inter', sans-serif;
}

h1, h2, h3, .publication-title, .publication-authors, .teaser {
  font-family: 'Google Sans', 'Noto Sans', sans-serif;
}

.footer .icon-link {
  font-size: 25px;
  color: #000;
}

.link-block a {
  margin-top: 5px;
  margin-bottom: 5px;
}

.teaser .hero-body {
  padding-top: 0;
  padding-bottom: 3rem;
}

.publication-title {
  font-family: 'Google Sans', sans-serif;
}

.section-title {
  text-align: center;
  padding-bottom: 1rem;
}

.publication-authors a {
  color: hsl(204, 86%, 53%) !important;
}

.publication-authors a:hover {
  text-decoration: underline;
}

.author-block {
  display: inline-block;
}

.publication-img {
  width: 100%;
  border-radius: 5px;
}

.figure-img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 8px;
}

.figure-dimensions {
  margin-top: 18px;
}

.six-dim-inner {
  max-width: 860px;
  margin: 0 auto;
}

.dataset-figure-row {
  align-items: stretch;
}

.dataset-figure-col {
  display: flex;
  flex-direction: column;
}

.figure4-col {
  flex: 0 0 40%;
  max-width: 40%;
}

.figure5-col {
  flex: 0 0 60%;
  max-width: 60%;
}

.dataset-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.dataset-figure-row .figure-img {
  display: block;
  height: auto;
}

.figure4-col .figure-img {
  width: 64%;
  max-width: 230px;
}

.figure5-col .figure-img {
  width: 94%;
  max-width: none;
}

.dataset-figure-row .fig-caption {
  margin-top: auto;
  padding-top: 8px;
}

.method-figure-row {
  align-items: center;
}

.method-figure-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.figure6-col {
  flex: 0 0 42%;
  max-width: 42%;
}

.figure7-col {
  flex: 0 0 58%;
  max-width: 58%;
}

.figure6-col .figure-img {
  max-width: 96%;
}

.figure7-col .figure-img {
  max-width: 82%;
}

.reward-panel {
  margin: 4px 0 18px;
  padding: 18px 20px;
  border-left: 4px solid #3273dc;
  background: #f7fafc;
}

.reward-panel .title {
  margin-bottom: 0.75rem;
}

.math-line {
  text-align: center;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 14px 0 18px;
  padding: 4px 0;
}

.math-line mjx-container {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

/* figure captions */
.fig-caption {
  font-size: 0.9rem;
  color: #363636;
  text-align: justify;
  margin-top: 8px;
}

.fig-caption b {
  color: #111;
}

/* six dimensions */
.dim-card {
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 18px 14px;
  height: 100%;
  background: #fafafa;
  transition: transform .15s ease, box-shadow .15s ease;
}

.dim-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

.dim-card .dim-name {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 6px;
  color: #111;
}

.dim-card .dim-desc {
  font-size: 0.85rem;
  color: #555;
  line-height: 1.35;
}

.dim-icon {
  font-size: 1.25rem;
  color: #3273dc;
  margin-bottom: 8px;
}

/* stat tiles */
.stat-tile {
  text-align: center;
  padding: 14px 8px;
  border-radius: 10px;
  background: #f5f7fa;
  height: 100%;
}

.stat-tile .stat-num {
  font-size: 1.7rem;
  font-weight: 800;
  color: #3273dc;
  font-family: 'Google Sans', sans-serif;
}

.stat-tile .stat-label {
  font-size: 0.8rem;
  color: #555;
  margin-top: 4px;
}

/* results table */
.table-container {
  overflow-x: auto;
}

#RawTable {
  font-size: 0.82rem;
  width: 100%;
}

#RawTable thead th {
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  background: #f5f7fa;
}

#RawTable td {
  white-space: nowrap;
}

#RawTable td.model-name {
  text-align: left;
  white-space: nowrap;
}

#RawTable td.num {
  text-align: center;
}

#RawTable tr.group-row td {
  text-align: left;
  font-weight: 700;
  background: #eef2f7;
}

#RawTable tr.subgroup-row td {
  text-align: left;
  font-style: italic;
  background: #f7f9fb;
}

#RawTable tr.highlight-row td {
  background: #eafaf1;
  font-weight: 700;
}

.compact-table {
  font-size: 0.86rem;
  width: 100%;
}

.compact-table th,
.compact-table td {
  text-align: center;
  white-space: nowrap;
}

.compact-table td.model-name {
  text-align: left;
}

.best {
  color: #d81b60;
  font-weight: 700;
}

.sec-underline {
  text-decoration: underline;
}

.svg-img {
  vertical-align: middle;
  height: 18px;
  width: auto;
}

@media screen and (max-width: 768px) {
  .figure4-col,
  .figure5-col,
  .figure6-col,
  .figure7-col {
    flex: none;
    max-width: none;
  }

  .figure4-col .figure-img,
  .figure5-col .figure-img,
  .figure6-col .figure-img,
  .figure7-col .figure-img {
    max-width: 100%;
  }

  .reward-panel {
    padding: 14px 14px;
  }
}