.efficiency {
  --chart-ink: #19303c;
  --chart-muted: #5c6e75;
  --chart-line: #dde5e5;
  margin: 2.5rem auto;
  padding: clamp(18px, 3vw, 38px);
  border: 1px solid #d6dede;
  border-radius: 18px;
  background: #fff;
  color: var(--chart-ink);
  font-family: "IBM Plex Sans", sans-serif;
  max-width: 1280px;
  box-sizing: border-box;
}
.efficiency * {
  box-sizing: border-box;
}
.efficiency-heading {
  text-align: center;
}
.efficiency-kicker {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  font-weight: 600;
  color: #607b7d;
  margin: 0 0 10px;
}
.efficiency .efficiency-heading h2 {
  font-size: clamp(22px, 3vw, 31px);
  letter-spacing: -0.035em;
  margin: 0 0 9px;
  line-height: 1.2;
  color: #19303c;
}
.efficiency-heading > p:last-child {
  font-size: 14px;
  color: var(--chart-muted);
  margin: 0;
}
.efficiency-tabs {
  display: flex;
  justify-content: center;
  width: max-content;
  margin: 24px auto 22px;
  background: #edf2f1;
  border-radius: 40px;
  padding: 4px;
  gap: 3px;
}
.efficiency-tabs button {
  border: 0;
  background: transparent;
  color: #526265;
  padding: 12px 22px;
  border-radius: 28px;
  cursor: pointer;
  font:
    600 13px "IBM Plex Sans",
    sans-serif;
}
.efficiency-tabs button[aria-pressed="true"] {
  background: #fff;
  color: #146c5b;
  box-shadow: 0 1px 5px #19303c24;
}
.efficiency button:focus-visible,
.efficiency select:focus-visible,
.efficiency-point:focus-visible {
  outline: 3px solid #d3a84e;
  outline-offset: 3px;
}
.efficiency-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 18px;
  margin-bottom: 16px;
}
.efficiency-controls label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #50686d;
}
.efficiency select {
  font:
    400 12px "IBM Plex Sans",
    sans-serif;
  color: #19303c;
  background: #fff;
  border: 1px solid #cfdbdb;
  border-radius: 5px;
  padding: 8px 26px 8px 9px;
  max-width: 100%;
}
.efficiency-method,
.efficiency-coverage {
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: var(--chart-muted);
  max-width: 900px;
  margin: 12px auto 0 !important;
  text-align: center;
}
.efficiency-plot-scroll {
  overflow-x: auto;
  margin: 10px -12px 0;
}
.efficiency-plot {
  display: block;
  width: 100%;
  min-width: 920px;
  overflow: visible;
}
.efficiency-grid {
  stroke: #e6ecec;
  stroke-width: 1;
}
.efficiency-axis {
  fill: none;
  stroke: #9baeb1;
  stroke-width: 1.5;
}
.efficiency-tick {
  font-size: 11px;
  fill: #62757b;
}
.efficiency-axis-title {
  font-size: 10px;
  font-weight: 600;
  fill: #3c555e;
  letter-spacing: 0.05em;
}
.efficiency-point {
  cursor: pointer;
  outline: none;
}
.efficiency-label {
  font-size: 11px;
  font-weight: 600;
  fill: #19303c;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 5px;
  stroke-linejoin: round;
}
.efficiency-effort {
  font-size: 9px;
  font-weight: 400;
  fill: #617277;
}
.efficiency-leader {
  stroke: #c4d1d1;
  stroke-width: 1;
}
.efficiency-range {
  stroke-width: 5;
  stroke-dasharray: 4 3;
  opacity: 0.45;
}
.efficiency-point.is-selected > circle:first-of-type,
.efficiency-point:focus > circle:first-of-type {
  stroke-width: 5;
}
.efficiency-point:focus .efficiency-label {
  fill: #0b6554;
}
.efficiency-detail {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 104px;
  padding: 15px 18px;
  margin: 22px auto 18px;
  border: 1px solid #dce6e4;
  border-left: 3px solid #146c5b;
  border-radius: 7px;
  background: #f6f9f8;
  font-size: 12px;
  line-height: 1.5;
  color: #52686e;
}
.efficiency-detail strong {
  color: #19303c;
  font-size: 14px;
}
.efficiency code {
  font-size: 11px;
  overflow-wrap: anywhere;
}
.efficiency a {
  color: #146c5b;
}
.efficiency-table {
  font-size: 12px;
  border-top: 1px solid var(--chart-line);
  padding-top: 16px;
}
.efficiency-table summary {
  cursor: pointer;
  font-weight: 600;
}
.efficiency-table-scroll {
  overflow: auto;
  margin-top: 14px;
}
.efficiency table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 12px;
}
.efficiency caption {
  text-align: left;
  margin-bottom: 10px;
  color: #52686e;
}
.efficiency th,
.efficiency td {
  padding: 10px 12px;
  border-bottom: 1px solid #e4eaea;
  white-space: nowrap;
}
.efficiency thead {
  background: #f0f5f4;
}
.efficiency th small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: #62757b;
  margin-top: 3px;
}
.efficiency-download {
  font-size: 11px !important;
  margin: 17px 0 0 !important;
  color: #62757b;
  text-align: center;
}
@media (max-width: 600px) {
  .efficiency {
    margin: 24px 0;
    padding: 20px 12px;
    border-radius: 10px;
  }
  .efficiency-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .efficiency-controls select {
    width: 100%;
    font-size: 11px;
  }
  .efficiency-tabs button {
    padding: 11px 19px;
  }
  .efficiency-heading {
    padding: 0 8px;
  }
  .efficiency-plot-scroll {
    margin: 12px 0 0;
  }
  .efficiency-method,
  .efficiency-coverage {
    text-align: left;
  }
  .efficiency-detail {
    min-height: 150px;
  }
  .efficiency-plot-scroll:after {
    content: "Scroll chart horizontally to see every model →";
    display: block;
    font-size: 10px;
    color: #62757b;
    padding: 6px 0;
  }
  .efficiency-label {
    font-size: 10px;
  }
}

.efficiency-point circle:not(.efficiency-hit),
.efficiency-point text,
.efficiency-point line {
  pointer-events: none;
}
.efficiency-point.is-selected > circle:not(.efficiency-hit):not(:last-of-type) {
  stroke-width: 5;
}
.efficiency-hit:focus-visible {
  outline: 3px solid #d3a84e;
  outline-offset: 2px;
}

/* Keep article prose narrow while the plot uses the available page width. */
[data-efficiency-chart] {
  position: relative;
  left: 50%;
  width: min(1120px, calc(100vw - 48px));
  transform: translateX(-50%);
}