/* Self-Saliency project page — page-specific styles.
   Layered on static/css/nvidia-project.css, the shared NVIDIA Research project
   stylesheet, which supplies the top bar, the section/figure/BibTeX/footer
   rules, the green button and every --nv-* token used below. Only what that
   file does not already cover belongs here.

   Light only, deliberately: the NVIDIA template has no dark variant, and a
   second theme would drift from it on every future edit. */

:root {
  --measure: 62rem;   /* prose column; --nv-max is the page's outer width */
}

/* ---------- type scale ----------
   Every size in the shared stylesheet is an absolute px value, so raising the
   body alone scales nothing: each one has to be lifted by hand. These are the
   vendored sizes at roughly 1.15x, rounded to whole px. This block is the only
   place that overrides nvidia-project.css purely for size — change the factor
   here rather than sprinkling sizes through the rules below. */

body.nv            { font-size: 19px; }
.nv-brand          { font-size: 17px; }
.nv-topnav         { font-size: 16px; }
.nv-btn            { font-size: 17px; }
.nv-section h2     { font-size: 32px; }
.nv-section h3     { font-size: 26px; }
.nv-figure figcaption { font-size: 18.5px; }
.nv-bibtex         { font-size: 15px; }
.nv-footer         { font-size: 15px; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 16px; top: 16px; z-index: 100;
  background: var(--nv-white); color: var(--nv-ink);
  padding: 10px 16px; border: 2px solid var(--nv-green);
}

:focus-visible { outline: 2px solid var(--nv-green); outline-offset: 2px; }

/* ---------- hero ---------- */

.nv-paper-head {
  padding: 56px 0 8px;
  text-align: center;
}

.nv-paper-head h1 {
  margin: 0;
  font-size: clamp(32px, 4.1vw, 48px);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.01em;
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}

.nv-paper-head .nv-subtitle {
  margin: 12px auto 0;
  max-width: 46ch;
  font-size: 22px;
  color: var(--nv-ink-3);
  text-wrap: balance;
}

/* the reference page puts author names in the green, because there every name
   is a link to a person page. Only two of ours have one, so the colour is set
   on the paragraph: the three names read as one list rather than two green and
   one black, and the two that are links still underline on hover. */
.nv-paper-head .nv-authors {
  margin: 26px auto 0;
  max-width: 60ch;
  font-size: 21px;
  color: var(--nv-green-dark);
}
.nv-paper-head .nv-authors sup { font-size: 0.7em; color: var(--nv-ink-3); }
/* the shared .nv-authors a is white-on-black, for the dark .nv-hero this page
   does not use. On white that renders the name invisible above its underline. */
.nv-paper-head .nv-authors a {
  color: var(--nv-green-dark);
  border-bottom: 0;
}
.nv-paper-head .nv-authors a:hover { text-decoration: underline; }

.nv-paper-head .nv-affil {
  margin: 10px auto 0;
  max-width: 68ch;
  font-size: 17px;
  color: var(--nv-ink-3);
}
/* each affiliation is atomic: lines break between them, never inside a name */
.nv-paper-head .nv-affil span {
  display: inline-block; white-space: nowrap; margin: 0 9px;
}
.nv-paper-head .nv-affil sup { font-size: 0.8em; }

/* buttons, centred under the authors rather than left-aligned */
.nv-paper-head .nv-buttons { justify-content: center; margin-top: 28px; }
.nv-buttons li { list-style: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.nv-buttons ul, ul.nv-buttons { padding: 0; margin-top: 28px; }

/* a button for something not released yet: present, obviously inert */
.nv-btn[aria-disabled="true"] {
  background: transparent;
  color: var(--nv-ink-3) !important;
  border-color: var(--nv-rule);
  cursor: not-allowed;
}
.nv-btn[aria-disabled="true"]:hover {
  background: transparent;
  color: var(--nv-ink-3) !important;
  border-color: var(--nv-rule);
}
/* the small line under a button: the paper's arXiv id, or a release status.
   The status variant is upper-cased; an identifier must not be, or 2610.05023
   arrives under a shouted "ARXIV:". */
.nv-btn-note {
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--nv-ink-3);
  font-variant-numeric: tabular-nums;
}
.nv-btn-note--soon { letter-spacing: 0.08em; text-transform: uppercase; }

.nv-btn svg { width: 1.05em; height: 1.05em; flex: none; }
.nv-btn svg.ico-fill { fill: currentColor; }
.nv-btn svg.ico-stroke {
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- TL;DR ---------- */

.nv-tldr p {
  font-size: 27px;
  line-height: 1.58;
  color: var(--nv-ink);
  max-width: 60ch;
}
.nv-tldr b { font-weight: 700; }

/* ---------- sections ---------- */

/* Section copy and captions both go up ~1.15x, keeping the gap between them: 22/18.5
   is the 19/16 they were. h3 and the TL;DR move with them, since both sizes exist to
   sit a fixed step above body copy -- raise the body alone and h3 lands on top of it. */
.nv-section p { max-width: var(--measure); font-size: 22px; }
.nv-section h3 { font-weight: 700; }
.nv-section h3:first-of-type { margin-top: 0; }

/* the teaser follows the head directly; it does not need a full section's gap */
.nv-paper-head + .nv-section { padding-top: 28px; }

/* the teaser sits on its own near-black canvas; match it so the clip does not
   sit inside a lighter box */
.nv-figure--dark { background: #111111; padding: 10px; }

.nv-figure figcaption b { color: var(--nv-ink-2); font-weight: 700; }
.nv-figure--narrow { max-width: 54rem; }
.nv-figure--mid    { max-width: 40.5rem; }   /* 1.5x the half-width it replaced */

/* the significance key under a caption: same size and colour, its own block */
.nv-footnotes {
  display: block;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}

/* ---------- tables ---------- */

.nv-table-scroll {
  overflow-x: auto;
  background: var(--nv-white);   /* reads as a card on the grey .nv-alt sections */
  border: 1px solid var(--nv-rule);
  border-top: 4px solid var(--nv-black);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

th, td {
  padding: 8px 14px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--nv-rule);
}

/* losing cells recede, so the winner carries weight AND ink contrast without
   recruiting a hue, which would fight the green accent */
tbody td { color: var(--nv-ink-3); }
td.best { font-weight: 800; color: var(--nv-ink); }

thead th {
  position: sticky; top: 0;
  background: var(--nv-white);
  color: var(--nv-ink-2);
  font-weight: 700;
  font-size: 15px;
  vertical-align: bottom;
  border-bottom: 2px solid var(--nv-ink);
}
thead tr:not(.colgroup) th:first-child { text-align: left; }

th[scope="row"] {
  position: sticky; left: 0;
  background: var(--nv-white);
  text-align: left;
  font-weight: 500;
  color: var(--nv-ink);
}

tbody tr:last-child th, tbody tr:last-child td { border-bottom: none; }

.colgroup th {
  text-align: center;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--nv-ink-3);
  border-bottom: 1px solid var(--nv-rule);
  padding-bottom: 5px;
}

.col-ours { background: rgba(118, 185, 0, 0.09); }
thead th.col-ours { background: rgba(118, 185, 0, 0.09); }

/* the summary rows lead the table, so the rule that sets them apart goes under
   the last of them rather than over the first */
tr.summary td, tr.summary th[scope="row"] { font-weight: 700; }
tbody:first-of-type tr.summary:last-child th[scope="row"],
tbody:first-of-type tr.summary:last-child td { border-bottom: 2px solid var(--nv-ink); }

/* ---------- footer ---------- */

.nv-footer p { margin: 0 0 6px; max-width: var(--measure); }

@media (max-width: 640px) {
  .nv-paper-head { padding-top: 36px; }
  .nv-tldr p { font-size: 24px; }
  th, td { padding: 7px 10px; }
}