/* The dumbbell chart. Plain CSS in a file of its own for each chart form (decision 0012), so that changing one
   form never changes another form's frozen embeds (decision 0009). Uses the house tokens. */

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

/* --- Dumbbell ---------------------------------------------------------------------- */

.db {
  font-size: 14px;
}

.db .key {
  display: flex;
  gap: 18px;
  align-items: center;
  margin: 0 0 14px;
  color: var(--ink-2);
  font-size: 1em;
}

.db .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 50%;
}

.db .dot.a,
.db .pt.a {
  background: var(--series-1);
}

.db .dot.b,
.db .pt.b {
  background: var(--series-2);
}

.db ol {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

.db .name {
  grid-column: 2 / span 2;
  margin-bottom: 5px;
  color: var(--ink-2);
  line-height: 1.3;
}

.db .plot {
  position: relative;
  grid-column: 2;
  height: 14px;
  margin: 0 calc(var(--vw) * 1.15 + 0.5rem);
}

.db .note {
  grid-column: 3;
  align-self: start;
  line-height: 14px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}

.db .join {
  position: absolute;
  top: 6px;
  left: calc(var(--from) * 1%);
  width: calc((var(--to) - var(--from)) * 1%);
  height: 2px;
  background: var(--axis);
}

.db .pt {
  position: absolute;
  top: 0;
  left: calc(var(--p) * 1%);
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border: 2px solid var(--surface);
  border-radius: 50%;
}

.db .lv {
  position: absolute;
  top: -2px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  line-height: 18px;
  white-space: nowrap;
}

.db .lv.l {
  right: calc((100 - var(--p)) * 1% + 14px);
}

.db .lv.r {
  left: calc(var(--p) * 1% + 14px);
}

/* The axis spans the values, not zero, so it is drawn and labelled. */
.db .axis {
  position: relative;
  height: 18px;
  margin: 8px calc(10px + 4.5ch + var(--vw) * 1.15 + 0.5rem) 0
    calc(2.25ch + 10px + var(--vw) * 1.15 + 0.5rem);
  border-top: 1px solid var(--axis);
}

.db .tick {
  position: absolute;
  top: 3px;
  left: calc(var(--p) * 1%);
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* On a narrow screen the axis would crowd; every value is written at its dot anyway. */
@container (max-width: 30rem) {
  .db .axis {
    display: none;
  }
}

.db-card {
  font-size: 20px;
}

.db-card .note {
  line-height: 18px;
}

.db-card .key {
  margin-bottom: 12px;
}

.db-card ol {
  gap: 7px;
}

.db-card .name {
  margin-bottom: 3px;
}

.db-card .rank {
  font-size: 20px;
}

.db-card .plot,
.db-card .pt {
  height: 18px;
}

.db-card .pt {
  top: 0;
  width: 18px;
  height: 18px;
  margin-left: -9px;
}

.db-card .join {
  top: 8px;
}

.db-card .lv {
  top: -3px;
  line-height: 24px;
}

.db-card .lv.l {
  right: calc((100 - var(--p)) * 1% + 18px);
}

.db-card .lv.r {
  left: calc(var(--p) * 1% + 18px);
}

.db-card .tick {
  font-size: 18px;
}

.db-card .axis {
  height: 28px;
}