/* Structure comes from /css/features.css; this file encodes stage type
   in the strip and its legend. */

.tdf-strip-cell.flat,
.tdf-swatch.flat { background-color: var(--color-neutral); }

.tdf-strip-cell.hilly,
.tdf-swatch.hilly { background-color: var(--color-success); }

.tdf-strip-cell.mountain,
.tdf-swatch.mountain { background-color: var(--color-danger); }

.tdf-strip-cell.itt,
.tdf-swatch.itt { background-color: var(--color-violet); }

/*
 * Stage type is also encoded by pattern, not colour alone: hilly gets
 * diagonal stripes and the time trial horizontal ones, so the green /
 * red pair (hilly / mountain) and the purple / grey pair still read
 * apart under red-green colour blindness. Stripes use the page
 * background so they invert correctly in dark mode.
 */
.tdf-strip-cell.hilly,
.tdf-swatch.hilly {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 2px,
    var(--color-bg) 2px 3.5px
  );
}

.tdf-strip-cell.itt,
.tdf-swatch.itt {
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0 2px,
    var(--color-bg) 2px 3.5px
  );
}

.tdf-strip-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 0.4em;
}

.tdf-swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-right: 0.15em;
}

.tdf-log {
  height: 180px;
  font-size: 0.78em;
}