/* Figure: the four weight functions w(d).
   Behaviour lives in static/js/weight-functions.js;
   markup is <d-figure id="weight-functions"> in src/index.html.
   The plot is a white panel in either theme (its line colors are the panel
   family's); the toggles around it follow the page theme. */
.wf {
  --wf-ink: var(--vx-panel-ink, #16160f);
  --wf-muted: var(--vx-panel-muted, #6b6a63);
  --wf-rule: var(--vx-panel-rule, #cfcec6);
  --wf-grid: var(--vx-panel-grid, #e6e5dd);
  --wf-chrome-muted: var(--vx-muted, #6b6a63);
  --wf-chrome-rule: var(--vx-rule, #d8d7cf);
  margin: 1.5rem 0 1rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
}

.wf-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
}
.wf-label {
  color: var(--wf-chrome-muted);
}
.wf-toggles {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wf-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  padding: 5px 10px;
  color: inherit;
  background: transparent;
  border: 1px solid var(--wf-chrome-rule);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.5;
}
.wf-btn:hover {
  border-color: var(--wf-chrome-muted);
}
.wf-btn.is-on {
  opacity: 1;
  border-color: var(--vx-active-outline, #ffa69e);
}
.wf-btn i {
  font-family: Georgia, "Times New Roman", serif;
}
/* The swatch sits on a white chip so the panel-line colors read in dark mode too. */
.wf-swatch {
  background: var(--vx-panel, #fff);
  border-radius: 2px;
}

.wf-scale {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 0 8px;
}
.wf-scale input[type="range"] {
  width: 112px;
  accent-color: var(--vx-control, #16160f);
}
.wf-scale-value {
  min-width: 3.4em;
  font-variant-numeric: tabular-nums;
  color: var(--wf-chrome-muted);
}
.wf-label i {
  font-family: Georgia, "Times New Roman", serif;
}

.wf-svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--vx-panel, #fff);
  border-radius: 3px;
  touch-action: none;
}
.wf-grid line {
  stroke: var(--wf-grid);
}
.wf-axis path,
.wf-axis line {
  stroke: var(--wf-rule);
}
.wf-axis text {
  fill: var(--wf-muted);
  font-size: 11px;
}
.wf-axis-title,
.wf-note {
  fill: var(--wf-muted);
  font-size: 11px;
}
.wf-cutoff {
  stroke: var(--wf-muted);
  stroke-dasharray: 3 3;
}
.wf-curve {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: opacity 150ms;
}
.wf-curve-label {
  font-size: 12px;
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--vx-panel, #fff);
  stroke-width: 3px;
  transition: opacity 150ms;
}
.wf-curve.is-hidden,
.wf-curve-label.is-hidden {
  opacity: 0;
}
.wf-guide line {
  stroke: var(--wf-muted);
  stroke-width: 1;
}
.wf-hit {
  fill: transparent;
  cursor: crosshair;
}
.wf-readout {
  min-height: 1.4em;
  margin-top: 6px;
  font-size: 12px;
  color: var(--wf-chrome-muted);
  font-variant-numeric: tabular-nums;
}
.wf-readout i {
  font-family: Georgia, "Times New Roman", serif;
}