/*
 * The speed chart. One stylesheet, because the chart is drawn in two places - the home page and
 * the benchmark runner - by one renderer (assets/js/bench-chart.js) from one results file
 * (assets/data/benchmark.json). Keeping a second copy of these rules beside the runner would
 * have them drift, and a comparison chart that does not match the benchmark it claims to come
 * from is worse than no chart.
 */

/* name | bar | value. The track is the only flexible column, so the bars all
   start and end on the same two lines whatever the labels say. */
.bar-chart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 13px 10px;
  align-items: center;
}

.bar-name { font-size: 0.88rem; font-weight: 500; white-space: nowrap; }
.bar-name.us { font-weight: 700; color: #003794; }

/* The two modes for one library, stacked. Each is a short bar rather than a full
   row of its own: the pair is one library, and a row each made the chart twice as
   tall and read as ten separate things rather than five compared twice. */
.bar-tracks {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bar-track {
  position: relative;
  display: flex;
  /* Half the old single-bar height, so a stacked pair occupies what one bar used
     to. The load/convert split is still legible at this size because it is a change
     of colour rather than a line - which is what it was doing at 30px anyway. */
  height: 13px;
  background: #fff;
  border: 1px solid #e4e9f0;
  border-radius: 3px;
  overflow: hidden;
}

/* Two segments, because the two costs behave differently: loading is paid once
   per visit whatever the page holds, rendering scales with how much maths is on
   it. A single total would hide that KaTeX's problem is the second one. */
.bar-load   { background: #9db8dd; flex: 0 0 auto; }
.bar-render { background: #003794; flex: 0 0 auto; }

/* The getting-ready strip: the same light blue as the legend's own "Getting ready" swatch,
   drawn shorter and with a gap above it so the eye takes it as the lead-in to the bar below
   rather than a fourth thing being compared. It used to be the download size in grey, which
   was the one quantity on the chart that was not a time and needed a scale of its own. */
.bar-track.is-load {
  height: 7px;
  margin-bottom: 4px;
}

/* The speech row of each pair, in green. Both modes are on the one chart now rather
   than behind a toggle - the interesting comparison is between them, and a toggle
   asks the reader to hold one set of bars in their head while looking at the other.
   Colour is what separates them, so the pairing reads without a second legend. */
.bar-track.is-speech .bar-load   { background: #9fd0b6; }
.bar-track.is-speech .bar-render { background: #136b42; }


/* When the run the chart came from happened, and over what. The chart is only worth
   anything if you can see how old it is. */
.bar-when {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: #54647c;
}
.bar-when strong { color: #24324a; font-weight: 600; }

/* A bar that runs off the scale, cut with the conventional break so it cannot be
   read as a measurement. Needed only in speech mode, where MathJax's 516.7 ms is
   eight times the width of the chart - every bar in the default view fits. */
.bar-track.is-clipped::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  right: 7px;
  width: 15px;
  background: repeating-linear-gradient(112deg, #fff 0 4px, transparent 4px 9px);
}
.bar-key .k-break {
  background: repeating-linear-gradient(112deg, #54647c 0 2px, transparent 2px 4px);
}

/* "Not available" is a fact about the library, not a measurement, so the row keeps
   its shape but draws no bar - an empty track would read as "instantly". */
.bar-track.is-empty {
  background: repeating-linear-gradient(135deg, #f4f6fa 0 6px, #eef1f6 6px 12px);
  align-items: center;
}

/* Said in the track rather than only in its title, small enough to sit inside 13px and
   quiet enough that a row of these never competes with the bars it stands in for. The track
   column is 1fr and can shrink under the 119px this takes on a narrow phone, so it ellipsises
   rather than being cut mid-letter by the track's overflow; the title keeps the full sentence. */
.bar-note {
  flex: 1;
  min-width: 0;
  padding-left: 7px;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #7b879a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The mode switch that used to sit above the chart is gone: both modes are drawn
   together now, so there is nothing to switch between. Its rules went with it. */

/* Both totals together, each in its bar's colour, so which number belongs to which
   mode needs no legend: "9.2 | 15.9 ms". A library with no spoken text shows one. */
.v-plain  { color: #003794; }
.v-speech { color: #136b42; }
.v-sep    { color: #c3cbd8; margin: 0 4px; font-weight: 400; }
.v-unit   { color: #54647c; font-weight: 400; margin-left: 4px; font-size: 0.82em; }

.bar-val {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: #54647c;
  white-space: nowrap;
}
.bar-val.us { color: #003794; font-weight: 700; }

.bar-key {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 12px 0 0;
  font-size: 0.78rem;
  color: #54647c;
}

.bar-key span { display: inline-flex; align-items: center; gap: 6px; }

.bar-key i {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  display: inline-block;
}

.bar-key .k-load { background: #9db8dd; }
.bar-key .k-render { background: #003794; }
.bar-key .k-speech { background: #136b42; }

.bar-foot {
  margin: 12px 0 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: #54647c;
}

/* Said out loud when benchmark.json carries pendingRerun. A chart showing a superseded
   run without saying so is worse than no chart, and this is the site's own claim about
   its own speed - it is the last place to be quiet about it. */
.bar-stale { color: #8a4b00; font-weight: 600; }