/* Shared presentation for the population-genetics interactives. */
.hwe-article {
  --hwe-blue: var(--bs-blue);
  --hwe-green: var(--bs-green);
  --hwe-gold: var(--bs-yellow);
  --hwe-orange: var(--bs-orange);
  --hwe-surface: color-mix(in srgb, var(--bs-body-bg) 65%, white);
  --hwe-rule: color-mix(in srgb, var(--bs-body-bg) 78%, var(--bs-body-color));
  color-scheme: light;
}
.hwe-article.quarto-dark {
  --hwe-surface: color-mix(in srgb, var(--bs-body-bg) 96%, var(--bs-body-color));
  color-scheme: dark;
}
.hwe-article :is(.panel, .wahlund-dashboard) {
  background: var(--hwe-surface);
  color: var(--bs-body-color);
  border: 1px solid var(--hwe-rule);
  border-radius: .4rem;
  padding: clamp(.85rem, 2vw, 1.4rem);
  margin: 1.5rem 0;
}
.hwe-article :is(.panel, .wahlund-dashboard) :is(input, select, button, output, label) {
  font-family: inherit;
  font-size: .9rem;
  color: inherit;
}
.hwe-article :is(.panel, .wahlund-dashboard) :is(input[type="number"], select) {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--hwe-rule);
  border-radius: .3rem;
  padding: .35rem .55rem;
  line-height: 1.5;
  height: auto;
  min-height: 2.2rem;
  box-shadow: none;
}
.hwe-article :is(.panel, .wahlund-dashboard) input[type="range"] {
  appearance: none;
  background: transparent;
  height: 1.5rem;
  padding: 0;
  min-width: 0;
  accent-color: var(--bs-link-color);
}
.hwe-article input[type="range"]::-webkit-slider-runnable-track {
  height: .3rem;
  border-radius: 1rem;
  background: var(--hwe-rule);
  border: 0;
}
.hwe-article input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: .95rem;
  height: .95rem;
  margin-top: -.325rem;
  background: var(--bs-link-color);
  border: 2px solid var(--hwe-surface);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--bs-link-color);
}
.hwe-article input[type="range"]::-moz-range-track {
  height: .3rem;
  border-radius: 1rem;
  background: var(--hwe-rule);
  border: 0;
}
.hwe-article input[type="range"]::-moz-range-thumb {
  width: .75rem;
  height: .75rem;
  background: var(--bs-link-color);
  border: 2px solid var(--hwe-surface);
  border-radius: 50%;
}
.hwe-article input[type="radio"] { accent-color: var(--bs-link-color); }
.hwe-article :is(input, select, button):focus-visible {
  outline: 2px solid var(--bs-link-color);
  outline-offset: 3px;
}
.hwe-article .panel button {
  background: transparent;
  border: 1px solid var(--hwe-rule);
  border-radius: .3rem;
  padding: .35rem .7rem;
  cursor: pointer;
}
.hwe-article .panel button:hover { background: var(--bs-body-bg); }
.hwe-article :is(.formula, .wahlund-equation) {
  font-family: var(--site-display-font);
  font-size: 1.05rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
  padding: .4rem 0;
}
.hwe-article :is(.note, .caption, .wahlund-note, .wahlund-substitution) {
  color: var(--bs-secondary-color);
  font-size: .85rem;
  line-height: 1.6;
}
.hwe-article :is(.legend, .wahlund-legend) {
  display: flex;
  gap: .5rem 1rem;
  flex-wrap: wrap;
  font-size: .8rem;
  margin: 1rem 0;
}
.hwe-article :is(.swatch, .wahlund-legend i) {
  display: inline-block;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  margin-right: .35rem;
}
.hwe-article :is(.tablewrap, .wahlund-table) { overflow-x: auto; }
.hwe-article :is(.panel, .wahlund-dashboard) table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
.hwe-article :is(.panel, .wahlund-dashboard) :is(th, td) {
  padding: .55rem .4rem;
  border-bottom: 1px solid var(--hwe-rule);
}
.hwe-article .eqbox {
  background: transparent;
  border: 0;
  border-left: 2px solid var(--hwe-rule);
  border-radius: 0;
  padding: .5rem 1rem;
  margin: 1rem 0;
}
.hwe-article details { margin: 1rem 0; }
.hwe-article summary { cursor: pointer; }
.hwe-article :is(.plot, .wahlund-plot) { width: 100%; height: auto; display: block; }
.hwe-article .math.display,
.hwe-article .wahlund-equation {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  text-align: center;
  margin: 1.25rem 0;
}
.hwe-article .wahlund-equation .katex { font-size: 1.1em; }

.hwe-article .plot text { fill: var(--bs-body-color); }
.hwe-article .plot path[stroke="var(--hwe-rule)"] { stroke-opacity: .5; }
.hwe-article .wahlund-controls form { display: grid !important; }
.hwe-article .wahlund-controls form > label { width: auto !important; }
.hwe-article .wahlund-controls form > div { margin-left: 0; }

.hwe-article :is(.wahlund-metrics > div, .hwe-result) {
  border: 1px solid var(--hwe-rule);
  border-radius: .3rem;
  padding: 1rem;
  margin: .4rem 0;
}
.hwe-article :is(input[type="number"], select):focus-visible {
  outline-offset: -2px;
}
.hwe-article .wahlund-controls select,
.hwe-article .wahlund-controls select::picker(select) {
  appearance: base-select;
}
.hwe-article .wahlund-controls select::picker(select) {
  background: var(--hwe-surface);
  color: var(--bs-body-color);
  border: 1px solid var(--hwe-rule);
  border-radius: .3rem;
  padding: .25rem;
  font-family: var(--bs-body-font-family);
  box-shadow: 0 .3rem .8rem color-mix(in srgb, var(--bs-body-color) 12%, transparent);
}
.hwe-article .wahlund-controls option {
  font: inherit;
  padding: .4rem .6rem;
  border-radius: .2rem;
}
.hwe-article .wahlund-controls option:checked {
  color: var(--bs-body-bg);
  background: var(--bs-link-color);
}
.hwe-article .wahlund-controls option:not(:checked):is(:hover, :focus) {
  background: var(--bs-body-bg);
}
.hwe-article .wahlund-controls option:focus-visible {
  outline: 2px solid var(--bs-body-color);
  outline-offset: -2px;
}

.hwe-article .hwe-result > span { display: block; font-size: .85rem; }
.hwe-article .hwe-result > strong {
  display: block;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  margin: .4rem 0;
}