/* Tone Stack Calculator
   Scoped under .ts, nested inside the site's shared .tbc card (see
   tube-bias-calculator.css) so it gets the same background, border,
   radius and shadow as every other bench tool. The custom properties
   below keep their original names (the JS reads several of them via
   getComputedStyle) but now alias the site-wide --tbc-* design tokens
   from styles.css, so this tool always matches the rest of DiMastro
   automatically. */

.ts {
  --chassis:  var(--tbc-bg);
  --panel:    var(--tbc-panel);
  --panel-hi: var(--tbc-panel-raised);
  --rule:     var(--tbc-border-soft);
  --ink:      var(--tbc-ink);
  --dim:      var(--tbc-ink-muted);
  --faint:    var(--tbc-ink-faint);
  --live:     var(--tbc-glow);   /* the active trace: hot filament */
  --edit:     var(--tbc-cold);   /* anything you can change */
  --grid:     var(--tbc-border-soft);
  --grid-key: var(--tbc-border);

  --band-1: #8f5c3a; --band-2: #d8453c; --band-3: #e8843a; --band-4: #e2c44a;
  --band-5: #4fa96b; --band-6: #4a79c4; --band-7: #9d6cc6; --band-8: #9c97a8;

  --display: var(--tbc-font-display);
  --body: var(--tbc-font-body);
  --mono: var(--tbc-font-mono);

  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  container-type: inline-size;
  -webkit-font-smoothing: antialiased;
}

.ts *, .ts *::before, .ts *::after { box-sizing: border-box; }
.ts h1, .ts h2, .ts p, .ts ul, .ts table { margin: 0; }
.ts ul { list-style: none; padding: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── tabs: matches the site's .tbc-mode-btn tab pattern ──── */
.ts-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 18px; margin-bottom: 4px;
  border-bottom: 1px solid var(--tbc-border-soft);
  overflow-x: auto; scrollbar-width: none;
}
.ts-tabs::-webkit-scrollbar { display: none; }
.ts .ts-tabs button {
  font-family: var(--display);
  font-size: 13px; font-weight: 500;
  color: var(--faint);
  background: linear-gradient(180deg, #3c3c3c 0%, #1c1c1c 55%, #0a0a0a 100%);
  border: 1px solid #000;
  border-radius: 10px;
  padding: 9px 16px;
  margin-right: 6px;
  display: flex; align-items: center; justify-content: center;
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -3px 4px rgba(0, 0, 0, .55);
  transition: background .15s ease, box-shadow .15s ease, transform .08s ease, border-color .15s ease;
}
.ts-tab-badge {
  height: 26px; width: auto; max-width: 88px;
  object-fit: contain; display: block;
  filter: brightness(1.25) contrast(1.05) drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
}
/* James is black script — invert it on the dark unpushed button, but leave it
   as-is once selected (its face is Fender's light panel, so black reads fine). */
.ts .ts-tabs button[data-key="james"] .ts-tab-badge {
  filter: invert(1) brightness(1.25) contrast(1.05) drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
}
.ts .ts-tabs button[aria-selected="true"][data-key="james"] .ts-tab-badge {
  filter: brightness(1.05) contrast(1.05) drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
}
/* Fender's chrome-on-black badge needs extra lift against the black button. */
.ts .ts-tabs button[data-key="fender"] .ts-tab-badge {
  filter: brightness(1.7) contrast(1.05) drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
}
/* Vox's gold badge blows out under the default boost — tone it down. */
.ts .ts-tabs button[data-key="vox"] .ts-tab-badge,
.ts .ts-tabs button[aria-selected="true"][data-key="vox"] .ts-tab-badge {
  filter: brightness(.82) contrast(1.05) drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
}
.ts .ts-tabs button:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 7px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 -3px 4px rgba(0, 0, 0, .55);
}
.ts .ts-tabs button:active { transform: translateY(0); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6); }
.ts .ts-tabs button[aria-selected="true"] {
  background: linear-gradient(180deg, var(--tab-hi, #d2d5df) 0%, var(--tab-mid, #bfbfc5) 55%, var(--tab-lo, #898885) 100%);
  border-color: var(--tab-outline, #498aa5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 3px rgba(0, 0, 0, .2);
}
.ts-tabs button:focus-visible,
.ts button:focus-visible, .ts select:focus-visible, .ts input:focus-visible {
  outline: 2px solid var(--edit); outline-offset: 2px;
}

/* ── layout ─────────────────────────────────────────────── */
.ts-body {
  display: grid;
  grid-template-columns: minmax(300px, 5fr) minmax(340px, 7fr);
  gap: 16px;
  margin-top: 18px;
}
@container (max-width: 860px) { .ts-body { grid-template-columns: 1fr; } }

.ts-panel {
  background: var(--panel-hi);
  border: 1px solid var(--tbc-border-soft);
  border-radius: var(--tbc-radius-sm);
  padding: 16px;
  min-width: 0;
}

.ts-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.ts-panel-head h2 {
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase; color: var(--faint);
}

.ts select, .ts button {
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink); background: var(--panel);
  border: 1px solid var(--rule); border-radius: 8px;
  padding: 6px 10px; cursor: pointer;
}
.ts select:hover, .ts button:hover:not(:disabled) { border-color: var(--edit); }
.ts button:disabled { color: var(--faint); cursor: default; }

/* ── schematic ──────────────────────────────────────────── */
.ts-schematic { background: var(--tbc-well); border: 1px solid var(--rule); border-radius: var(--tbc-radius-sm); padding: 8px; }
.ts-schematic svg { display: block; width: 100%; height: auto; }
.ts-schematic .wire { stroke: var(--dim); stroke-width: 1.4; fill: none; }
.ts-schematic .comp { stroke: var(--ink); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.ts-schematic .comp-fill { fill: var(--chassis); }
.ts-schematic .ref  { font: 500 11px var(--mono); fill: var(--dim); }
.ts-schematic .val  { font: 500 11.5px var(--mono); fill: var(--live); }
.ts-schematic .node { font: 500 11px var(--mono); fill: var(--edit); }

/* ── parts table ────────────────────────────────────────── */
.ts-parts { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }
.ts-parts th {
  font-family: var(--mono); font-weight: 400; font-size: 10.5px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--faint);
  text-align: left; padding: 0 8px 6px 0; border-bottom: 1px solid var(--rule);
}
.ts-parts th.num, .ts-parts td.num { text-align: right; padding-right: 0; }
.ts-parts td { padding: 3px 8px 3px 0; border-bottom: 1px solid var(--rule); }
.ts-parts td:first-child { font: 500 12px var(--mono); color: var(--ink); width: 3.5em; }
.ts-parts td:nth-child(2) { color: var(--dim); }
.ts-parts input {
  font: 500 12.5px var(--mono);
  width: 6.5em; text-align: right;
  color: var(--live); background: transparent;
  border: 1px solid transparent; border-bottom-color: var(--rule);
  border-radius: 2px; padding: 2px 4px;
}
.ts-parts input:hover { border-color: var(--rule); background: var(--panel-hi); }
.ts-parts input:focus { color: var(--ink); border-color: var(--edit); background: var(--chassis); }
.ts-parts tr.fixed input { color: var(--dim); }

.ts-hint { font-size: 12px; color: var(--faint); margin-top: 10px; }
.ts-hint code { font: 500 11.5px var(--mono); color: var(--dim); }

/* ── scope ──────────────────────────────────────────────── */
.ts-scope { position: relative; background: var(--tbc-well); border: 1px solid var(--rule); border-radius: var(--tbc-radius-sm); overflow: hidden; }
.ts-scope canvas { display: block; width: 100%; height: auto; touch-action: none; }
.ts-readout {
  position: absolute; top: 8px; right: 10px;
  font: 500 12px var(--mono); color: var(--live);
  background: rgba(22, 17, 13, .85); padding: 3px 7px;
  border: 1px solid var(--rule); border-radius: 2px;
  opacity: 0; transition: opacity .12s; pointer-events: none;
}
.ts-scope.probing .ts-readout { opacity: 1; }

.ts-scope-tools { display: flex; gap: 6px; flex-wrap: wrap; }

/* held curves, labelled like resistor colour bands */
.ts-held { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ts-held:empty { display: none; }
.ts-held li {
  display: flex; align-items: center; gap: 7px;
  font: 500 11px var(--mono); color: var(--dim);
  background: var(--panel-hi); border: 1px solid var(--rule);
  padding: 3px 8px 3px 4px;
}
.ts-held .band { width: 4px; height: 14px; border-radius: 1px; }

/* ── controls ───────────────────────────────────────────── */
.ts-controls { margin-top: 18px; }

.ts-knobs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 30px;
  padding: 16px 20px;
  /* colors sampled from the real faceplate photo of whichever amp is selected */
  background:
    linear-gradient(180deg, var(--face-hi, #d2d5df) 0%, var(--face-mid, #bfbfc5) 45%, var(--face-lo, #898885) 100%);
  border: 1.5px solid var(--face-outline, #498aa5);
  border-radius: var(--tbc-radius-sm);
  outline: 1.5px solid var(--face-outline, #498aa5);
  outline-offset: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .15);
  transition: background .2s ease, border-color .2s ease, outline-color .2s ease;
}

.ts-badge-wrap { flex: 1 1 auto; display: flex; justify-content: center; align-items: center; min-width: 60px; }
.ts-badge { height: 104px; width: auto; display: block; max-width: 260px; object-fit: contain; }

.ts-knobs-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 26px; flex-shrink: 0; }

@container (max-width: 480px) {
  .ts-knobs-row { flex-direction: column; }
  .ts-badge-wrap { flex: 0 0 auto; width: 100%; }
}

.ts-ctl { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; }
.ts-ctl[data-disabled="true"] { opacity: .45; }

.ts-knobs-row .ts-ctl-name {
  font-family: var(--display); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--face-text, #232427);
}

.ts-knob { position: relative; width: 72px; height: 72px; cursor: ns-resize; touch-action: none; border-radius: 50%; }
.ts-knob-face { display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.ts-knob:focus-visible { outline: 2px solid var(--edit); outline-offset: 3px; }
.ts-knob[aria-disabled="true"] { cursor: default; }

.ts-ctl-tail { display: flex; align-items: center; gap: 6px; }
.ts-ctl-num { font: 700 12.5px var(--mono); color: var(--live); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65), 0 0 1px rgba(0, 0, 0, 0.85); }
.ts-ctl select { font-size: 10.5px; padding: 3px 5px; }
.ts-knobs-row .ts-ctl select {
  background: var(--face-select-bg, #e6e7ec);
  color: var(--face-select-text, #232427);
  border-color: var(--face-select-border, #9a9aa2);
}

.ts-ctl-name {
  font-family: var(--display); font-size: 13px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase; color: var(--dim);
}

.ts-ctl-wide {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--rule);
}
.ts-ctl-wide .ts-ctl-tail { gap: 8px; }

/* ── footer ─────────────────────────────────────────────── */
.ts-foot { margin-top: 18px; border-top: 1px solid var(--rule); padding-top: 12px; }
.ts-foot p { font-size: 12.5px; color: var(--faint); }
.ts-foot #stackNote { color: var(--dim); margin-bottom: 5px; }
.ts-foot a { color: var(--dim); }

@media (prefers-reduced-motion: reduce) {
  .ts *, .ts *::before { transition: none !important; }
}