html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Noto Sans', sans-serif;
}

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

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

.vc {
  font-variant: small-caps;
}

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

.publication-venue {
  color: #555;
  font-weight: bold;
}

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

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

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

/* Institution logos sit just outside the title column on screens 1024px and
   wider. The title column keeps its full 960px where it can (so the title's
   first line stays long) and the logos shrink a little on narrower laptops;
   below 1024px there is no room, so they form a row above the title. */
.institution-logos {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.25rem 2rem 0;
}

.institution-logos img {
  display: block;
  height: 100px;
  width: auto;
}

@media screen and (min-width: 1024px) {
  .hero {
    --logo: clamp(90px, calc((100vw - 960px) / 2 - 2.5rem), 150px);
    --hero-w: min(960px, calc(100vw - 2 * (2.5rem + var(--logo))));
    position: relative;
  }

  .institution-logos {
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(var(--hero-w) + 2 * (var(--logo) + 1rem));
    padding: 2.25rem 0 0;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .institution-logos a {
    pointer-events: auto;
  }

  .institution-logos img {
    height: var(--logo);
  }

  .hero .hero-body .container {
    max-width: var(--hero-w);
  }
}

@media screen and (max-width: 768px) {
  .institution-logos {
    padding: 1rem 1rem 0;
  }

  .institution-logos img {
    height: 88px;
  }
}

/* VisCurate additions */

section[id] {
  scroll-margin-top: 3.25rem;
}

.navbar {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.vc-brand {
  font-family: 'Google Sans', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
}

.section-title {
  text-align: center;
}

.section-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 0.6rem auto 0;
  border-radius: 2px;
  background: #8b0000;
}

.section h3.title {
  margin-top: 2.5rem;
}

.figure-img {
  width: 100%;
  border-radius: 10px;
}

mjx-container[display="true"] {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}

/* Relation cascade. Fills and outlines are the relation boxes of the overview figure;
   --rel-ink is a darker shade of the same hue for readable text. */
.rel-merge { --rel: #3d8b5a; --rel-bg: #eef8f1; --rel-ink: #2f6e47; }
.rel-param { --rel: #d38300; --rel-bg: #fff7e8; --rel-ink: #9a5f00; }
.rel-comp { --rel: #4a7ea9; --rel-bg: #f2f6fa; --rel-ink: #3a6890; }
.rel-dist { --rel: #c54a4a; --rel-bg: #fdeeee; --rel-ink: #a63b3b; }
.rel-unc { --rel: #8a8a8a; --rel-bg: #f4f4f4; --rel-ink: #5f5f5f; }

.cascade {
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
  font-size: 0.95rem;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.cascade caption {
  caption-side: top;
  padding-bottom: 0.25rem;
  font-size: 0.88rem;
  text-align: center;
  color: #555;
}

table.cascade thead th {
  padding: 0 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  color: #999;
}

table.cascade thead th:first-child {
  text-align: center;
}

table.cascade thead th:last-child {
  text-align: right;
}

table.cascade td {
  padding: 0.6rem 1.1rem;
  text-align: left;
  vertical-align: middle;
}

/* Each relation is a rounded band, like the relation boxes in the figure. */
table.cascade td.rel-name,
table.cascade td.rel-edit {
  border-top: 1.5px solid var(--rel);
  border-bottom: 1.5px solid var(--rel);
  background: var(--rel-bg);
}

table.cascade td.rel-name {
  border-left: 1.5px solid var(--rel);
  border-radius: 10px 0 0 10px;
  font-weight: 700;
  white-space: nowrap;
  color: #2b2b2b;
}

table.cascade td.rel-edit {
  border-right: 1.5px solid var(--rel);
  border-radius: 0 10px 10px 0;
  text-align: right;
}

.cascade tbody.side td.rel-name,
.cascade tbody.side td.rel-edit {
  border-top-style: dashed;
  border-bottom-style: dashed;
}

.cascade tbody.side td.rel-name {
  border-left-style: dashed;
}

.cascade tbody.side td.rel-edit {
  border-right-style: dashed;
}

/* The check column is a numbered line joining the bands in order. */
table.cascade td.step-cell {
  position: relative;
  width: 3.5rem;
  padding: 0;
  text-align: center;
}

.cascade tbody:not(.side) .step-cell::before {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: #e2d9d9;
}

.cascade tbody:not(.side) tr:first-child .step-cell::before {
  top: 50%;
}

.cascade tbody:not(.side) tr:last-child .step-cell::before {
  bottom: 50%;
}

.step {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--rel-ink);
  box-shadow: 0 0 0 4px #fff;
  font-weight: 700;
  color: #fff;
}

.step-tag {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rel-ink);
}

.sym {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  margin-right: 0.75rem;
  border: 1.5px solid var(--rel);
  border-radius: 50%;
  background: #fff;
  font-weight: 700;
  color: var(--rel-ink);
}

.pill {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  border: 1px solid var(--rel);
  border-radius: 999px;
  background: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--rel-ink);
}
/* Findings, as cards with a dark red left border. */
.finding-list {
  display: grid;
  gap: 0.9rem;
}

.finding-card {
  padding: 1rem 1.25rem;
  border-left: 4px solid #8b0000;
  background: #fafafa;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Results slider: tabs, a framed scroll-snap track, arrows and numbered pagination. */
.slider-tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.25rem;
  padding: 0.3rem;
  background: #f6f2f2;
  border: 1px solid #ece3e3;
  border-radius: 999px;
}

.slider-tab {
  padding: 0.45rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: none;
  font-family: 'Google Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.slider-tab i {
  margin-right: 0.35rem;
}

.slider-tab:hover {
  color: #8b0000;
}

.slider-tab.is-active {
  background: #8b0000;
  color: #fff;
}

.slider-frame {
  border: 1px solid #ece6e6;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.slider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  background: #faf6f6;
  border-bottom: 1px solid #f1e8e8;
}

.slider-title {
  font-family: 'Google Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333;
}

.slider-count {
  flex-shrink: 0;
  padding: 0.1rem 0.65rem;
  border-radius: 999px;
  background: #8b0000;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
}

.slider-body {
  position: relative;
}

.slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.slides::-webkit-scrollbar {
  display: none;
}

.slide {
  flex: 0 0 100%;
  margin: 0;
  padding: 1.25rem 4rem 0.5rem;
  scroll-snap-align: start;
}

.fig-zoom {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 420px;
  cursor: zoom-in;
}

.fig-zoom img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.slide figcaption {
  max-width: 720px;
  margin: 1rem auto 0;
  font-size: 0.88rem;
  color: #555;
  text-align: justify;
}

.slider-arrow {
  position: absolute;
  top: calc(1.25rem + 210px);
  z-index: 1;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid #e8dddd;
  border-radius: 50%;
  background: #fff;
  color: #8b0000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.2s, color 0.2s;
}

.slider-arrow:hover {
  background: #8b0000;
  color: #fff;
}

.slider-arrow.prev {
  left: 0.75rem;
}

.slider-arrow.next {
  right: 0.75rem;
}

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem 0 1.1rem;
}

.slider-dot {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: none;
  font-weight: 600;
  color: #8b0000;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.slider-dot:hover {
  background: #f6eeee;
}

.slider-dot.is-active {
  background: #8b0000;
  color: #fff;
}

@media screen and (max-width: 768px) {
  /* On phones the tabs form one row that scrolls sideways instead of wrapping. */
  .slider-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .slider-tabs::-webkit-scrollbar {
    display: none;
  }

  .slider-tab {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .slide {
    padding: 1rem 0.75rem 0.5rem;
  }

  .fig-zoom {
    height: 240px;
  }

  .slider-arrow {
    display: none;
  }
}

.lightbox {
  max-width: 92vw;
  max-height: 92vh;
  padding: 1rem;
  border: 0;
  border-radius: 10px;
  outline: none;
  cursor: zoom-out;
}

.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

.lightbox img {
  display: block;
  width: min(1200px, 88vw);
  max-height: 85vh;
  object-fit: contain;
}

/* Overview player: a play/pause button, a seek line and the elapsed time. */
.player svg.diagram {
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
}

.player-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.player-bar[hidden] {
  display: none;
}

.player-toggle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #8b0000;
  color: #fff;
  cursor: pointer;
}

.player-toggle svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: currentColor;
}

.player .icon-play,
.player.is-paused .icon-pause {
  display: none;
}

.player.is-paused .icon-play {
  display: block;
}

.player-time {
  flex-shrink: 0;
  min-width: 5.5rem;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: #555;
}

/* Both sliders fill dark red up to the current value (--p is set by the script). */
.player-range {
  --p: 0%;
  height: 4px;
  margin: 0;
  border-radius: 2px;
  background: linear-gradient(to right, #8b0000 var(--p), #e4dcdc var(--p));
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: height 0.15s;
}

.player-range:hover,
.player-range:focus-visible {
  height: 6px;
}

.player-range::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: #8b0000;
  -webkit-appearance: none;
  appearance: none;
}

.player-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: #8b0000;
}

.player-seek {
  flex: 1 1 10rem;
}

.player-speed {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  font-size: 0.85rem;
  color: #555;
}

.player-rate {
  width: 6rem;
}

.player-rate-value {
  min-width: 2.6rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #8b0000;
}

/* Large screens: a wider content column, with the figure slider and the
   taxonomy table sized to use it. Text stays at its normal size. */
@media screen and (min-width: 1408px) {
  .container.is-max-desktop {
    max-width: 1200px;
  }

  .cascade {
    max-width: 825px;
  }

  .fig-zoom {
    height: 525px;
  }

  .slide figcaption {
    max-width: 900px;
  }

  .slider-arrow {
    top: calc(1.25rem + 262px);
  }
}