/*
  DiMastro — Bench Tools (Impedance / RC-Ripple / Tone Stack)
  ------------------------------------------------------------------
  Extends the .tbc widget system from tube-bias-calculator.css with a
  handful of extra components those three tools need that the bias
  calculator doesn't: multi-column input grids, preset buttons, a
  three-up result strip, and a response-curve canvas. Everything here
  still reads the shared --tbc-* tokens from styles.css, so it stays
  in lockstep with the rest of the site automatically.

  Load order on a tool page: styles.css -> nav.css ->
  tube-bias-calculator.css -> bench-calculators.css.
*/

/* stack two .tbc widgets on one page (rc-ripple-calculator) */
.tbc + .tbc { margin-top: 22px; }

/* ---------- input grids ---------- */
.tbc-grid-2,
.tbc-grid-3 {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}
.tbc-grid-2 { grid-template-columns: 1fr 1fr; }
.tbc-grid-3 { grid-template-columns: 1fr 1fr 1fr; }

/* value + unit-select pair (e.g. "10" + "kΩ") sitting in one field */
.tbc-input-pair {
  display: flex;
  gap: 8px;
}
.tbc-input-pair .tbc-input { flex: 1 1 auto; }
.tbc-input-pair .tbc-select { flex: 0 0 92px; padding-right: 26px; }

/* ---------- preset buttons ---------- */
.tbc-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}

.tbc-preset-btn {
  font-family: var(--tbc-font-display);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tbc-ink-muted);
  background: var(--tbc-well);
  border: 1px solid var(--tbc-border);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}
.tbc-preset-btn:hover,
.tbc-preset-btn:focus-visible {
  border-color: var(--tbc-glow-dim);
  color: var(--tbc-glow);
  background: var(--tbc-glow-soft);
}
.tbc-preset-btn.is-active {
  color: #241a0f;
  background: var(--tbc-glow);
  border-color: var(--tbc-glow);
  font-weight: 600;
}

/* ---------- range sliders ---------- */
.tbc-range-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12.5px;
  color: var(--tbc-ink-muted);
}

.tbc-range-field .tbc-field-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.tbc-range-value {
  font-family: var(--tbc-font-mono);
  font-size: 12.5px;
  color: var(--tbc-glow);
}

.tbc-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--tbc-border);
  outline: none;
  accent-color: var(--tbc-glow);
  cursor: pointer;
}
.tbc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tbc-glow);
  border: 2px solid var(--tbc-bg);
  box-shadow: 0 0 0 1px var(--tbc-glow-dim);
  cursor: pointer;
}
.tbc-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tbc-glow);
  border: 2px solid var(--tbc-bg);
  box-shadow: 0 0 0 1px var(--tbc-glow-dim);
  cursor: pointer;
}

/* ---------- results strip (2 or 3 up) ---------- */
.tbc-results {
  display: grid;
  grid-template-columns: repeat(var(--tbc-results-cols, 2), 1fr);
  gap: 12px;
  margin-top: 18px;
}

.tbc-result-item {
  background: rgba(42, 33, 25, 0.8);
  border: 1px solid var(--tbc-border-soft);
  border-radius: var(--tbc-radius-sm);
  padding: 14px 14px 12px;
  text-align: center;
}

.tbc-result-label {
  font-family: var(--tbc-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tbc-ink-faint);
  margin: 0 0 6px;
}

.tbc-result-value {
  font-family: var(--tbc-font-mono);
  font-size: 20px;
  color: var(--tbc-glow);
  text-shadow: 0 0 18px var(--tbc-glow-soft);
  line-height: 1.2;
}

.tbc-result-summary {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--tbc-ink-faint);
  text-align: center;
  line-height: 1.6;
}

/* ---------- frequency-response graph ---------- */
.tbc-graph-label {
  display: block;
  font-family: var(--tbc-font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tbc-ink-faint);
  margin: 22px 0 8px;
}

.tbc-graph-wrap {
  background: var(--tbc-well);
  border: 1px solid var(--tbc-border);
  border-radius: var(--tbc-radius-sm);
  padding: 10px;
}

.tbc-graph-wrap canvas {
  display: block;
  width: 100%;
  height: 240px;
}

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .tbc-grid-2, .tbc-grid-3 { grid-template-columns: 1fr; }
  .tbc-results { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .tbc-preset-btn { transition: none; }
}