/* ===== Self-Adaptive VLA project page custom styles ===== */

:root {
  --sav-cyan: #1fb8d6;
  --sav-violet: #7b6ee0;
  --sav-red: #e8474b;
  --sav-ink: #1a1a2e;
  --sav-muted: #555;
  --sav-soft: #f3f2fb;
}

body {
  font-family: 'Noto Sans', sans-serif;
  color: var(--sav-ink);
  background: #fff;
}

.hero.sav-header {
  background: radial-gradient(1200px 500px at 50% -120px, rgba(123, 110, 224, 0.12), rgba(255, 255, 255, 0) 70%);
}

.sav-gradient {
  background: linear-gradient(90deg, #1fd8ea 0%, var(--sav-violet) 55%, var(--sav-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.publication-title {
  font-family: 'Google Sans', sans-serif;
  letter-spacing: -0.5px;
}
.publication-subtitle,
.publication-authors { font-family: 'Google Sans', sans-serif; }
.author-block { white-space: nowrap; }
.sav-note { font-size: 0.9rem; color: var(--sav-muted); margin-top: 0.2rem; }

/* section titles */
.sav-section-title {
  font-family: 'Google Sans', sans-serif;
  font-weight: 700;
}
.sav-eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--sav-violet);
  margin-bottom: 0.4rem;
}
.sav-lead {
  max-width: 740px;
  margin: 0.4rem auto 0;
}

/* media cards */
.sav-video {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 6px 24px rgba(26, 26, 46, 0.12);
}
.sav-video video { display: block; width: 100%; height: auto; }

.sav-figure {
  margin: 0 auto;
}
.sav-figure img {
  display: block;
  width: 100%;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(26, 26, 46, 0.10);
}

/* numbered method steps */
.sav-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 1.6rem;
}
.sav-step {
  background: var(--sav-soft);
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.sav-step h4 {
  font-family: 'Google Sans', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  margin-bottom: 0.4rem;
}
.sav-step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  border-radius: 50%;
  font-size: 0.8rem;
  color: #fff;
  background: linear-gradient(135deg, var(--sav-cyan), var(--sav-violet));
}
@media (max-width: 768px) {
  .sav-steps { grid-template-columns: 1fr; }
}

hr.sav-rule {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(123, 110, 224, 0.35), transparent);
  margin: 0;
}

/* ===== trial rows ===== */
:root {
  --sav-ok: #2fb36b;
  --sav-fail: #e8474b;
  --sav-mid: #e0a52f;
}
.sav-trials {
  display: grid;
  gap: 14px;
  align-items: start;
}
.sav-trials.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 680px; margin: 0 auto; }
.sav-trials.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sav-trials.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sav-trial-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
  font-family: 'Google Sans', sans-serif;
  font-size: 0.88rem;
}
.sav-trial-head .tag {
  font-weight: 700;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--sav-soft);
}
.sav-trial-head .res { font-weight: 600; }
.res.ok, .score.ok { color: var(--sav-ok); }
.res.fail, .score.fail { color: var(--sav-fail); }
.score.mid { color: var(--sav-mid); }
.sav-ctx {
  margin-top: 5px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--sav-muted);
}
@media (max-width: 768px) {
  .sav-trials.cols-3,
  .sav-trials.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== cross-station columns ===== */
.sav-cross {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}
.sav-col video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: #000;
  box-shadow: 0 6px 24px rgba(26, 26, 46, 0.12);
}
.sav-col.is-ours video { outline: 3px solid var(--sav-violet); outline-offset: 2px; }
.sav-col-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 8px;
  font-family: 'Google Sans', sans-serif;
  line-height: 1.25;
}
.sav-col-head .where { font-weight: 700; font-size: 0.95rem; }
.sav-col-head .who { font-size: 0.8rem; color: var(--sav-muted); min-height: 2.1em; }
.sav-col-head .score { font-weight: 700; font-size: 1.15rem; }
.sav-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  font-size: 0.85rem;
  color: var(--sav-muted);
}
.sav-legend i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-left: 6px;
}
.sav-legend i.ok { background: var(--sav-ok); }
.sav-legend i.fail { background: var(--sav-fail); }
@media (max-width: 768px) {
  .sav-cross { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== selector pills ===== */
.sav-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 1rem;
}
.sav-pills button {
  font-family: 'Google Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--sav-ink);
  background: var(--sav-soft);
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 7px 18px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.sav-pills button:hover { background: #e6e3fb; }
.sav-pills button.active {
  color: #fff;
  background: linear-gradient(90deg, var(--sav-cyan), var(--sav-violet));
  box-shadow: 0 4px 14px rgba(123, 110, 224, 0.35);
}
.sav-pills.is-small button { font-size: 0.8rem; padding: 4px 13px; }
.sav-pills.is-small button.active { background: var(--sav-violet); box-shadow: none; }

/* title on a single line on wide screens; wraps naturally on phones */
@media (min-width: 900px) {
  .sav-one-line { white-space: nowrap; }
}
.sav-video.is-light { background: #fff; }