/* three-dials template (scripts/blog-interactives/templates/three-dials.mjs).
   Linked from the template's own panel, so only pages with this figure load it.
   Builds on interactive.css (bi-panel, bi-choices, bi-legend, bi-readout*). */
.bi-td { --bi-thumb: 30px; }
.bi-td-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bi-td-dial {
  --bi-fill: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px 14px 4px;
  border: 2px solid var(--line);
  border-radius: 20px;
  background: var(--card);
}
.bi-td-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bi-td-name {
  position: relative;
  padding-left: 20px;
  font: 600 1.05rem/1.25 "Fredoka", "Nunito", sans-serif;
  color: var(--ink);
}
.bi-td-name::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bi-swatch, var(--purple));
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(59, 42, 82, 0.12);
  transform: translateY(-50%);
}
.bi-td-value { font-weight: 800; font-size: 0.86rem; color: var(--violet); white-space: nowrap; }
.bi-td-hint { flex: 1 0 auto; margin: 4px 0 0; font-size: 0.88rem; line-height: 1.35; color: var(--ink-soft); }

/* Native range input, restyled in the dial's colour: 44 px hit area. */
.bi-td-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  margin: 4px 0 0;
  background: transparent;
  cursor: pointer;
}
.bi-td-range:disabled { cursor: default; }
.bi-td-range:focus { outline: none; }
.bi-td-range::-webkit-slider-runnable-track {
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bi-swatch) 0, var(--bi-swatch) calc(var(--bi-thumb) / 2 + var(--bi-fill) * (100% - var(--bi-thumb))), #efe8f7 calc(var(--bi-thumb) / 2 + var(--bi-fill) * (100% - var(--bi-thumb))), #efe8f7 100%);
}
.bi-td-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--bi-thumb);
  height: var(--bi-thumb);
  margin-top: calc((12px - var(--bi-thumb)) / 2);
  border: 4px solid var(--bi-swatch);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 0 rgba(59, 42, 82, 0.16);
}
.bi-td-range::-moz-range-track { height: 12px; border-radius: 999px; background: #efe8f7; }
.bi-td-range::-moz-range-progress { height: 12px; border-radius: 999px; background: var(--bi-swatch); }
.bi-td-range::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--bi-thumb);
  height: var(--bi-thumb);
  border: 4px solid var(--bi-swatch);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 0 rgba(59, 42, 82, 0.16);
}
.bi-td-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--purple); }
.bi-td-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--purple); }
.bi-td-dial:has(.bi-td-range:focus-visible) { border-color: #c4b5fd; }

@media (max-width: 640px) {
  .bi-td-list { grid-template-columns: 1fr; gap: 8px; }
  .bi-td-dial { padding: 10px 14px 2px; }
  .bi-td-hint { flex: none; }
}