/* ViGAR page additions on top of the MHLA template (index.css) */

.bar-fill.ours { background: linear-gradient(90deg, #6366F1, #06B6D4); }
.bar-fill.base { background: linear-gradient(90deg, #94A3B8, #CBD5E1); }
.bar-fill.base2 { background: linear-gradient(90deg, #cbd5e1, #e2e8f0); }

.hero-tagline {
  margin: 0.6rem auto 0;
  max-width: 820px;
  color: var(--text-secondary);
  font-size: 1.15rem;
  line-height: 1.55;
}
.hero-tagline b { color: #1e293b; }
.affil-logos { display: flex; justify-content: center; align-items: center; gap: 2.2rem; margin: 0.9rem 0 0.2rem; flex-wrap: wrap; }
.affil-logos img { height: 44px; width: auto; object-fit: contain; }

.teaser-caption { max-width: 960px; margin: 0.75rem auto 0; }

/* Promo video */
.promo-wrap {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #0b1020;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
  aspect-ratio: 16 / 9;
}
.promo-wrap video { width: 100%; height: 100%; display: block; background: #0b1020; }
.promo-note { text-align: center; color: var(--text-secondary); font-size: 0.9rem; margin-top: 0.6rem; }

/* Paper-style tables */
.paper-table-wrap {
  overflow-x: auto;
  margin: 1.25rem auto 0.5rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}
.paper-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.paper-table th, .paper-table td { padding: 0.55rem 0.8rem; text-align: center; white-space: nowrap; border-bottom: 1px solid #eef0f3; }
.paper-table th:first-child, .paper-table td:first-child, .paper-table th.l, .paper-table td.l { text-align: left; }
.paper-table thead th { background: #f8fafc; color: #334155; font-weight: 700; font-size: 0.85rem; border-bottom: 2px solid #e2e8f0; }
.paper-table tr.group td { background: #fafbff; color: #64748b; font-style: italic; font-size: 0.82rem; text-align: left; }
.paper-table tr.ours td { background: linear-gradient(90deg, rgba(99, 102, 241, 0.09), rgba(6, 182, 212, 0.07)); font-weight: 700; color: #1e293b; }
.paper-table tr:last-child td { border-bottom: none; }
.paper-table .best { font-weight: 800; color: var(--primary-color); }
.paper-table .second { text-decoration: underline; }
.paper-table small { color: #64748b; font-weight: 500; }
.paper-table td.rowhead { font-weight: 600; color: #334155; text-align: left; }

.table-caption { color: var(--text-secondary); font-size: 0.9rem; text-align: center; margin: 0.4rem auto 0; max-width: 860px; }
.section-lead { max-width: 860px; margin: 0 auto 1rem; color: #334155; font-size: 1.02rem; line-height: 1.7; text-align: justify; }
.subhead { font-size: 1.3rem; font-weight: 700; color: #1e293b; margin: 2.5rem 0 0.4rem; text-align: center; }
.subhead.first { margin-top: 1rem; }

.split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2rem; align-items: center; margin-top: 1.5rem; }
.split p { line-height: 1.7; color: #334155; margin-bottom: 0.8rem; text-align: justify; }
.split .pipeline-caption { text-align: center; }
@media screen and (max-width: 768px) { .split { grid-template-columns: minmax(0, 1fr); } }

.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media screen and (max-width: 900px) { .two-col { grid-template-columns: minmax(0, 1fr); } }
.two-col .paper-table-wrap { margin-top: 0.5rem; }
.two-col .pipeline-card { margin: 0; height: 100%; }

.note-pill { display: inline-block; font-size: 0.8rem; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 0.15rem 0.7rem; margin-top: 0.4rem; }
.link-block .button[aria-disabled="true"] { opacity: 0.55; cursor: default; }

/* Pipeline steps (method) */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.2rem 0 0; }
@media screen and (max-width: 900px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.step { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 1.1rem 1.2rem; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05); }
.step .n { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #6366F1, #06B6D4); margin-bottom: 0.5rem; }
.step h4 { font-weight: 700; color: #1e293b; margin: 0 0 0.35rem; font-size: 1.02rem; }
.step p { color: #475569; font-size: 0.93rem; line-height: 1.55; margin: 0; }
.step code { font-size: 0.85em; background: #f1f5f9; padding: 0.05em 0.35em; border-radius: 5px; color: #334155; }

/* Grouped bar charts */
.gbar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.6rem; }
@media screen and (max-width: 900px) { .gbar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 600px) { .gbar-grid { grid-template-columns: minmax(0, 1fr); } }
.gbar { padding: 0.6rem 0.2rem; }
.gbar .tp-head { font-weight: 700; color: #334155; margin-bottom: 0.4rem; font-size: 0.98rem; }
.gbar .tp-head small { color: #64748b; font-weight: 500; }
.gbar.avg { background: linear-gradient(90deg, rgba(99, 102, 241, 0.07), rgba(6, 182, 212, 0.06)); border-radius: 12px; padding: 0.6rem 0.8rem; }
.tp-speedup { color: var(--primary-color); margin-left: 0.4rem; }
.bar-chart .bar-row + .bar-row { margin-top: 0.35rem; }
.legend { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; margin: 0.4rem 0 1rem; font-size: 0.88rem; color: #475569; }
.legend span::before { content: ""; display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-right: 0.4rem; vertical-align: -1px; }
.legend .l-ours::before { background: linear-gradient(90deg, #6366F1, #06B6D4); }
.legend .l-base::before { background: linear-gradient(90deg, #94A3B8, #CBD5E1); }
.legend .l-base2::before { background: linear-gradient(90deg, #cbd5e1, #e2e8f0); border: 1px solid #cbd5e1; }

/* Demo videos */
.demo-toolbar { display: flex; justify-content: center; align-items: center; gap: 0.6rem; margin: 0.4rem 0 1.4rem; flex-wrap: wrap; color: #475569; font-size: 0.92rem; }
.speed-btns { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 999px; overflow: hidden; background: #fff; }
.speed-btns button { border: 0; background: transparent; padding: 0.35rem 0.9rem; font-weight: 700; color: #475569; cursor: pointer; font-size: 0.9rem; }
.speed-btns button.active { background: linear-gradient(90deg, #6366F1, #06B6D4); color: #fff; }
.task-block { margin-top: 2.2rem; }
.task-head { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
.task-head h3 { font-size: 1.35rem; font-weight: 800; color: #1e293b; margin: 0; }
.task-head .pill { font-size: 0.78rem; font-weight: 700; color: #0e7490; background: #ecfeff; border: 1px solid #a5f3fc; border-radius: 999px; padding: 0.1rem 0.6rem; }
.task-head .score { margin-left: auto; font-size: 0.9rem; color: #475569; }
.task-head .score b { color: var(--primary-color); font-size: 1.05rem; }
.task-instr { color: #475569; font-style: italic; margin-bottom: 0.8rem; font-size: 0.95rem; }
.demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
.demo-grid.cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.demo-grid.cols4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media screen and (max-width: 900px) { .demo-grid, .demo-grid.cols4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 560px) { .demo-grid, .demo-grid.cols2, .demo-grid.cols4 { grid-template-columns: minmax(0, 1fr); } }
.demo-tile { margin: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05); }
.demo-tile .vwrap { position: relative; aspect-ratio: 16 / 9; background: #0f172a; }
.demo-tile video { width: 100%; height: 100%; display: block; object-fit: cover; }
.demo-tile .badge { position: absolute; top: 6px; right: 6px; font-size: 0.6rem; padding: 0.05rem 0.4rem; font-weight: 700; color: #fff; background: rgba(15, 23, 42, 0.65); border-radius: 999px; padding: 0.1rem 0.5rem; pointer-events: none; backdrop-filter: blur(4px); }
.demo-tile figcaption { padding: 0.5rem 0.75rem; font-size: 0.86rem; color: #334155; display: flex; justify-content: space-between; gap: 0.5rem; }
.demo-tile figcaption .dur { color: #94a3b8; font-variant-numeric: tabular-nums; }

/* ICL: goal image + rollout */
.icl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media screen and (max-width: 760px) { .icl-grid { grid-template-columns: minmax(0, 1fr); } }
.icl-tile { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05); }
.icl-tile .pair { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 6px; padding: 6px; background: #f8fafc; }
.icl-tile .goal { position: relative; border-radius: 9px; overflow: hidden; border: 2px solid #2563eb; background: #0f172a; }
.icl-tile .goal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.icl-tile .goal .tag, .icl-tile .roll .tag { position: absolute; left: 6px; top: 6px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.02em; color: #fff; padding: 0.1rem 0.5rem; border-radius: 999px; }
.icl-tile .goal .tag { background: #2563eb; }
.icl-tile .roll { position: relative; border-radius: 9px; overflow: hidden; border: 2px solid #dc2626; background: #0f172a; aspect-ratio: 16 / 9; }
.icl-tile .roll .tag { background: #dc2626; }
.icl-tile .roll video { width: 100%; height: 100%; object-fit: cover; display: block; }
.icl-tile .roll .badge { position: absolute; top: 6px; right: 6px; font-size: 0.6rem; font-weight: 700; color: #fff; background: rgba(15, 23, 42, 0.65); border-radius: 999px; padding: 0.05rem 0.4rem; pointer-events: none; }
.icl-tile figcaption { padding: 0.5rem 0.75rem; font-size: 0.86rem; color: #334155; display: flex; justify-content: space-between; gap: 0.5rem; align-items: center; }
.icl-tile figcaption .dur { color: #94a3b8; font-variant-numeric: tabular-nums; }
.tag-id { font-size: 0.72rem; font-weight: 700; color: #065f46; background: #d1fae5; border-radius: 999px; padding: 0.05rem 0.5rem; margin-left: 0.4rem; }
.tag-ood { font-size: 0.72rem; font-weight: 700; color: #9a3412; background: #ffedd5; border-radius: 999px; padding: 0.05rem 0.5rem; margin-left: 0.4rem; }

.goal-legend { display: flex; gap: 1.4rem; justify-content: center; flex-wrap: wrap; font-size: 0.86rem; color: #475569; margin: 0.2rem 0 1rem; }
.goal-legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 0.35rem; vertical-align: -1px; }

@media screen and (max-width: 768px) {
  .bar-row { grid-template-columns: 64px 1fr 52px; gap: 8px; font-size: 0.85rem; }
  .bar-label { width: auto; }
  .publication-title { font-size: 1.7rem !important; }
  .content.has-text-justified, .section-lead, .split p { text-align: left !important; }
}

/* compact variant for narrow two-column tables */
.paper-table.compact th, .paper-table.compact td { padding: 0.45rem 0.55rem; font-size: 0.86rem; }
.paper-table.compact td.l { white-space: normal; line-height: 1.25; }

/* whole-title gradient (ReVidgen style, adapted to a light background) */
.title-grad { display: inline-block; font-family: 'Caveat', cursive; font-weight: 700; font-size: 4.6rem; line-height: 1.08; letter-spacing: 0.01em; background: linear-gradient(100deg, #111111 0%, #2b2b2b 18%, #8a6218 40%, #c9a24a 55%, #9c7423 72%, #1a1a1a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
@media screen and (max-width: 768px) { .title-grad { font-size: 2.9rem; } }

/* leaderboard / ablation bars */
.lb-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 1.2rem 1.4rem 1rem; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05); margin-top: 1.2rem; }
.lb-head { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.lb-head h3 { font-size: 1.12rem; font-weight: 800; color: #1e293b; margin: 0; }
.lb-head span { color: #64748b; font-size: 0.86rem; }
.lb-row { display: grid; grid-template-columns: 230px 1fr 64px; align-items: center; gap: 0.9rem; padding: 0.3rem 0; }
.lb-row .lb-name { font-weight: 600; color: #334155; font-size: 0.95rem; text-align: right; line-height: 1.15; }
.lb-row .lb-name small { display: block; color: #94a3b8; font-weight: 500; font-size: 0.7rem; margin-top: 0.1rem; }
.lb-row .lb-track { height: 20px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.lb-row .lb-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #94A3B8, #CBD5E1); }
.lb-row.ours .lb-fill { background: linear-gradient(90deg, #6366F1, #06B6D4); }
.lb-row.ours .lb-name { color: var(--primary-color); font-weight: 800; }
.lb-row .lb-val { font-variant-numeric: tabular-nums; font-weight: 700; color: #334155; font-size: 0.95rem; }
.lb-row.ours .lb-val { color: var(--primary-color); }
@media screen and (max-width: 640px) { .lb-row { grid-template-columns: 120px 1fr 54px; gap: 0.5rem; } .lb-row .lb-name { font-size: 0.82rem; } }

/* equal-height figure cards */
.two-col.eq { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); grid-template-rows: auto auto; align-items: end; }
.two-col.eq .pipeline-card { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0.7rem; }
.two-col.eq .pipeline-image { width: 100%; height: auto; align-self: end; }
.two-col.eq .pipeline-caption { margin-top: 0; align-self: start; }
@media screen and (max-width: 900px) { .two-col.eq { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .two-col.eq .pipeline-card { display: block; } }

/* Why ViGAR: align the three paragraphs */
.features-grid .feature-title { min-height: 2.6em; display: flex; align-items: flex-end; justify-content: center; }

/* method name in the hero tagline, DC-SAE style */
.hero-tagline { font-size: 1.35rem; color: #334155; margin-top: 0.4rem; }
.hero-tagline .tagline-name {
  font-size: 1.12em; line-height: 1; vertical-align: baseline; margin-right: 0.1em;
  padding: 0 0.18em 0 0.04em;            /* room for the italic overhang so the R is not clipped */
  letter-spacing: -0.3px;
  background: linear-gradient(90deg, #dc2626 0%, #7c3aed 52%, #2563eb 100%);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* two half-width task blocks side by side (paper cups + steam buns) */
.task-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 0 1.4rem; align-items: start; margin-top: 2.2rem; }
.task-pair .task-block.half { display: grid; grid-template-rows: subgrid; grid-row: span 3; margin-top: 0; }
.task-pair .task-block.half .task-head { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.task-pair .task-block.half .task-head .score { margin-left: 0; }
.task-pair .task-block.half .task-instr { margin-bottom: 0.8rem; }
.demo-grid.cols1 { grid-template-columns: minmax(0, 1fr); }
@media screen and (max-width: 760px) { .task-pair { grid-template-columns: minmax(0, 1fr); } }

.hf-icon { font-style: normal; font-size: 1.05em; line-height: 1; }

/* demo section intro lines */
.demo-lead { text-align: center; color: var(--text-secondary); font-size: 0.95rem; margin: 0.2rem auto 0.4rem; max-width: 820px; }
#demos-section #task-demos > .task-block:first-child { margin-top: 1rem; }
#demos-section #icl-demos > .task-block:first-child { margin-top: 1rem; }