/* The ranked list (decision 0012). Plain CSS in a file of its own for each chart form, not in
   the components, so that adding or changing one form never changes the stylesheet another
   form's embeds load, nor the story embeds: their frozen versions must render for ever
   (decision 0009). The pages that draw a ranked list link this file. It uses the house
   tokens (`tokens.css`), so it follows light and dark. The frozen-page guard fingerprints it
   with each page. */

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Ranked list ------------------------------------------------------------------- */

.rk {
  display: flex;
  flex-direction: column;
  /* The size the value text is set in, so that the room kept for it (measured in ch) is right. */
  font-size: 14px;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rk li {
  display: grid;
  grid-template-columns: 2.25ch 1fr;
  column-gap: 10px;
  align-items: start;
}

.rk .rank {
  grid-row: 1 / span 2;
  padding-top: 1px;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.rk .name {
  grid-column: 2;
  margin-bottom: 5px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.3;
}

.rk .plot {
  position: relative;
  grid-column: 2;
  height: 12px;
  margin-right: calc(var(--vw) * 1.15 + 0.75rem);
}

.rk .zero {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: calc(var(--z) * 1%);
  width: 1px;
  background: var(--axis);
}

.rk .bar {
  position: absolute;
  top: 0;
  left: calc(var(--s) * 1%);
  width: calc(var(--w) * 1%);
  height: 12px;
  border-radius: 0 4px 4px 0;
  background: var(--context);
}

.rk .bar.neg {
  border-radius: 4px 0 0 4px;
}

.rk .val {
  position: absolute;
  top: -3px;
  left: calc(var(--e) * 1% + 8px);
  color: var(--ink-2);
  font-size: inherit;
  font-variant-numeric: tabular-nums;
  line-height: 18px;
  white-space: nowrap;
}

/* What the headline names: teal, and bolder text, so it never depends on colour alone. */
.rk .hl .bar {
  background: var(--accent);
}

.rk .hl .name,
.rk .hl .val {
  color: var(--ink);
  font-weight: 600;
}

/* A total or average row: dark, unranked, name in weight 600. */
.rk .total .bar {
  background: var(--ink-2);
}

.rk .total .name,
.rk .total .val {
  color: var(--ink);
  font-weight: 600;
}

/* The share card: larger type and tighter rows, so ten rows fit and the text survives
   downscaling. */
.rk-card {
  gap: 12px;
  font-size: 26px;
}

.rk-card li {
  grid-template-columns: 2.4ch 1fr;
  column-gap: 14px;
}

.rk-card .rank {
  font-size: 22px;
}

.rk-card .name {
  margin-bottom: 4px;
  font-size: 22px;
}

.rk-card .plot {
  height: 18px;
}

.rk-card .bar {
  height: 18px;
  border-radius: 0 5px 5px 0;
}

.rk-card .bar.neg {
  border-radius: 5px 0 0 5px;
}

.rk-card .val {
  top: -4px;
  line-height: 26px;
}

.rk-card .zero {
  top: -1px;
  bottom: -1px;
  width: 2px;
}

/* More than ten rows (a ranking with an average below it): tighter, to fit the card. */
.rk-dense {
  gap: 7px;
  font-size: 23px;
}

.rk-dense .rank,
.rk-dense .name {
  font-size: 20px;
}

.rk-dense .name {
  margin-bottom: 2px;
}

.rk-dense .plot,
.rk-dense .bar {
  height: 15px;
}

.rk-dense .val {
  top: -4px;
  line-height: 22px;
}