/* ======================================================================
   Tone Stack Simulator Pro — standalone PWA stylesheet
   Tokens + .tbc card + Pro tone-stack widget (.ts) + PWA app shell
   ====================================================================== */

:root {
  --tbc-bg:            #ffffff;
  --tbc-panel:         #f7f7f7;
  --tbc-panel-raised:  #efefef;
  --tbc-well:          #fafafa;
  --tbc-border:        #cccccc;
  --tbc-border-soft:   #dddddd;

  --tbc-ink:           #111111;
  --tbc-ink-muted:     #444444;
  --tbc-ink-faint:     #666666;

  --tbc-glow:          #000000;
  --tbc-glow-dim:      #333333;
  --tbc-glow-soft:     rgba(0, 0, 0, 0.06);

  --tbc-cold:          #333333;
  --tbc-safe:          #111111;
  --tbc-warn:          #333333;
  --tbc-warn-soft:     rgba(0, 0, 0, 0.05);
  --tbc-danger:        #000000;
  --tbc-danger-soft:   rgba(0, 0, 0, 0.06);

  --tbc-font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --tbc-font-body:    "IBM Plex Sans", "Segoe UI", sans-serif;
  --tbc-font-mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --tbc-radius:    0px;
  --tbc-radius-sm: 0px;
}

.tbc {
  font-family: var(--tbc-font-body);
  color: var(--tbc-ink);
  background: #ffffff;
  border: 1px solid #c8d0d8;
  border-radius: 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 8px 24px -8px rgba(0, 0, 0, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.08);
  max-width: 1480px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

.tbc *, .tbc *::before, .tbc *::after { box-sizing: border-box; }

.tbc :focus-visible {
  outline: 2px solid var(--tbc-glow);
  outline-offset: 2px;
}

/* ---------- header ---------- */
.tbc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.tbc-eyebrow {
  font-family: var(--tbc-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tbc-glow);
  margin: 0 0 6px;
}

.tbc-title {
  font-family: var(--tbc-font-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 6px;
  color: var(--tbc-ink);
}

.tbc-sub {
  font-size: 13.5px;
  color: var(--tbc-ink-muted);
  margin: 0;
  max-width: 100ch;
}

.tbc-badge {
  flex: none;
  font-family: var(--tbc-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tbc-ink-faint);
  border: 1px solid var(--tbc-border);
  border-radius: 0;
  padding: 5px 10px;
  white-space: nowrap;
}

/* ---------- warning strip ---------- */
.tbc-warning {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--tbc-danger-soft);
  border: 1px solid rgba(224, 82, 46, 0.35);
  border-radius: 0;
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #f0d3c8;
  margin-bottom: 22px;
}
.tbc-warning[hidden] { display: none; }

.tbc-warning svg { flex: none; margin-top: 2px; color: var(--tbc-danger); }
.tbc-warning strong { color: #fff; }

/* ---------- database-load notice (shown only on the EMBEDDED_TUBES_CSV fallback) ---------- */
.tbc-db-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--tbc-warn-soft);
  border: 1px solid rgba(231, 184, 79, 0.35);
  border-radius: 0;
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tbc-ink-muted);
  margin-bottom: 22px;
}
.tbc-db-notice[hidden] { display: none; }

.tbc-db-notice svg { flex: none; margin-top: 2px; color: var(--tbc-warn); }
.tbc-db-notice strong { color: var(--tbc-warn); }

/* ---------- setup row (tube + voltage) ---------- */
.tbc-setup {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 14px;
  padding: 18px;
  background: rgba(239, 239, 239, 1);
  border: 1px solid var(--tbc-border-soft);
  border-radius: 0;
}

.tbc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--tbc-ink-muted);
}

.tbc-field-label {
  font-family: var(--tbc-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tbc-ink-faint);
}

.tbc-select,
.tbc-input {
  font-family: var(--tbc-font-body);
  font-size: 15px;
  color: var(--tbc-ink);
  background: var(--tbc-well);
  border: 1px solid var(--tbc-border);
  border-radius: 0;
  padding: 10px 12px;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.tbc-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b3a28c' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.tbc-input:focus, .tbc-select:focus {
  border-color: var(--tbc-glow-dim);
  box-shadow: 0 0 0 3px var(--tbc-glow-soft);
  outline: none;
}

.tbc-input-unit {
  position: relative;
  display: flex;
  align-items: center;
}

.tbc-input-unit .tbc-input { padding-right: 54px; }

.tbc-unit {
  position: absolute;
  right: 12px;
  font-family: var(--tbc-font-mono);
  font-size: 11.5px;
  color: var(--tbc-ink-faint);
  pointer-events: none;
}

.tbc-hint {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--tbc-ink-faint);
  min-height: 1.4em;
}

.tbc-hint strong { color: var(--tbc-ink-muted); font-weight: 600; }

/* ---------- Class A / Class AB reference strip ---------- */
.tbc-reference {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--tbc-border-soft);
  border: 1px solid var(--tbc-border-soft);
  border-radius: 0;
  overflow: hidden;
  margin: 18px 0;
}

.tbc-ref-col {
  background: rgba(247, 247, 247, 1);
  padding: 14px 16px;
}

.tbc-ref-col h3 {
  font-family: var(--tbc-font-display);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tbc-ink-muted);
  margin: 0 0 10px;
}

.tbc-ref-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-top: 1px dashed var(--tbc-border-soft);
  font-size: 12.5px;
}

.tbc-ref-row:first-of-type { border-top: none; }

.tbc-ref-row dt { color: var(--tbc-ink-muted); font-weight: 400; }
.tbc-ref-row dt span {
  display: inline-block;
  margin-left: 5px;
  font-family: var(--tbc-font-mono);
  font-size: 10.5px;
  color: var(--tbc-ink-faint);
}
.tbc-ref-row dd {
  margin: 0;
  font-family: var(--tbc-font-mono);
  font-size: 13.5px;
  color: var(--tbc-ink);
  white-space: nowrap;
}

/* ---------- gauge class selector ---------- */
.tbc-class-select {
  max-width: 200px;
  margin: 0 0 18px;
}

/* ---------- mode dial ---------- */
.tbc-modes {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--tbc-border-soft);
  margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tbc-modes::-webkit-scrollbar { display: none; }

.tbc-mode-btn {
  flex: none;
  font-family: var(--tbc-font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--tbc-ink-faint);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 6px 12px;
  margin-right: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease;
}

.tbc-mode-btn:hover { color: var(--tbc-ink-muted); }

.tbc-mode-btn.is-active {
  color: var(--tbc-glow);
  border-bottom-color: var(--tbc-glow);
}

/* ---------- calculation panel ---------- */
.tbc-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}

.tbc-mode-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tbc-mode-group[hidden] { display: none; }

.tbc-mode-copy {
  font-size: 12.5px;
  color: var(--tbc-ink-faint);
  margin: 0 0 2px;
  line-height: 1.5;
}

/* ---------- readout / gauge ---------- */
.tbc-readout {
  position: relative;
  background: var(--tbc-panel-raised);
  border: 1px solid var(--tbc-border-soft);
  border-radius: 0;
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.tbc-tube-frame {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  opacity: 0.3;
  z-index: 0;
  pointer-events: none;
}

.tbc-tube-photo { width: 100%; height: auto; display: block; }

.tbc-gauge-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 240px;
}

.tbc-gauge {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.9));
}

.tbc-gauge-figure {
  font-family: var(--tbc-font-mono);
  font-size: 22px;
  fill: #ffffff;
}

.tbc-gauge-label {
  font-family: var(--tbc-font-body);
  font-size: 9.5px;
  fill: var(--tbc-ink);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tbc-gauge-tick {
  font-family: var(--tbc-font-mono);
  font-size: 8.5px;
  fill: var(--tbc-ink);
}

.tbc-readout-values {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  width: 100%;
  margin-top: 2px;
}

.tbc-big-value {
  text-align: center;
  padding-top: 8px;
  border-top: 1px solid var(--tbc-border-soft);
}

.tbc-big-value .tbc-num {
  display: block;
  font-family: var(--tbc-font-mono);
  font-size: 19px;
  color: var(--tbc-glow);
  text-shadow: 0 0 18px var(--tbc-glow-soft), 0 1px 3px rgba(0, 0, 0, 0.9);
  line-height: 1.2;
}

.tbc-big-value small {
  display: block;
  font-size: 10px;
  color: var(--tbc-ink);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
/*  text-transform: uppercase;*/
  letter-spacing: 0.05em;
  margin-top: 2px;
}

.tbc-steps {
  width: 100%;
  margin: 6px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--tbc-border-soft);
  font-size: 11.5px;
  color: var(--tbc-ink);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tbc-steps span { color: #ffffff; font-family: var(--tbc-font-mono); }

/* ---------- bench reference table ---------- */
.tbc-bench {
  margin-top: 22px;
  border-top: 1px solid var(--tbc-border-soft);
  padding-top: 14px;
}

.tbc-bench summary {
  cursor: pointer;
  font-family: var(--tbc-font-display);
  font-size: 13px;
  color: var(--tbc-ink-muted);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tbc-bench summary::-webkit-details-marker { display: none; }
.tbc-bench summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 150ms ease;
}
.tbc-bench[open] summary::before { transform: rotate(45deg); }

.tbc-bench-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 12.5px;
}
.tbc-bench-table th, .tbc-bench-table td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--tbc-border-soft);
}
.tbc-bench-table th {
  font-family: var(--tbc-font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tbc-ink-faint);
  font-weight: 400;
}
.tbc-bench-table td { color: var(--tbc-ink-muted); font-family: var(--tbc-font-mono); }
.tbc-bench-table td:first-child { font-family: var(--tbc-font-body); color: var(--tbc-ink); }

/* ---------- footer ---------- */
.tbc-footer {
  margin-top: 18px;
  font-size: 11.5px;
  color: var(--tbc-ink-faint);
  line-height: 1.6;
}

/* ---------- responsive ---------- */
@media (max-width: 1480px) {
  .tbc { padding: 16px 12px; }
  .tbc-setup { grid-template-columns: 1fr; }
  .tbc-reference { grid-template-columns: 1fr; }
  .tbc-panel { grid-template-columns: 1fr; }
  .tbc-title { font-size: 22px; }
  .tbc-tube-frame { width: 90%; }
}
/* Mobile: keep elevated card with side margins (Scope pattern) */
@media (max-width: 640px) {
  .tbc {
    margin: 0 !important;
    padding: 14px 12px 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tbc-select, .tbc-input, .tbc-mode-btn { transition: none; }
  .tbc-gauge * { transition: none !important; }
}


/* 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:     #ff9142;           /* active response curve (keep color) */
  --edit:     #4da3ff;           /* probe / edit cursor (keep color) */
  --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: nowrap; gap: 6px;
  margin-top: 18px; margin-bottom: 4px;
  border-bottom: 1px solid var(--tbc-border-soft);
  overflow-x: hidden;
}
.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: 0;
  padding: 8px 8px;
  margin-right: 0;
  flex: 1 1 0;
  min-width: 0;
  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: 22px; width: auto; max-width: 100%;
  object-fit: contain; display: block;
  filter: brightness(1.25) contrast(1.05) drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
}
/* 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;
}
/* neutralized old 860px collapse */

.ts-panel {
/* background: var(--panel-hi);
  border: 1px solid var(--tbc-border-soft);
  border-radius: 0;
  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: 0;
  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: 0; 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(--ink); }
.ts-schematic .node { font: 500 11px var(--mono); fill: var(--dim); }

/* ── 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(--ink); background: transparent;
  border: 1px solid transparent; border-bottom-color: var(--rule);
  border-radius: 0; 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: 0; 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(--ink);
  background: rgba(22, 17, 13, .85); padding: 3px 7px;
  border: 1px solid var(--rule); border-radius: 0;
  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: 0; }

/* ── controls ───────────────────────────────────────────── */
/* ── graphical knobs, ported from the Tone Stack Calculator's .ts-knob
   widget: real rotating knob images, per-brand faceplate colors and
   badge, same drag/keyboard/wheel interaction. ── */
.ts-controls { margin-top: 4px; }

.ts-knobs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 18px 30px;
  padding: 16px 20px;
  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: 0;
  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;
}

/* Champ / Marshall / Vox / AC4: the tick ring's top-of-scale number
   overhangs above the knob's own box on every screen size -- extra top
   padding keeps it clear of the card edge instead of touching it. */
.ts-knobs-row--ticked { padding-top: 38px; }
/* All profiles: Volume + tone knobs as equal siblings, centered in the
   space to the right of the badge with even spacing between each knob. */
.ts-knobs-pair {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 28px;
  flex: 1 1 auto;
  min-width: 0;
}
/* 2-knob chrome-plate profiles (Champ, Tweed Deluxe): narrower plate,
   centered in the space beside the badge. Knob gap/size unchanged --
   only the plate's own width and position shrink to fit its content. */
/* Two-layer centering fix. A single element can't both (a) claim the
   real leftover width beside the badge, via flex-grow, AND (b) have a
   narrower visual width with margin:auto centering -- once flex-grow
   fills the item's box to its grown size, margin:auto has no leftover
   space left within that box to center against; it only centers the
   box itself within the row, which flex-grow already made full-width.
   So: outer = plain, invisible, flex:1 1 auto (claims the real leftover
   width, row-level justify-content:flex-start stops it being eaten by
   space-between); inner .ts-knobs-pair--narrow = the actual visually
   narrow plate, centered via the outer's own justify-content:center. */
.ts-knobs-row--narrow-plate {
  justify-content: flex-start;
}
.ts-knobs-pair--narrow-outer {
  display: flex;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
}
.ts-knobs-pair--narrow {
  flex: 0 1 auto;
  max-width: 100%;
}

/* Champ / Marshall / Vox / AC4: small chrome plate under Volume + Tone
   knobs and their numbers only — tweed faceplate remains the background
   of the whole row. Brushed chrome: bright horizontal band through the
   middle, slightly darker top/bottom, soft edge highlight like real
   stamped metal. */
.ts-knobs-row--ticked .ts-knobs-pair--chrome {
  gap: 36px; /* wider than the 28px default -- extra breathing room so
                tick-ring numbers on adjacent knobs (Bassman's 4-knob
                row) can't crowd each other on narrower/lower-DPI displays. */
}
.ts-knobs-pair--chrome {
  position: relative;
  padding: 3px 36px 3px;
  margin: 4px 8px;
  border-radius: 0;
  background:
    /* lengthwise brushed highlight (bright middle) */
    linear-gradient(90deg,
      rgba(0, 0, 0, .14) 0%,
      rgba(255, 255, 255, .08) 18%,
      rgba(255, 255, 255, .38) 50%,
      rgba(255, 255, 255, .08) 82%,
      rgba(0, 0, 0, .14) 100%),
    /* vertical shade: darker top & bottom, bright mid */
    linear-gradient(180deg,
      #8a909a 0%,
      #c4cad4 20%,
      #f0f3f8 48%,
      #c0c6d0 80%,
      #7e848e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 0 rgba(0, 0, 0, .28),
    inset 1px 0 0 rgba(255, 255, 255, .25),
    inset -1px 0 0 rgba(0, 0, 0, .12),
    0 0 0 1px rgba(60, 70, 85, .35),
    0 2px 5px rgba(0, 0, 0, .28),
    0 1px 0 rgba(255, 255, 255, .15);
}
/* Bassman desktop: tighter padding than the standard chrome plate --
   frees up room for its 4 knobs beside the (now shorter) badge. */
.ts-knobs-pair--compact {
  padding: 24px 20px 16px !important;
}
/* Tighter than the general 36px chrome-plate gap -- with knobs locked
   to a 66px column at 0.68 scale, this much space is no longer needed
   to keep tick labels from crowding, and the extra gap just looked
   sparse. Scoped to Bassman only, not Champ/Tweed Deluxe. */
.ts-knobs-row--ticked .ts-knobs-pair--compact {
  gap: 22px;
}
/* Bassman desktop: slightly smaller knobs (with their tick rings) so
   all 4 comfortably fit the compact plate without crowding the edges.
   Mobile is unaffected -- its own more specific rule already wins. */
.ts-knobs-pair--compact > .ts-ctl {
  width: 66px;
  flex: 0 0 66px;
}
.ts-knobs-pair--compact > .ts-ctl .ts-knob-wrap {
  transform: scale(0.68);
  transform-origin: center center;
}
.ts-knobs-pair--compact > .ts-ctl .ts-knob-wrap + .ts-ctl-name {
  margin-top: 10px;
}
.ts-knobs-pair--chrome .ts-ctl-name,
.ts-knobs-pair--chrome .ts-ctl-num,
.ts-knobs-pair--chrome .ts-ctl-db,
.ts-knobs-pair--chrome .ts-knob-tick-num {
  color: #1a1e24 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important;
}
.ts-knobs-pair--chrome .ts-knob-tick-mark {
  background: #1a1e24 !important;
}

/* Vox profiles: same plate shape and 3-tone illumination (dark top/
   bottom, lit middle) as the light chrome plate above, but a dark
   brown/maroon tone matching the real AC30/AC15 panel surround, with
   light cream text instead of dark for contrast. */
.ts-knobs-pair--chrome-dark {
  position: relative;
  padding: 28px 36px 18px;
  margin: 4px 8px;
  border-radius: 0;
  border: 2.5px solid #c8b99e;
  outline: 2.5px solid #c8b99e;
  outline-offset: -8px;
  flex: 0 1 auto;
max-width: none;
  margin-left: auto;
  margin-right: auto;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, .12) 0%,
      rgba(255, 255, 255, .02) 18%,
      rgba(255, 255, 255, .05) 50%,
      rgba(255, 255, 255, .02) 82%,
      rgba(0, 0, 0, .12) 100%),
    linear-gradient(180deg,
      #363232 0%,
      #423e3d 20%,
      #524e4c 48%,
      #423e3d 80%,
      #363232 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    inset 1px 0 0 rgba(255, 255, 255, .05),
    inset -1px 0 0 rgba(0, 0, 0, .3),
    0 2px 5px rgba(0, 0, 0, .35),
    0 1px 0 rgba(255, 255, 255, .05);
}
/* AC30: same shape/plate as above, but a red plate and white double
   border instead of the neutral dark plate + cream border. */
.ts-knobs-pair--chrome-red {
  position: relative;
  padding: 28px 36px 18px;
  margin: 4px 8px;
  border-radius: 0;
  border: 2.5px solid #ffffff;
  outline: 2.5px solid #ffffff;
  outline-offset: -8px;
  flex: 0 1 auto;
max-width: none;
  margin-left: auto;
  margin-right: auto;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, .22) 0%,
      rgba(255, 255, 255, .02) 18%,
      rgba(255, 255, 255, .06) 50%,
      rgba(255, 255, 255, .02) 82%,
      rgba(0, 0, 0, .22) 100%),
    linear-gradient(180deg,
      #3a0f11 0%,
      #571519 20%,
      #7a1d22 48%,
      #571519 80%,
      #3a0f11 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    inset 1px 0 0 rgba(255, 255, 255, .05),
    inset -1px 0 0 rgba(0, 0, 0, .3),
    0 2px 5px rgba(0, 0, 0, .35),
    0 1px 0 rgba(255, 255, 255, .05);
}
.ts-knobs-pair--chrome-red .ts-ctl-name,
.ts-knobs-pair--chrome-red .ts-ctl-num,
.ts-knobs-pair--chrome-red .ts-ctl-db,
.ts-knobs-pair--chrome-red .ts-knob-tick-num {
  color: #f4ece9 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .6) !important;
}
.ts-knobs-pair--chrome-red .ts-knob-tick-mark {
  background: #f4ece9 !important;
}
.ts-knobs-pair--chrome-dark .ts-ctl-name,
.ts-knobs-pair--chrome-dark .ts-ctl-num,
.ts-knobs-pair--chrome-dark .ts-ctl-db,
.ts-knobs-pair--chrome-dark .ts-knob-tick-num {
  color: #f4ece9 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .6) !important;
}
.ts-knobs-pair--chrome-dark .ts-knob-tick-mark {
  background: #f4ece9 !important;
}

/* Champ (and any profile with panelBg): tweed / fabric faceplate.
   Background image is applied inline from JS. */
.ts-knobs-row--textured {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(0, 0, 0, .35);
}
.ts-knobs-row--textured .ts-ctl-name,
.ts-knobs-row--textured .ts-ctl-num {
  color: var(--face-text, #2a2210);
  text-shadow: 0 1px 0 rgba(255,255,255,0.25), 0 1px 2px rgba(0,0,0,0.35);
}

/* Blackface faceplate: dark panel, light legends, silver edge */
.ts-knobs-row--blackface {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -1px 0 rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255, 255, 255, .06);
}
.ts-knobs-row--blackface .ts-ctl-name,
.ts-knobs-row--blackface .ts-ctl-num {
  color: var(--face-text, #f0efe9);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .85);
}

/* Silverface faceplate: brushed aluminum, dark legends, teal edge.
   (Inner section frame and pointer arrows removed — clean panel.) */
.ts-knobs-row--silverface {
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, .14) 0%,
      rgba(255, 255, 255, .08) 18%,
      rgba(255, 255, 255, .38) 50%,
      rgba(255, 255, 255, .08) 82%,
      rgba(0, 0, 0, .14) 100%),
    linear-gradient(180deg,
      #8a909a 0%,
      #c4cad4 20%,
      #f0f3f8 48%,
      #c0c6d0 80%,
      #7e848e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 0 rgba(0, 0, 0, .28),
    inset 1px 0 0 rgba(255, 255, 255, .25),
    inset -1px 0 0 rgba(0, 0, 0, .12),
    0 0 0 1px rgba(60, 70, 85, .35),
    0 2px 5px rgba(0, 0, 0, .28),
    0 1px 0 rgba(255, 255, 255, .15);
}
.ts-knobs-row--silverface .ts-ctl-name,
.ts-knobs-row--silverface .ts-ctl-num {
  color: var(--face-text, #1a1e24);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

.ts-badge-wrap { flex: 0 0 auto; display: flex; justify-content: flex-start; align-items: center; min-width: 40px; }
.ts-badge-wrap--name { flex: 0 1 auto; min-width: 0; max-width: 46%; }
/* All badge photos share the same width; height follows each image's
   own aspect ratio rather than a fixed height per style. Keeps every
   amp's nameplate visually the same "size" on the panel regardless of
   whether it's a wide riveted plate or a squarish two-line badge. */
.ts-badge { width: auto; height: 84px; max-width: 180px; display: block; object-fit: contain; }
/* Tweed Deluxe / Bassman: same badge height as Champ instead of the
   uniform-width system, per explicit request -- each badge's own width
   now follows its own aspect ratio at that fixed height. */
.ts-badge--champ-height { width: auto !important; height: 33px !important; max-width: 220px !important; }
/* Bassman: badge is very wide/short (900×130). Use height:auto so the
   img box matches the rendered content — fixed heights (40–48px) left
   empty space above and below the artwork. */
.ts-badge--bassman {
  width: auto !important;
  height: auto !important;
  max-height: 28px !important;
  max-width: 185px !important;
  object-fit: contain !important;
}
.ts-badge-wrap--sm { flex: 0 0 auto; justify-content: flex-start; min-width: 0; }
.ts-badge-wrap--script { flex: 0 0 auto; justify-content: flex-start; min-width: 0; }

/* Faceplate model lettering — era style match (not official logo art) */
.ts-panel-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  line-height: 1.05;
  user-select: none;
  pointer-events: none;
}
.ts-panel-name-brand {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.ts-panel-name-model {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Blackface: cream silk-screen on black */
.ts-panel-name--blackface .ts-panel-name-brand {
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #f4f1e6;
  text-shadow: 0 1px 1px rgba(0,0,0,.75);
}
.ts-panel-name--blackface .ts-panel-name-model {
  font-family: "Gill Sans", "Gill Sans MT", "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #f4f1e6;
  text-shadow: 0 1px 1px rgba(0,0,0,.75);
}

/* Silverface: dark print on aluminum */
.ts-panel-name--silverface .ts-panel-name-brand {
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #1a1e24;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.ts-panel-name--silverface .ts-panel-name-model {
  font-family: "Gill Sans", "Gill Sans MT", "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #1a1e24;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

/* Tweed Champ */
.ts-panel-name--tweed .ts-panel-name-brand {
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.ts-panel-name--tweed .ts-panel-name-model {
  font-family: "Gill Sans", "Gill Sans MT", "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(255,255,255,.2);
}

/* Vox */
.ts-panel-name--vox .ts-panel-name-brand {
  font-family: "Gill Sans", "Gill Sans MT", "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: #f4ece9;
  text-shadow: 0 1px 1px rgba(0,0,0,.55);
}
.ts-panel-name--vox .ts-panel-name-model {
  font-family: "Gill Sans", "Gill Sans MT", "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #f4ece9;
  text-shadow: 0 1px 1px rgba(0,0,0,.55);
}

/* AC4: cream tolex background needs dark lettering, not the light
   lettering the red/black tolex variants use. */
.ts-panel-name--vox-cream .ts-panel-name-brand {
  font-family: "Gill Sans", "Gill Sans MT", "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: #3a2f1f;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.ts-panel-name--vox-cream .ts-panel-name-model {
  font-family: "Gill Sans", "Gill Sans MT", "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #3a2f1f;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}

/* Marshall */
.ts-panel-name--marshall .ts-panel-name-brand {
  font-family: "Gill Sans", "Gill Sans MT", "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.ts-panel-name--marshall .ts-panel-name-model {
  font-family: "Gill Sans", "Gill Sans MT", "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(255,255,255,.2);
}

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

@media (max-width: 640px) {
  /* Column: badge on top, knobs group fills and centers below */
  .ts-knobs-row {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
  }
  .ts-badge-wrap,
  .ts-badge-wrap--sm,
  .ts-badge-wrap--name {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
  .ts-badge,
  .ts-badge--sm {
    margin-left: auto;
    margin-right: auto;
  }
  .ts-panel-name { align-items: center; text-align: center; }

  /* Extra side padding so tick numbers clear the card edge */
  .ts-knobs-row--ticked {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 28px;
  }

  /* Volume on its own row; all tone knobs share one row below.
     Equal size for every knob; even vertical/horizontal gaps.
     Group centers under the badge. */
  .ts-knobs-pair {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: flex-start;
    gap: 28px 14px;
    width: 100%;
    flex: 1 1 auto;
  }
  /* Same size for Volume and every tone knob */
  .ts-knobs-pair > .ts-ctl {
    width: 78px;
    flex: 0 0 78px;
  }
  /* Volume alone on the first row (full width, content centered) --
     except mobileSingleRow profiles (Bassman), which keep all knobs
     together in one row instead. */
  .ts-knobs-pair:not(.ts-knobs-pair--mobile-row) > .ts-ctl:first-child {
    flex: 1 0 100%;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* Ticked profiles: uniform scale so 3 tone knobs fit one row */
  .ts-knobs-row--ticked .ts-knobs-pair > .ts-ctl .ts-knob-wrap {
    transform: scale(0.82);
    transform-origin: center center;
  }
  .ts-knobs-row--ticked .ts-knobs-pair > .ts-ctl .ts-knob-wrap + .ts-ctl-name {
    margin-top: 8px;
  }
  /* The 36px desktop gap (Bassman tick-safety) and the compact plate
     padding are both desktop-oriented fixes -- reset to mobile-sized
     values here, or Bassman's tone-trio row doesn't fit and Bass wraps
     to its own third row. */
  .ts-knobs-row--ticked .ts-knobs-pair--chrome {
    gap: 14px 8px;
  }
  .ts-knobs-pair--compact {
    padding: 24px 10px 12px !important;
  }
  /* mobileSingleRow (Bassman): all 4 knobs in one row needs smaller
     knobs, a tighter column width, and reduced plate padding than the
     3-knob-row default above -- the plate's own 36px side padding alone
     would otherwise eat most of the available mobile width. */
  .ts-knobs-row--ticked .ts-knobs-pair--mobile-row {
    flex-wrap: nowrap;
    gap: 18px;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .ts-knobs-pair--mobile-row > .ts-ctl {
    width: 44px;
    flex: 0 0 44px;
  }
  .ts-knobs-pair--mobile-row > .ts-ctl .ts-knob-wrap {
    transform: scale(0.46);
    transform-origin: center center;
  }
  .ts-knobs-pair--mobile-row > .ts-ctl .ts-knob-wrap + .ts-ctl-name {
    margin-top: -8px;
  }
  .ts-knobs-pair--mobile-row > .ts-ctl .ts-ctl-name,
  .ts-knobs-pair--mobile-row > .ts-ctl .ts-ctl-num {
    font-size: 9px;
  }
  /* Chrome-plate amps (Champ/AC4/AC30): keep plate centered */
  .ts-knobs-pair--chrome,
  .ts-knobs-pair--chrome-dark,
  .ts-knobs-pair--chrome-red,
  .ts-knobs-pair--narrow-outer,
  .ts-knobs-pair--narrow {
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

.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(--tbc-font-display); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--face-text, #232427);
}

.ts-knob { position: relative; width: 64px; height: 64px; cursor: ns-resize; touch-action: none; border-radius: 0; }

/* Static numbered dial ring -- Champ, Marshall, Vox/AC4. The ring sits
   behind the knob and never rotates; only the knob face does, same as a
   real chicken-head knob against a printed panel scale. */
.ts-knob-wrap { position: relative; width: 64px; height: 64px; }
.ts-knob-ticks { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.ts-knob-tick-mark {
  position: absolute;
  width: 2px; height: 5px;
  border-radius: 0;
  opacity: .95;
  box-shadow: 0 0 1.5px rgba(0, 0, 0, .7);
}
.ts-knob-tick-num {
  position: absolute;
  transform: translate(-50%, -50%);
  font: 700 8px var(--tbc-font-mono, monospace);
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
/* The 0/10 tick labels sit at the bottom-left/bottom-right of the ring and
   overhang below the knob's own box -- push the name down clear of them
   (only when a tick ring is present; untouched otherwise). */
.ts-knob-wrap + .ts-ctl-name { margin-top: 16px; }
.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(--tbc-glow); outline-offset: 3px; }
.ts-knob[aria-disabled="true"] { cursor: default; }

.ts-ctl-num { font: 700 12.5px var(--tbc-font-mono); color: var(--face-text, #232427); text-shadow: 0 1px 2px rgba(0,0,0,0.25); }

/* ── signal generator: same card treatment as the scope, wrapping the
   frequency-preset dropdown + the 7-segment LED readout ── */
.vs-siggen-card {
  background: rgb(69 69 69 / 80%);
  border: 1.5px solid #919191;
  border-radius: 0;
  padding: 16px;
  margin-bottom: 18px;
}
.vs-siggen-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 0;
}
.vs-siggen-select { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }

.vs-seg-card {
  flex: 0 0 auto;
  background: rgba(239, 239, 239, 1);
  border: 1px solid var(--tbc-border-soft);
  border-radius: 0;
  padding: 8px;
}
.vs-seg-frame {
  padding: 3px;
  border-radius: 0;
  background: linear-gradient(155deg, #6b6d72 0%, #38393c 55%, #232427 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.25), inset 0 -1px 1px rgba(0,0,0,0.5);
}
.vs-seg-panel {
  background: #0a0806;
  border-radius: 0;
  padding: 7px 10px;
  display: flex;
  justify-content: center;
}
.vs-seg-display { display: flex; gap: 3px; }
.vs-seg-digit-svg { display: block; flex: none; }

@media (max-width: 1480px) {
  .vs-siggen-row { flex-direction: column; align-items: stretch; }
  .vs-seg-card { align-self: center; }
}

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

/* ==================================================================
   APP SHELL — standalone PWA layer
   ================================================================== */

/* ======================================================================
   Shared PWA app-shell layer — canonical source
   ----------------------------------------------------------------------
   Generic standalone-app chrome shared by every DiMastro GTA PWA
   (safe-area insets, .install-gate, .tbc-db-notice, and related
   install/offline UI). Written against the --tbc-* custom properties;
   each app's own :root block (in its own css/_head.css) either
   declares --tbc-* directly, or aliases its own token names to them.

   DO NOT EDIT apps/<name>/css/styles.css directly for anything in this
   section — edit this file instead, then run:
     python3 apps/_shared/sync-apps.py


/* TSC-only: bright switch, taper selects, mid-pot row under the face */
.ts-vol-pair, .ts-tone-pair {
  display: flex; flex-direction: row; align-items: flex-start; justify-content: center; gap: 8px 12px;
}
.ts-bright-col { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 56px; }
.ts-bright-face { display: flex; align-items: center; justify-content: center; }
.ts-bright-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  width: 36px; height: 48px;
}
.ts-bright-btn img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ts-bright-status { font: 700 11px var(--mono, monospace); color: var(--face-text, #e8e8ea); }
.ts-ctl-tail { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: center; }
.ts-ctl-tail select {
  font-size: 10px; padding: 1px 4px; max-width: 70px; min-height: 20px;
  background: var(--face-select-bg, #2a2a2c); color: var(--face-select-text, #e8e8ea);
  border: 1px solid var(--face-select-border, #6a6a6e); border-radius: 0;
}
.ts-ctl-wide {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px;
  margin-top: 12px; flex-wrap: wrap;
}
.ts-ctl-wide .ts-ctl-name { font-size: 12px; color: var(--tbc-ink-muted, #666666); }
.ts-ctl-wide .ts-ctl-tail select {
  max-width: none !important;
  width: auto !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
  min-height: 26px !important;
}
.ts-reset-row { margin-top: 12px; display: flex; justify-content: flex-start; }
.ts-reset-row button.ts-reset-btn,
.ts button.ts-reset-btn {
  border: 1px solid #835c30;
}
.ts-reset-row button.ts-reset-btn:hover,
.ts button.ts-reset-btn:hover:not(:disabled) {
  border-color: #835c30;
}
.ts-badge-wrap--with-model { flex-direction: column; align-items: flex-start; gap: 4px; }
.ts-badge-model {
  font-family: var(--tbc-font-display, inherit); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--face-text, #241a0e);
}
/* Chrome plates must shrink to content (Scope behavior) */
.ts-knobs-pair--chrome,
.ts-knobs-pair--chrome-red,
.ts-knobs-pair--chrome-dark,
.ts-knobs-pair--compact {
  flex: 0 1 auto !important;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ========== Amp profile (Brand / Model) — match Virtual Oscilloscope ========== */
.vo-amp-pick { display: flex; flex-direction: column; gap: 12px; }
.vo-brand-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
}
.vo-brand-tabs button {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--tbc-font-display, var(--display, inherit));
  color: #111111;
  background: linear-gradient(180deg, #000000 0%, #2d2d2d 55%, #000000 100%);
  border: 1px solid #bbbbbb;
  border-radius: 0;
  padding: 8px 8px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.vo-brand-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);
}
.vo-brand-badge {
  height: 22px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  filter: brightness(1.25) contrast(1.05) drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
}
.vo-brand-tabs button[data-key="fender"] .vo-brand-badge {
  filter: brightness(1.7) contrast(1.05) drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
}
.vo-brand-tabs button[data-key="vox"] .vo-brand-badge,
.vo-brand-tabs button[aria-selected="true"][data-key="vox"] .vo-brand-badge {
  filter: brightness(.82) contrast(1.05) drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
}
.vo-amp-pick .tbc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.vo-amp-pick .tbc-select {
  width: 100%;
  box-sizing: border-box;
}
.ts-circuit > .tbc-eyebrow:first-child {
  margin-top: 0;
}
.ts-tabs { display: none !important; }

/* ========== Amp faces aligned with Virtual Oscilloscope ========== */
.ts-knobs-row--textured {
  background-color: #a88848;
  border: 1.5px solid #5a4a28;
  border-radius: 0;
  padding: 12px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 8px rgba(0, 0, 0, .35);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
}
.ts-knobs-row--textured .ts-ctl-name,
.ts-knobs-row--textured .ts-ctl-num {
  color: var(--face-text, #2a2210);
}
.ts-knobs-pair--chrome {
  position: relative;
  padding: 3px 36px 3px;
  margin: 4px 8px;
  border-radius: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 28px;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, .14) 0%,
      rgba(255, 255, 255, .08) 18%,
      rgba(255, 255, 255, .38) 50%,
      rgba(255, 255, 255, .08) 82%,
      rgba(0, 0, 0, .14) 100%),
    linear-gradient(180deg,
      #8a909a 0%,
      #c4cad4 20%,
      #f0f3f8 48%,
      #c0c6d0 80%,
      #7e848e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 0 rgba(0, 0, 0, .28),
    inset 1px 0 0 rgba(255, 255, 255, .25),
    inset -1px 0 0 rgba(0, 0, 0, .12),
    0 0 0 1px rgba(60, 70, 85, .35),
    0 2px 5px rgba(0, 0, 0, .28),
    0 1px 0 rgba(255, 255, 255, .15);
}
.ts-knobs-pair--compact {
  padding: 5px 20px 5px !important;
}
.ts-knobs-pair--compact > .ts-ctl {
  width: 66px;
  flex: 0 0 66px;
}
.ts-knobs-pair--compact > .ts-ctl .ts-knob-wrap {
  transform: scale(0.68);
  transform-origin: center center;
}
.ts-knobs-pair--compact > .ts-ctl .ts-knob-wrap + .ts-ctl-name {
  margin-top: 10px;
}
.ts-knobs-pair--chrome .ts-ctl-name,
.ts-knobs-pair--chrome .ts-ctl-num,
.ts-knobs-pair--chrome .ts-ctl-db {
  color: #1e2228;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.ts-knobs-row--textured > .ts-badge-wrap {
  flex: 0 0 auto;
  min-width: 0;
  justify-content: flex-start;
}
.ts-knobs-row--textured > .ts-badge-wrap .ts-badge {
  height: 48px;
  max-width: 180px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
}
@media (max-width: 720px) {
  .ts-knobs-row--textured {
    flex-direction: column;
    align-items: center;
  }
  .ts-knobs-pair--chrome {
    gap: 12px;
    padding: 16px 12px 12px;
  }
  .ts-knobs-pair--compact > .ts-ctl {
    width: 56px;
    flex: 0 0 56px;
  }
}


/* ========== Scope-aligned face classes (blackface / chrome-red / chrome-dark / plexi) ========== */
.ts-knobs-row--blackface {
  background:
    linear-gradient(180deg, var(--face-hi, #2c2c2e) 0%, var(--face-mid, #1a1a1c) 45%, var(--face-lo, #0c0c0e) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -1px 0 rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255, 255, 255, .06);
}
.ts-knobs-row--blackface .ts-ctl-name,
.ts-knobs-row--blackface .ts-ctl-num,
.ts-knobs-row--blackface .ts-bright-status {
  color: var(--face-text, #f0efe9);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .85);
}
/* Keep legacy class as alias */
.ts-knobs-row--face-black {
  background:
    linear-gradient(180deg, var(--face-hi, #2c2c2e) 0%, var(--face-mid, #1a1a1c) 45%, var(--face-lo, #0c0c0e) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -1px 0 rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255, 255, 255, .06);
}
.ts-knobs-row--face-black .ts-ctl-name,
.ts-knobs-row--face-black .ts-ctl-num,
.ts-knobs-row--face-black .ts-bright-status {
  color: var(--face-text, #f0efe9);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .85);
}

.ts-knobs-pair--chrome-dark {
  position: relative;
  padding: 28px 36px 18px;
  margin: 4px 8px;
  border-radius: 0;
  border: 2.5px solid #c8b99e;
  outline: 2.5px solid #c8b99e;
  outline-offset: -8px;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 22px;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, .12) 0%,
      rgba(255, 255, 255, .02) 18%,
      rgba(255, 255, 255, .05) 50%,
      rgba(255, 255, 255, .02) 82%,
      rgba(0, 0, 0, .12) 100%),
    linear-gradient(180deg,
      #363232 0%,
      #423e3d 20%,
      #524e4c 48%,
      #423e3d 80%,
      #363232 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    inset 1px 0 0 rgba(255, 255, 255, .05),
    inset -1px 0 0 rgba(0, 0, 0, .3),
    0 2px 5px rgba(0, 0, 0, .35);
}
.ts-knobs-pair--chrome-red {
  position: relative;
  padding: 28px 36px 18px;
  margin: 4px 8px;
  border-radius: 0;
  border: 2.5px solid #ffffff;
  outline: 2.5px solid #ffffff;
  outline-offset: -8px;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 22px;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, .22) 0%,
      rgba(255, 255, 255, .02) 18%,
      rgba(255, 255, 255, .06) 50%,
      rgba(255, 255, 255, .02) 82%,
      rgba(0, 0, 0, .22) 100%),
    linear-gradient(180deg,
      #3a0f11 0%,
      #571519 20%,
      #7a1d22 48%,
      #571519 80%,
      #3a0f11 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    inset 1px 0 0 rgba(255, 255, 255, .05),
    inset -1px 0 0 rgba(0, 0, 0, .3),
    0 2px 5px rgba(0, 0, 0, .35);
}
.ts-knobs-pair--chrome-red .ts-ctl-name,
.ts-knobs-pair--chrome-red .ts-ctl-num,
.ts-knobs-pair--chrome-red .ts-bright-status,
.ts-knobs-pair--chrome-dark .ts-ctl-name,
.ts-knobs-pair--chrome-dark .ts-ctl-num,
.ts-knobs-pair--chrome-dark .ts-bright-status {
  color: #f4ece9 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .6) !important;
}

/* Marshall Plexi gold panel */
.ts-knobs-row--plexi {
  background:
    linear-gradient(180deg, var(--face-hi, #f0e6c8) 0%, var(--face-mid, #e0d0a0) 45%, var(--face-lo, #c8b070) 100%);
  border: 1px solid var(--face-outline, #8a7840);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -1px 0 rgba(0, 0, 0, .2),
    0 2px 6px rgba(0, 0, 0, .25);
  padding: 18px 24px;
}
.ts-knobs-row--plexi .ts-ctl-name,
.ts-knobs-row--plexi .ts-ctl-num {
  color: var(--face-text, #1a1410);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}



/* ========== Layout parity: one horizontal row like Scope ========== */
.ts-knobs-row {
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.ts-knobs-pair {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 18px 22px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.ts-knobs-pair > .ts-ctl {
  width: 72px !important;
  flex: 0 0 auto !important;
}
.ts-ctl--bright {
  width: 48px !important;
}
.ts-knobs-row > .ts-badge-wrap {
  flex: 0 0 auto !important;
  max-width: 160px !important;
}
.ts-knobs-row > .ts-badge-wrap .ts-badge {
  height: 72px !important;
  max-width: 160px !important;
  width: auto !important;
}
.ts-knobs-row--blackface > .ts-badge-wrap .ts-badge,
.ts-knobs-row--silverface > .ts-badge-wrap .ts-badge {
  height: 64px !important;
  max-width: 150px !important;
}
.ts-knobs-row--textured > .ts-badge-wrap .ts-badge {
  height: 48px !important;
  max-width: 160px !important;
}
.ts-bright-btn {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 28px !important;
  height: 42px !important;
  cursor: pointer;
  display: block;
}
.ts-bright-btn img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.ts-bright-btn:focus-visible {
  outline: 2px solid var(--edit, #c9a227) !important;
  outline-offset: 2px !important;
}
.ts-bright-status {
  font: 700 10px var(--mono, monospace) !important;
  color: var(--face-text, #e8e8ea) !important;
}
.ts-ctl-tail select {
  font-size: 9.5px !important;
  padding: 0 2px !important;
  max-width: 64px !important;
  min-height: 18px !important;
  line-height: 1.2 !important;
}
.ts-knobs-pair--chrome,
.ts-knobs-pair--chrome-red,
.ts-knobs-pair--chrome-dark,
.ts-knobs-pair--compact {
  flex: 0 1 auto !important;
  width: max-content !important;
  max-width: 100% !important;
}
@media (max-width: 900px) {
  .ts-knobs-row { flex-wrap: wrap !important; justify-content: center !important; }
  .ts-knobs-pair { flex-wrap: wrap !important; }
}

/* Plate height / alignment = Scope: one straight line */
.ts-knobs-row {
  padding: 16px 20px !important;
  align-items: center !important;
  min-height: 0 !important;
}
.ts-knobs-pair {
  align-items: flex-start !important;
  gap: 28px !important;
}
.ts-knobs-pair > .ts-ctl {
  width: 84px !important;
  gap: 6px !important;
}
.ts-ctl--bright {
  width: 52px !important;
  gap: 6px !important;
}
.ts-knob {
  width: 64px !important;
  height: 64px !important;
}
.ts-knob-wrap {
  width: 64px !important;
  height: 64px !important;
}
.ts-knobs-row > .ts-badge-wrap .ts-badge {
  height: 84px !important;
  max-width: 180px !important;
}
.ts-knobs-row--blackface > .ts-badge-wrap .ts-badge,
.ts-knobs-row--silverface > .ts-badge-wrap .ts-badge {
  height: 84px !important;
  max-width: 180px !important;
}
.ts-knobs-row--textured > .ts-badge-wrap .ts-badge {
  height: 48px !important;
  max-width: 180px !important;
}
.ts-bright-status {
  font: 700 11px var(--mono, monospace) !important;
  line-height: 1 !important;
}
.ts-ctl-name {
  font-size: 11px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
}
.ts-ctl-num {
  font: 700 12.5px var(--mono, monospace) !important;
  line-height: 1.1 !important;
}
.ts-taper-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 10px;
  align-items: center;
  justify-content: flex-end;
}
.ts-taper-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--tbc-ink-muted, #666666);
}
.ts-taper-cell select {
  font-size: 11px;
  padding: 2px 6px;
  min-height: 24px;
  max-width: 90px;
  background: var(--panel-hi, #2a2a2c);
  color: var(--ink, #111111);
  border: 1px solid var(--rule, #3a3a3c);
  border-radius: 0;
}


/* ========== Scope-proportional face sizing (baseline + container) ========== */
.ts-scope-panel,
.ts-panel.ts-scope-panel {
  container-type: inline-size;
  container-name: vo-col;
  min-width: 0;
  overflow: visible;
}

/* Desktop baseline = Scope */
@media (min-width: 641px) {
.ts-knobs-row {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px 30px !important;
  padding: 16px 20px !important;
}
.ts-knobs-row > .ts-badge-wrap {
  flex: 0 0 auto !important;
  max-width: 180px !important;
  width: auto !important;
}
.ts-knobs-row > .ts-badge-wrap .ts-badge {
  height: 84px !important;
  max-width: 180px !important;
  width: auto !important;
}
.ts-knobs-row--blackface > .ts-badge-wrap .ts-badge,
.ts-knobs-row--silverface > .ts-badge-wrap .ts-badge {
  height: 84px !important;
  max-width: 180px !important;
}
.ts-knobs-row--textured > .ts-badge-wrap .ts-badge {
  height: 40px !important;
  max-width: 180px !important;
}
.ts-knobs-pair {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 28px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.ts-knobs-pair > .ts-ctl {
  width: 84px !important;
  flex: 0 0 84px !important;
  gap: 6px !important;
}
.ts-ctl--bright {
  width: 52px !important;
  flex: 0 0 52px !important;
}
.ts-knob,
.ts-knob-wrap {
  width: 64px !important;
  height: 64px !important;
}
.ts-ctl-name {
  font-size: 11px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.ts-ctl-num {
  font-size: 12.5px !important;
}
.ts-bright-btn {
  width: 28px !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.ts-bright-btn img {
  width: 28px !important; height: 42px !important; object-fit: contain; display: block;
  border: none !important; box-shadow: none !important;
}
.ts-knobs-row.ts-knobs-row--silverface,
.ts-knobs-row.ts-knobs-row--blackface {
  flex-direction: row-reverse !important;
}
.ts-knobs-row.ts-knobs-row--bassman {
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 4px 14px 6px !important;
}
.ts-knobs-row.ts-knobs-row--bassman > .ts-badge-wrap {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}
.ts-knobs-row.ts-knobs-row--bassman > .ts-badge-wrap .ts-badge,
.ts-knobs-row.ts-knobs-row--bassman > .ts-badge-wrap .ts-badge--bassman {
  height: auto !important;
  max-height: 28px !important;
  max-width: 185px !important;
  width: auto !important;
  display: block !important;
  margin: 0 !important;
}
.ts-knobs-row.ts-knobs-row--badge-above {
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 6px 14px !important;
}
.ts-knobs-row--badge-above.ts-knobs-row--blackface > .ts-badge-wrap .ts-badge {
  height: auto !important;
  max-height: 50px !important;
  max-width: 200px !important;
}
} /* end @media (min-width: 641px) desktop baseline */

/* Scope: shrink when the right column is narrow */
@container vo-col (max-width: 680px) {
  .ts-knobs-row {
    gap: 10px 12px !important;
    padding: 12px 10px !important;
  }
  .ts-knobs-row > .ts-badge-wrap {
    max-width: 180px !important;
  }
  /* Scope: max-height 44px (not fixed height 56) */
  .ts-knobs-row > .ts-badge-wrap .ts-badge,
  .ts-knobs-row--blackface > .ts-badge-wrap .ts-badge,
  .ts-knobs-row--silverface > .ts-badge-wrap .ts-badge,
  .ts-badge {
    height: auto !important;
    max-height: 44px !important;
    max-width: 180px !important;
  }
  .ts-knobs-row--textured > .ts-badge-wrap .ts-badge {
    height: auto !important;
    max-height: 36px !important;
    max-width: 180px !important;
  }
  .ts-knobs-pair {
    gap: 10px 8px !important;
  }
  .ts-knobs-pair--chrome,
  .ts-knobs-pair--chrome-red,
  .ts-knobs-pair--chrome-dark,
  .ts-knobs-pair--compact {
    gap: 8px 6px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .ts-knobs-pair > .ts-ctl {
    width: 58px !important;
    flex: 0 0 58px !important;
  }
  .ts-ctl--bright {
    width: 40px !important;
    flex: 0 0 40px !important;
  }
  .ts-knob,
  .ts-knob-wrap {
    width: 44px !important;
    height: 44px !important;
  }
  .ts-knobs-pair > .ts-ctl .ts-knob-wrap {
    transform: scale(0.72);
    transform-origin: center center;
  }
  .ts-ctl-name { font-size: 9.5px !important; }
  .ts-ctl-num { font-size: 10px !important; }
  .ts-bright-btn {
    width: 20px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .ts-bright-btn img {
    width: 20px !important;
    height: 30px !important;
  }
}

@container vo-col (max-width: 480px) {
  .ts-knobs-row > .ts-badge-wrap .ts-badge,
  .ts-knobs-row--blackface > .ts-badge-wrap .ts-badge,
  .ts-knobs-row--silverface > .ts-badge-wrap .ts-badge,
  .ts-badge {
    height: auto !important;
    max-height: 36px !important;
    max-width: 180px !important;
  }
  .ts-knobs-pair > .ts-ctl {
    width: 50px !important;
    flex: 0 0 50px !important;
  }
  .ts-ctl--bright {
    width: 34px !important;
    flex: 0 0 34px !important;
  }
  .ts-knob,
  .ts-knob-wrap {
    width: 38px !important;
    height: 38px !important;
  }
  .ts-knobs-pair > .ts-ctl .ts-knob-wrap {
    transform: scale(0.62);
  }
  .ts-bright-btn {
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Keep horizontal row on tablet/small-desktop (641-1480px); below that, mobile uses the column layout above, matching Scope */
@media (min-width: 641px) and (max-width: 1480px) {
  .ts-knobs-row {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .ts-knobs-pair {
    flex-wrap: nowrap !important;
    width: auto !important;
  }
  .ts-knobs-pair > .ts-ctl:first-child {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  .ts-badge-wrap {
    width: auto !important;
  }
}

/* Pot taper selects under knobs on the faceplate */
.ts-ctl-tail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.ts-taper-select,
.ts-ctl-tail select.ts-taper-select,
.ts-ctl-tail select {
  font-size: 9px !important;
  padding: 0 2px !important;
  max-width: 68px !important;
  min-height: 16px !important;
  line-height: 1.2 !important;
  background: rgba(0,0,0,.25);
  color: var(--face-text, #e8e8ea);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 0;
}
.ts-knobs-row--blackface .ts-taper-select,
.ts-knobs-row--blackface .ts-ctl-tail select {
  background: rgba(0,0,0,.4);
  color: #f0efe9;
  border-color: rgba(255,255,255,.18);
}
.ts-knobs-row--silverface .ts-taper-select,
.ts-knobs-row--silverface .ts-ctl-tail select {
  background: rgba(255,255,255,.55);
  color: #1a1e24;
  border-color: rgba(0,0,0,.2);
}


/* ==================================================================
   APP SHELL — standalone PWA layer
   ================================================================== */

/* ======================================================================
   Shared PWA app-shell layer — canonical source
   ----------------------------------------------------------------------
   Generic standalone-app chrome shared by every DiMastro GTA PWA
   (safe-area insets, .install-gate, .tbc-db-notice, and related
   install/offline UI). Written against the --tbc-* custom properties;
   each app's own :root block (in its own css/_head.css) either
   declares --tbc-* directly, or aliases its own token names to them.

   DO NOT EDIT apps/<name>/css/styles.css directly for anything in this
   section — edit this file instead, then run:
     python3 apps/_shared/sync-apps.py


/* TSC-only: bright switch, taper selects, mid-pot row under the face */
.ts-vol-pair, .ts-tone-pair {
  display: flex; flex-direction: row; align-items: flex-start; justify-content: center; gap: 8px 12px;
}
.ts-bright-col { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 56px; }
.ts-bright-face { display: flex; align-items: center; justify-content: center; }
.ts-bright-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  width: 36px; height: 48px;
}
.ts-bright-btn img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ts-bright-status { font: 700 11px var(--mono, monospace); color: var(--face-text, #e8e8ea); }
.ts-ctl-tail { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: center; }
.ts-ctl-tail select {
  font-size: 10px; padding: 1px 4px; max-width: 70px; min-height: 20px;
  background: var(--face-select-bg, #2a2a2c); color: var(--face-select-text, #e8e8ea);
  border: 1px solid var(--face-select-border, #6a6a6e); border-radius: 0;
}
.ts-ctl-wide {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px;
  margin-top: 12px; flex-wrap: wrap;
}
.ts-ctl-wide .ts-ctl-name { font-size: 12px; color: var(--tbc-ink-muted, #666666); }
.ts-ctl-wide .ts-ctl-tail select {
  max-width: none !important;
  width: auto !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
  min-height: 26px !important;
}
.ts-reset-row { margin-top: 12px; display: flex; justify-content: flex-start; }
.ts-badge-wrap--with-model { flex-direction: column; align-items: flex-start; gap: 4px; }
.ts-badge-model {
  font-family: var(--tbc-font-display, inherit); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--face-text, #241a0e);
}
/* Chrome plates must shrink to content (Scope behavior) */
.ts-knobs-pair--chrome,
.ts-knobs-pair--chrome-red,
.ts-knobs-pair--chrome-dark,
.ts-knobs-pair--compact {
  flex: 0 1 auto !important;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.app-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(env(safe-area-inset-top) + 14px) 18px 14px;
  background: linear-gradient(180deg, #000000 0%, #000000 100%);
  border-bottom: 1px solid var(--tbc-border-soft);
  position: sticky;
  top: 0;
  z-index: 20;
}

.app-header img {
  width: 26px;
  height: 26px;
  border-radius: 0;
}

.app-header h1 {
  font-family: var(--tbc-font-display);
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.01em;
}

.app-header-brand {
  font-family: var(--tbc-font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin-left: auto;
  white-space: nowrap;
}

.app-header-brand-gta {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #cccccc;
}

/* Scope-style shell: colored page bg, elevated white card, chrome outside */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: #ffffff;
}
main.app-main {
  padding: 20px 14px calc(40px + env(safe-area-inset-bottom));
  max-width: 1480px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* the .tbc widget already caps at 760px and centers itself, this just
   removes its normal page-embedded spacing assumptions */
/* Tools with their own content wrapper (not .tbc) already set their
   own width in the section above — this rule only matters on tools
   that actually use .tbc for their widget. */

.app-footer {
  max-width: 960px;
  margin: 18px auto 0;
  padding: 0 4px;
  font-size: 11.5px;
  color: var(--tbc-ink-faint);
  text-align: center;
  line-height: 1.6;
}

.app-footer a { color: var(--tbc-glow-dim); }

/* Offline / update banners */
.app-banner {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 50;
  display: none;
  align-items: center;
  gap: 10px;
  background: var(--tbc-panel-raised);
  border: 1px solid var(--tbc-border);
  border-radius: 0;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--tbc-ink-muted);
  box-shadow: 0 12px 30px -12px rgba(0,0,0,0.6);
}

.app-banner.is-visible { display: flex; }

.app-banner button {
  margin-left: auto;
  background: var(--tbc-glow);
  color: #ffffff;
  border: none;
  border-radius: 0;
  padding: 7px 14px;
  font-family: var(--tbc-font-display);
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
}

.app-banner .app-banner-dismiss {
  background: transparent;
  color: var(--tbc-ink-faint);
  padding: 7px 8px;
}

@media (max-width: 420px) {
  .app-header h1 { font-size: 14.5px; }
  .app-header-brand,
  .app-header-brand-gta { font-size: 16px; }
}

/* ==================================================================
   INSTALL GATE
   ================================================================== */

.install-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  padding-top: calc(24px + env(safe-area-inset-top));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 140% at 50% -10%, transparent 0%, transparent 55%),
    var(--tbc-bg);
}

.install-gate.is-hidden { display: none; }

.install-gate-card {
  max-width: 380px;
  width: 100%;
  text-align: center;
  background: var(--tbc-panel);
  border: 1px solid var(--tbc-border);
  border-radius: 0;
  padding: 34px 26px 26px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}

.install-gate-icon {
  width: 72px;
  height: 72px;
  border-radius: 0;
  margin-bottom: 18px;
 filter: grayscale(1) !important; }

.install-gate-card h2 {
  font-family: var(--tbc-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--tbc-ink);
  margin: 0 0 10px;
}

.install-gate-sub {
  font-size: 13.5px;
  color: var(--tbc-ink-muted);
  line-height: 1.6;
  margin: 0 0 24px;
}

.install-gate-btn {
  width: 100%;
  background: var(--tbc-glow);
  color: #ffffff;
  border: none;
  border-radius: 0;
  padding: 13px 18px;
  font-family: var(--tbc-font-display);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  margin-bottom: 16px;
  transition: background-color 140ms ease;
}
.install-gate-btn:hover { background: var(--tbc-glow-dim); }

.install-gate-ios-hint {
  font-size: 13px;
  color: var(--tbc-ink-muted);
  background: rgba(247, 247, 247, 1);
  border: 1px solid var(--tbc-border-soft);
  border-radius: 0;
  padding: 12px 14px;
  margin: 0 0 16px;
  line-height: 1.6;
}
.install-gate-ios-hint svg { vertical-align: -3px; margin: 0 2px; color: var(--tbc-glow); }
.install-gate-ios-hint strong { color: var(--tbc-ink); }

.install-gate.is-ios .install-gate-btn,
.install-gate.is-ios #installGateAndroidNotice,
.install-gate.is-ios .install-gate-ios-hint,
.install-gate.is-ios #dmPlatformRow {
  display: none !important;
}
.install-gate-ios-panel {
  text-align: left;
  background: rgba(245, 245, 245, 1);
  border: 1px solid var(--tbc-border-soft);
  border-radius: 0;
  padding: 14px 16px 12px;
  margin: 0 0 18px;
  color: var(--tbc-ink-muted);
}
.install-gate-ios-lead {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--tbc-ink);
}
.install-gate-ios-steps {
  margin: 0 0 10px;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--tbc-ink-muted);
}
.install-gate-ios-steps li { margin: 0 0 8px; }
.install-gate-ios-steps li:last-child { margin-bottom: 0; }
.install-gate-ios-steps strong { color: var(--tbc-ink); }
.install-gate-ios-steps svg { vertical-align: -3px; margin: 0 2px; color: var(--tbc-glow); }
.install-gate-ios-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tbc-ink-faint, var(--tbc-ink-muted));
  opacity: 0.9;
}




.install-gate-link {
  display: block;
  font-size: 13px;
  color: var(--tbc-glow-dim);
  text-decoration: underline;
  margin-bottom: 12px;
}
.install-gate-link:hover { color: var(--tbc-glow); }

.install-gate-back-btn {
  display: inline-block;
  margin-top: 6px;
  padding: 5px 12px;
  font-size: 11.5px;
  color: var(--tbc-ink-faint);
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(205, 156, 96, 0.35);
  border-radius: 0;
  text-decoration: none;
}
.install-gate-back-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--tbc-ink);
}

.install-gate-skip {
  display: inline-block;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(77, 163, 255, 0.35);
  color: var(--tbc-cold);
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  border-radius: 0;
  padding: 6px 14px;
  margin-bottom: 10px;
}
.install-gate-skip:hover { background: rgba(0, 0, 0, 0.08); color: var(--tbc-ink); }

.tbc-db-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--tbc-warn-soft);
  border: 1px solid rgba(231, 184, 79, 0.35);
  border-radius: 0;
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tbc-ink-muted);
  margin-bottom: 22px;
}
.tbc-db-notice[hidden] { display: none; }
.tbc-db-notice svg { flex: none; margin-top: 2px; color: var(--tbc-warn); }
.tbc-db-notice strong { color: var(--tbc-warn); }

/* Tone Stack Calculator — app-specific shell override
   ------------------------------------------------------------------
   Elevated card like Virtual Oscilloscope: white panel floating on the
   page background. Header, Check for Update, and copyright sit outside. */
.tbc {
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  background: radial-gradient(120% 140% at 15% -10%, rgba(245, 245, 245, 1) 0%, transparent 55%),
    linear-gradient(175deg, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 100%);
  border: 1px solid #c8d0d8;
  border-radius: 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,    0 30px 60px -30px rgba(0, 0, 0, 0.6)
}

.app-update-row {
  margin: 18px 0 8px !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.app-footer {
  max-width: 1480px;
  margin: 12px auto 0;
  padding: 0 4px;
  font-size: 11.5px;
  color: var(--tbc-ink-faint);
  text-align: center;
  line-height: 1.6;
}


/* ==================================================================
   In-app boot splash
   ================================================================== */
.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background:
    radial-gradient(120% 140% at 50% -10%, rgba(255, 145, 66, 0.12) 0%, transparent 55%),
    var(--tbc-bg, #ffffff);
  transition: opacity 320ms ease, visibility 320ms ease;
}
.boot-splash.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.boot-splash img {
  width: 96px;
  height: 96px;
  border-radius: 0;
  box-shadow: 0 12px 40px -12px rgba(0,0,0,0.7);
}
.boot-splash-title {
  font-family: var(--tbc-font-display, system-ui, sans-serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--tbc-ink, #111111);
  letter-spacing: 0.01em;
}
.boot-splash-sub {
  font-family: var(--tbc-font-body, system-ui, sans-serif);
  font-size: 13px;
  color: var(--tbc-ink-faint, #666666);
}


/* ==================================================================
   Post-install tip (folder suggestion)
   ================================================================== */


/* ========== Desktop 2-column (forced) ========== */
.tbc { max-width: 1480px !important; width: 100%; margin-left: auto; margin-right: auto; }
.ts {
  container-type: inline-size;
  width: 100%;
  overflow: visible;
}
.ts-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) !important;
  gap: 20px 24px !important;
}
.ts-panel {
  min-width: 0;
  overflow: visible;
}
/* knobs layout owned by Scope face CSS — do not force wrap here */
@container (max-width: 720px) {
  .ts-knobs-row {
    gap: 10px 8px !important;
    padding: 12px 8px !important;
  }
  .ts-knobs-pair > .ts-ctl {
    width: 56px !important;
    flex: 0 0 56px !important;
  }
  .ts-knob {
    width: 42px !important;
    height: 42px !important;
  }
  .ts-knobs-pair > .ts-ctl .ts-knob-wrap {
    transform: scale(0.7);
    transform-origin: center center;
  }
  .ts-ctl-name { font-size: 9.5px !important; }
  .ts-ctl-num { font-size: 10px !important; }
}
@media (max-width: 980px) {
  .ts-body { grid-template-columns: 1fr !important; }
}

/* ========== Amp profile (Brand / Model) — match Virtual Oscilloscope ========== */
.vo-amp-pick { display: flex; flex-direction: column; gap: 12px; }
.vo-brand-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
}
.vo-brand-tabs button {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--tbc-font-display, var(--display, inherit));
  color: #111111;
  background: linear-gradient(180deg, #ffffff 0%, #f2f2f2 55%, #e6e6e6 100%);
  border: 1px solid #bbbbbb;
  border-radius: 0;
  padding: 8px 8px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.vo-brand-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);
}
.vo-brand-badge {
  height: 22px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  filter: brightness(1.25) contrast(1.05) drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
}
.vo-brand-tabs button[data-key="fender"] .vo-brand-badge {
  filter: brightness(1.7) contrast(1.05) drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
}
.vo-brand-tabs button[data-key="vox"] .vo-brand-badge,
.vo-brand-tabs button[aria-selected="true"][data-key="vox"] .vo-brand-badge {
  filter: brightness(.82) contrast(1.05) drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
}
.vo-amp-pick .tbc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.vo-amp-pick .tbc-select {
  width: 100%;
  box-sizing: border-box;
}
.ts-circuit > .tbc-eyebrow:first-child {
  margin-top: 0;
}
/* Hide legacy top tabs if any residual markup */
.ts-tabs { display: none !important; }

/* ========== Amp faces aligned with Virtual Oscilloscope ========== */
.ts-knobs-row--textured {
  background-color: #a88848;
  border: 1.5px solid #5a4a28;
  border-radius: 0;
  padding: 12px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 8px rgba(0, 0, 0, .35);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
}
.ts-knobs-row--textured .ts-ctl-name,
.ts-knobs-row--textured .ts-ctl-num {
  color: var(--face-text, #2a2210);
}
.ts-knobs-pair--chrome {
  position: relative;
  padding: 28px 36px 18px;
  margin: 4px 8px;
  border-radius: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 28px;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, .14) 0%,
      rgba(255, 255, 255, .08) 18%,
      rgba(255, 255, 255, .38) 50%,
      rgba(255, 255, 255, .08) 82%,
      rgba(0, 0, 0, .14) 100%),
    linear-gradient(180deg,
      #8a909a 0%,
      #c4cad4 20%,
      #f0f3f8 48%,
      #c0c6d0 80%,
      #7e848e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 0 rgba(0, 0, 0, .28),
    inset 1px 0 0 rgba(255, 255, 255, .25),
    inset -1px 0 0 rgba(0, 0, 0, .12),
    0 0 0 1px rgba(60, 70, 85, .35),
    0 2px 5px rgba(0, 0, 0, .28),
    0 1px 0 rgba(255, 255, 255, .15);
}
.ts-knobs-pair--compact {
  padding: 24px 20px 16px !important;
  gap: 22px;
}
.ts-knobs-pair--compact > .ts-ctl {
  width: 66px;
  flex: 0 0 66px;
}
.ts-knobs-pair--compact > .ts-ctl .ts-knob-wrap {
  transform: scale(0.68);
  transform-origin: center center;
}
.ts-knobs-pair--compact > .ts-ctl .ts-knob-wrap + .ts-ctl-name {
  margin-top: 10px;
}
.ts-knobs-pair--chrome .ts-ctl-name,
.ts-knobs-pair--chrome .ts-ctl-num,
.ts-knobs-pair--chrome .ts-ctl-db {
  color: #1e2228;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.ts-knobs-row--textured > .ts-badge-wrap {
  flex: 0 0 auto;
  min-width: 0;
  justify-content: center;
}
.ts-knobs-row--textured > .ts-badge-wrap .ts-badge {
  height: 48px;
  max-width: 180px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
}
@media (max-width: 720px) {
  .ts-knobs-row--textured {
    flex-direction: column;
    align-items: center;
  }
  .ts-knobs-pair--chrome {
    gap: 12px;
    padding: 16px 12px 12px;
  }
  .ts-knobs-pair--compact > .ts-ctl {
    width: 56px;
    flex: 0 0 56px;
  }
}


/* ========== Scope-aligned face classes (blackface / chrome-red / chrome-dark / plexi) ========== */
.ts-knobs-row--blackface {
  background:
    linear-gradient(180deg, var(--face-hi, #2c2c2e) 0%, var(--face-mid, #1a1a1c) 45%, var(--face-lo, #0c0c0e) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -1px 0 rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255, 255, 255, .06);
}
.ts-knobs-row--blackface .ts-ctl-name,
.ts-knobs-row--blackface .ts-ctl-num,
.ts-knobs-row--blackface .ts-bright-status {
  color: var(--face-text, #f0efe9);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .85);
}
/* Keep legacy class as alias */
.ts-knobs-row--face-black {
  background:
    linear-gradient(180deg, var(--face-hi, #2c2c2e) 0%, var(--face-mid, #1a1a1c) 45%, var(--face-lo, #0c0c0e) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -1px 0 rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255, 255, 255, .06);
}
.ts-knobs-row--face-black .ts-ctl-name,
.ts-knobs-row--face-black .ts-ctl-num,
.ts-knobs-row--face-black .ts-bright-status {
  color: var(--face-text, #f0efe9);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .85);
}

.ts-knobs-pair--chrome-dark {
  position: relative;
  padding: 28px 36px 18px;
  margin: 4px 8px;
  border-radius: 0;
  border: 2.5px solid #c8b99e;
  outline: 2.5px solid #c8b99e;
  outline-offset: -8px;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 22px;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, .12) 0%,
      rgba(255, 255, 255, .02) 18%,
      rgba(255, 255, 255, .05) 50%,
      rgba(255, 255, 255, .02) 82%,
      rgba(0, 0, 0, .12) 100%),
    linear-gradient(180deg,
      #363232 0%,
      #423e3d 20%,
      #524e4c 48%,
      #423e3d 80%,
      #363232 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    inset 1px 0 0 rgba(255, 255, 255, .05),
    inset -1px 0 0 rgba(0, 0, 0, .3),
    0 2px 5px rgba(0, 0, 0, .35);
}
.ts-knobs-pair--chrome-red {
  position: relative;
  padding: 28px 36px 18px;
  margin: 4px 8px;
  border-radius: 0;
  border: 2.5px solid #ffffff;
  outline: 2.5px solid #ffffff;
  outline-offset: -8px;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 22px;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, .22) 0%,
      rgba(255, 255, 255, .02) 18%,
      rgba(255, 255, 255, .06) 50%,
      rgba(255, 255, 255, .02) 82%,
      rgba(0, 0, 0, .22) 100%),
    linear-gradient(180deg,
      #3a0f11 0%,
      #571519 20%,
      #7a1d22 48%,
      #571519 80%,
      #3a0f11 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    inset 1px 0 0 rgba(255, 255, 255, .05),
    inset -1px 0 0 rgba(0, 0, 0, .3),
    0 2px 5px rgba(0, 0, 0, .35);
}
.ts-knobs-pair--chrome-red .ts-ctl-name,
.ts-knobs-pair--chrome-red .ts-ctl-num,
.ts-knobs-pair--chrome-red .ts-bright-status,
.ts-knobs-pair--chrome-dark .ts-ctl-name,
.ts-knobs-pair--chrome-dark .ts-ctl-num,
.ts-knobs-pair--chrome-dark .ts-bright-status {
  color: #f4ece9 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .6) !important;
}

/* Marshall Plexi gold panel */
.ts-knobs-row--plexi {
  background:
    linear-gradient(180deg, var(--face-hi, #f0e6c8) 0%, var(--face-mid, #e0d0a0) 45%, var(--face-lo, #c8b070) 100%);
  border: 1px solid var(--face-outline, #8a7840);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -1px 0 rgba(0, 0, 0, .2),
    0 2px 6px rgba(0, 0, 0, .25);
  padding: 18px 24px;
}
.ts-knobs-row--plexi .ts-ctl-name,
.ts-knobs-row--plexi .ts-ctl-num {
  color: var(--face-text, #1a1410);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}



/* ========== Layout parity: one horizontal row like Scope ========== */
.ts-knobs-row {
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.ts-knobs-pair {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 18px 22px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.ts-knobs-pair > .ts-ctl {
  width: 72px !important;
  flex: 0 0 auto !important;
}
.ts-ctl--bright {
  width: 48px !important;
}
/* Badge size like Scope */
.ts-knobs-row > .ts-badge-wrap {
  flex: 0 0 auto !important;
  max-width: 160px !important;
}
.ts-knobs-row > .ts-badge-wrap .ts-badge {
  height: 72px !important;
  max-width: 160px !important;
  width: auto !important;
}
.ts-knobs-row--blackface > .ts-badge-wrap .ts-badge,
.ts-knobs-row--silverface > .ts-badge-wrap .ts-badge {
  height: 64px !important;
  max-width: 150px !important;
}
.ts-knobs-row--textured > .ts-badge-wrap .ts-badge {
  height: 48px !important;
  max-width: 160px !important;
}
/* Bright switch: no black box border */
.ts-bright-btn {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 28px !important;
  height: 42px !important;
  cursor: pointer;
  display: block;
}
.ts-bright-btn img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.ts-bright-btn:focus-visible {
  outline: 2px solid var(--edit, #c9a227) !important;
  outline-offset: 2px !important;
}
.ts-bright-status {
  font: 700 10px var(--mono, monospace) !important;
  color: var(--face-text, #e8e8ea) !important;
}
/* Compact taper selects so row height stays close to Scope */
.ts-ctl-tail select {
  font-size: 9.5px !important;
  padding: 0 2px !important;
  max-width: 64px !important;
  min-height: 18px !important;
  line-height: 1.2 !important;
}
/* Chrome plates stay content-sized */
.ts-knobs-pair--chrome,
.ts-knobs-pair--chrome-red,
.ts-knobs-pair--chrome-dark,
.ts-knobs-pair--compact {
  flex: 0 1 auto !important;
  width: max-content !important;
  max-width: 100% !important;
}
@media (max-width: 900px) {
  .ts-knobs-row { flex-wrap: wrap !important; justify-content: center !important; }
  .ts-knobs-pair { flex-wrap: wrap !important; }
}

/* Plate height / alignment = Scope: one straight line */
.ts-knobs-row {
  padding: 16px 20px !important;
  align-items: center !important;
  min-height: 0 !important;
}
.ts-knobs-pair {
  align-items: flex-start !important;
  gap: 28px !important;
}
.ts-knobs-pair > .ts-ctl {
  width: 84px !important;
  gap: 6px !important;
}
.ts-ctl--bright {
  width: 52px !important;
  gap: 6px !important;
}
.ts-knob {
  width: 64px !important;
  height: 64px !important;
}
.ts-knob-wrap {
  width: 64px !important;
  height: 64px !important;
}
/* Badge matches Scope desktop size */
.ts-knobs-row > .ts-badge-wrap .ts-badge {
  height: 84px !important;
  max-width: 180px !important;
}
.ts-knobs-row--blackface > .ts-badge-wrap .ts-badge,
.ts-knobs-row--silverface > .ts-badge-wrap .ts-badge {
  height: 84px !important;
  max-width: 180px !important;
}
.ts-knobs-row--textured > .ts-badge-wrap .ts-badge {
  height: 48px !important;
  max-width: 180px !important;
}
/* Bright status compact so it doesn't stretch the plate */
.ts-bright-status {
  font: 700 11px var(--mono, monospace) !important;
  line-height: 1 !important;
}
.ts-ctl-name {
  font-size: 11px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
}
.ts-ctl-num {
  font: 700 12.5px var(--mono, monospace) !important;
  line-height: 1.1 !important;
}
/* Tapers under plate */
.ts-taper-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 10px;
  align-items: center;
  justify-content: flex-end;
}
.ts-taper-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--tbc-ink-muted, #666666);
}
.ts-taper-cell select {
  font-size: 11px;
  padding: 2px 6px;
  min-height: 24px;
  max-width: 90px;
  background: var(--panel-hi, #2a2a2c);
  color: var(--ink, #111111);
  border: 1px solid var(--rule, #3a3a3c);
  border-radius: 0;
}


/* ========== Scope-proportional face sizing (baseline + container) ========== */
.ts-scope-panel,
.ts-panel.ts-scope-panel {
  container-type: inline-size;
  container-name: vo-col;
  min-width: 0;
  overflow: visible;
}

/* Desktop baseline = Scope */
@media (min-width: 641px) {
.ts-knobs-row {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px 30px !important;
  padding: 16px 20px !important;
}
.ts-knobs-row > .ts-badge-wrap {
  flex: 0 0 auto !important;
  max-width: 180px !important;
  width: auto !important;
}
.ts-knobs-row > .ts-badge-wrap .ts-badge {
  height: 84px !important;
  max-width: 180px !important;
  width: auto !important;
}
.ts-knobs-row--blackface > .ts-badge-wrap .ts-badge,
.ts-knobs-row--silverface > .ts-badge-wrap .ts-badge {
  height: 84px !important;
  max-width: 180px !important;
}
.ts-knobs-row--textured > .ts-badge-wrap .ts-badge {
/* height: 48px !important; */
  max-width: 180px !important;
}
.ts-knobs-pair {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 28px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.ts-knobs-pair > .ts-ctl {
  width: 84px !important;
  flex: 0 0 84px !important;
  gap: 6px !important;
}
.ts-ctl--bright {
  width: 52px !important;
  flex: 0 0 52px !important;
}
.ts-knob,
.ts-knob-wrap {
  width: 64px !important;
  height: 64px !important;
}
.ts-ctl-name {
  font-size: 11px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.ts-ctl-num {
  font-size: 12.5px !important;
}
.ts-bright-btn {
  width: 28px !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.ts-bright-btn img {
  width: auto !important; height: 65px !important; object-fit: contain; display: block;
  border: none !important; box-shadow: none !important;
}
} /* end @media (min-width: 641px) desktop baseline */

/* Scope: shrink when the right column is narrow */
@container vo-col (max-width: 680px) {
  .ts-knobs-row {
    gap: 10px 12px !important;
    padding: 12px 10px !important;
  }
  .ts-knobs-row > .ts-badge-wrap {
    max-width: 180px !important;
	align-items: inherit;
  }
  /* Scope: max-height 44px (not fixed height 56) */
  .ts-knobs-row > .ts-badge-wrap .ts-badge,
  .ts-knobs-row--blackface > .ts-badge-wrap .ts-badge,
  .ts-knobs-row--silverface > .ts-badge-wrap .ts-badge,
  .ts-badge {
    height: auto !important;
    max-height: 44px !important;
    max-width: 180px !important;
  }
  .ts-knobs-row--textured > .ts-badge-wrap .ts-badge {
    height: auto !important;
    max-height: 36px !important;
    max-width: 180px !important;
  }
  .ts-knobs-pair {
    flex-wrap: nowrap !important;
    gap: 10px 0px !important;
  }
  .ts-knobs-pair--chrome,
  .ts-knobs-pair--chrome-red,
  .ts-knobs-pair--chrome-dark,
  .ts-knobs-pair--compact {
    gap: 8px 0px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .ts-knobs-pair > .ts-ctl {
    width: 58px !important;
    flex: 0 0 58px !important;
  }
  .ts-ctl--bright {
    width: 40px !important;
    flex: 0 0 40px !important;
  }
  .ts-knob,
  .ts-knob-wrap {
    width: 44px !important;
    height: 44px !important;
  }
  .ts-knobs-pair > .ts-ctl .ts-knob-wrap {
    transform: scale(0.72);
    transform-origin: center center;
  }
  .ts-ctl-name { font-size: 9.5px !important; }
  .ts-ctl-num { font-size: 10px !important; }
  .ts-bright-btn {
    width: 20px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .ts-bright-btn img {
    width: auto !important;
    height: 40px !important;
  }
}

@container vo-col (max-width: 480px) {
  .ts-knobs-row > .ts-badge-wrap .ts-badge,
  .ts-knobs-row--blackface > .ts-badge-wrap .ts-badge,
  .ts-knobs-row--silverface > .ts-badge-wrap .ts-badge,
  .ts-badge {
    height: auto !important;
    max-height: 36px !important;
    max-width: 180px !important;
  }
  .ts-knobs-pair > .ts-ctl {
    width: 50px !important;
    flex: 0 0 50px !important;
  }
  .ts-ctl--bright {
    width: 34px !important;
    flex: 0 0 34px !important;
  }
  .ts-knob,
  .ts-knob-wrap {
    width: 38px !important;
    height: 38px !important;
  }
  .ts-knobs-pair > .ts-ctl .ts-knob-wrap {
    transform: scale(0.62);
  }
  .ts-bright-btn {
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Keep horizontal row even under Scope's old 1480px column rule */
@media (min-width: 641px) and (max-width: 1480px) {
  .ts-knobs-row {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .ts-knobs-pair {
    flex-wrap: nowrap !important;
    width: auto !important;
  }
  .ts-knobs-pair > .ts-ctl:first-child {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  .ts-badge-wrap {
    width: auto !important;
  }
}

/* Pot taper selects under knobs on the faceplate */
.ts-ctl-tail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.ts-taper-select,
.ts-ctl-tail select.ts-taper-select,
.ts-ctl-tail select {
  font-size: 9px !important;
  padding: 0 2px !important;
  max-width: 68px !important;
  min-height: 16px !important;
  line-height: 1.2 !important;
  background: rgba(0,0,0,.25);
  color: var(--face-text, #e8e8ea);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 0;
}
.ts-knobs-row--blackface .ts-taper-select,
.ts-knobs-row--blackface .ts-ctl-tail select {
  background: rgba(0,0,0,.4);
  color: #f0efe9;
  border-color: rgba(255,255,255,.18);
}
.ts-knobs-row--silverface .ts-taper-select,
.ts-knobs-row--silverface .ts-ctl-tail select {
  background: rgba(255,255,255,.55);
  color: #1a1e24;
  border-color: rgba(0,0,0,.2);
}

/* Export buttons (PDF) */
.tbc-export-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 12px;
  justify-content: flex-end;
}
.tbc-export-btn {
  appearance: none;
  border: 1px solid var(--tbc-border);
  background: var(--tbc-panel-raised);
  color: var(--tbc-ink);
  font-family: var(--tbc-font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 0;
  cursor: pointer;
}
.tbc-export-btn:hover {
  border-color: var(--tbc-glow);
  color: var(--tbc-glow);
}
.tbc-export-btn:active {
  transform: scale(0.98);
}



.ts-credit,
.dm-callout span {
  text-align: justify;
  font-size: 11.5px;
  color: var(--tbc-ink-faint);
  line-height: 1.6;
}
.ts-foot { margin-top: 18px; }
.ts-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }


/* B&W media: grayscale decorative photos only.
   Keep amp faceplates, brand badges, knobs art, color swatches, and canvases in color. */
img, video { filter: grayscale(1); }
canvas,
.ct-swatch, .rt-swatch, [class*="swatch"],
.ts-knobs-row img, .ts-knobs-row,
[class*="faceplate"] img, [class*="knobs"] img,
[class*="brand"] img, .app-header img,
.install-tip-icon,
button img, .tbc-header img {
  filter: none;
}
.install-gate-icon {
  filter: grayscale(1) !important;
}


/* Header: black bar needs white text (ink token is dark for page body) */
.app-header h1,
.app-header-brand,
.app-header-brand-gta {
  color: #ffffff !important;
}

/* Install gate — pure B&W contrast (local, no shared dependency) */
.install-gate-btn {
  background: #000000;
  color: #ffffff;
}
.install-gate-btn:hover {
  background: #333333;
  color: #ffffff;
}
.install-gate-folder-tip {
  background: #f0f0f0;
  border: 1px solid #cccccc;
  color: #333333;
}
.install-gate-folder-tip strong {
  color: #111111;
}
.tbc-db-notice,
#installGateAndroidNotice {
  background: #f5f5f5;
  border: 1px solid #cccccc;
  color: #333333;
}
.tbc-db-notice strong,
#installGateAndroidNotice strong {
  color: #111111;
}
.install-gate-back-btn,
.install-gate-skip {
  background: #f5f5f5;
  border: 1px solid #cccccc;
  color: #444444;
}


/* ========== Bassman badge: kill empty vertical space (final overrides) ==========
   The badge PNG is 900×130. Fixed heights of 40–48px on textured badges left
   ~10–20px of empty padding above/below the artwork. Force height:auto and a
   tight max-height so the img box hugs the content. Also tighten the column
   faceplate padding/gap. */
.ts-knobs-row.ts-knobs-row--bassman {
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 4px 14px 6px !important;
}
.ts-knobs-row.ts-knobs-row--bassman > .ts-badge-wrap {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  min-height: 0 !important;
}
.ts-knobs-row.ts-knobs-row--bassman > .ts-badge-wrap .ts-badge,
.ts-knobs-row.ts-knobs-row--bassman > .ts-badge-wrap .ts-badge--bassman,
.ts-knobs-row--bassman .ts-badge--bassman,
.ts-badge.ts-badge--bassman {
  height: auto !important;
  max-height: 28px !important;
  max-width: 185px !important;
  width: auto !important;
  display: block !important;
  margin: 0 !important;
  object-fit: contain !important;
}
.ts-knobs-row--textured.ts-knobs-row--bassman > .ts-badge-wrap .ts-badge {
  height: auto !important;
  max-height: 28px !important;
  max-width: 185px !important;
}
@media (max-width: 640px) {
  .ts-knobs-row.ts-knobs-row--bassman {
    gap: 4px !important;
    padding: 6px 10px 8px !important;
  }
  .ts-knobs-row.ts-knobs-row--bassman > .ts-badge-wrap .ts-badge,
  .ts-knobs-row.ts-knobs-row--bassman > .ts-badge-wrap .ts-badge--bassman,
  .ts-badge.ts-badge--bassman {
    max-height: 24px !important;
    max-width: 160px !important;
  }
}


/* ======================================================================
   DiMastro dark B&W — matches main site /bw/ (app-wide final override)
   ====================================================================== */
:root {
  --tbc-bg:            #000000 !important;
  --tbc-panel:         #0d0d0d !important;
  --tbc-panel-raised:  #181818 !important;
  --tbc-well:          #111111 !important;
  --tbc-border:        #333333 !important;
  --tbc-border-soft:   #252525 !important;

  --tbc-ink:           #e8e8e8 !important;
  --tbc-ink-muted:     #c9c9c9 !important;
  --tbc-ink-faint:     #838383 !important;

  --tbc-glow:          #ffffff !important;
  --tbc-glow-dim:      #aaaaaa !important;
  --tbc-glow-soft:     rgba(255, 255, 255, 0.06) !important;

  --tbc-cold:          #666666 !important;
  --tbc-safe:          #cccccc !important;
  --tbc-warn:          #aaaaaa !important;
  --tbc-warn-soft:     rgba(255, 255, 255, 0.05) !important;
  --tbc-danger:        #ffffff !important;
  --tbc-danger-soft:   rgba(255, 255, 255, 0.06) !important;

  --tbc-radius:    0px !important;
  --tbc-radius-sm: 0px !important;

  /* Tone-stack functional plot colors (keep hot filament) */
  --live:     #ff9142 !important;
  --edit:     #4da3ff !important;
  --band-1: #8f5c3a !important;
  --band-2: #d8453c !important;
  --band-3: #e8843a !important;
  --band-4: #e2c44a !important;
  --band-5: #4fa96b !important;
  --band-6: #4a79c4 !important;
  --band-7: #9d6cc6 !important;
  --band-8: #9c97a8 !important;

  /* Generic toolkit aliases some apps use */
  --bg: #000000 !important;
  --panel: #0d0d0d !important;
  --ink: #e8e8e8 !important;
  --muted: #c9c9c9 !important;
  --faint: #838383 !important;
  --border: #333333 !important;
  --chassis: #000000 !important;
  --panel-hi: #181818 !important;
  --rule: #252525 !important;
  --dim: #a8a8a8 !important;
  --grid: #252525 !important;
  --grid-key: #333333 !important;
}

html, body {
  background: #000000 !important;
  color: #c9c9c9 !important;
  color-scheme: dark !important;
}

*, *::before, *::after {
  border-radius: 0 !important;
}

/* Shell chrome */
.app-header {
  background: #000000 !important;
  border-bottom: 1px solid #222 !important;
}
.app-header h1,
.app-header-brand,
.app-header-brand-gta,
.app-header * {
  color: #ffffff !important;
}

.app-footer,
.tbc-footer {
  color: #a8a8a8 !important;
}

/* Main cards / widgets */
.tbc, .ts, .rt, .ct, .vo, .app-main, .app-shell, main {
  background: #0d0d0d !important;
  color: #c9c9c9 !important;
  border-color: #252525 !important;
  box-shadow: none !important;
}

.tbc-setup,
.tbc-panel,
.tbc-ref-col,
.tbcp-safety-card,
.ts-panel,
.ts-scope,
.rt-card,
.ct-card,
.vo-card,
[class*="-setup"],
[class*="-panel"]:not(.app-header):not([class*="badge"]) {
  background: #0d0d0d !important;
  border-color: #333 !important;
  color: #c9c9c9 !important;
}

.tbc-warning,
.tbc-db-notice,
[class*="-warning"],
[class*="-notice"] {
  background: #141414 !important;
  border-color: #333 !important;
  color: #c9c9c9 !important;
}
.tbc-warning strong,
.tbc-db-notice strong {
  color: #ffffff !important;
}

/* Inputs */
input, select, textarea,
.tbc-input, .tbc-select,
.ts input, .ts select,
.rt input, .rt select,
.ct input, .ct select {
  background: #181818 !important;
  color: #e8e8e8 !important;
  border: 1px solid #3a3a3a !important;
  color-scheme: dark;
}
input:focus, select:focus, textarea:focus {
  border-color: #888 !important;
  outline: none !important;
  box-shadow: none !important;
}
option {
  background: #181818 !important;
  color: #e8e8e8 !important;
}

/* Buttons */
button:not(.is-active):not([aria-pressed="true"]),
.tbc-mode-btn,
.tbc-export-btn,
.ts button,
.rt button,
.ct button {
  color: #c9c9c9 !important;
/*   border: 1px solid #3a3a3a !important;*/
}
button:hover,
.tbc-mode-btn:hover,
.tbc-export-btn:hover {
  border-color: #888 !important;
  color: #fff !important;
}
.tbc-mode-btn.is-active,
button.is-active,
button[aria-pressed="true"],
.ts-mode-btn.is-active {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

/* Readouts / results */
.tbc-readout,
.tbc-result-item,
[class*="readout"],
[class*="result-item"] {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #333 !important;
}
.tbc-num,
.tbc-result-value {
  color: #ffffff !important;
}

/* Labels */
.tbc-field-label,
.tbc-eyebrow,
.tbcp-step-label,
.tbc-hint,
label {
  color: #a8a8a8 !important;
}
.tbc-title, h1, h2, h3 {
  color: #e8e8e8 !important;
}
p, .tbc-sub, .tbc-lede {
  color: #c9c9c9 !important;
}

/* Tables */
table, .tbc-bench-table, .dm-table {
  background: #0d0d0d !important;
  color: #e8e8e8 !important;
}
th {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #333 !important;
}
td {
  background: #0d0d0d !important;
  color: #e8e8e8 !important;
  border-color: #333 !important;
}
tr:nth-child(even) td {
  background: #141414 !important;
}

/* Install gate / tip */
.install-tip {
  background: rgba(0,0,0,0.72) !important;
}
.install-tip-card,
.install-gate-card,
.install-gate-folder-tip,
.install-gate-ios-hint,
.install-gate-ios-panel,
.dm-platform-item {
  background: #0d0d0d !important;
  border-color: #333 !important;
  color: #e8e8e8 !important;
}
.install-tip-card h2,
.install-tip-box-title {
  color: #ffffff !important;
}
.install-tip-lead,
.install-tip-box p,
.install-tip-steps {
  color: #c9c9c9 !important;
}
.install-tip-box {
  background: #141414 !important;
  border-color: #333 !important;
}
.install-tip-btn,
.install-gate-btn {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}
.install-gate-skip,
.install-gate-back-btn {
  background: #181818 !important;
  color: #c9c9c9 !important;
  border-color: #333 !important;
}

/* Scope / VO specific light cards */
.vs-scope-card,
.vs-siggen-card,
.vs-compare-card {
  background: #0d0d0d !important;
  border-color: #333 !important;
  color: #c9c9c9 !important;
}

/* Keep functional gauges & tone plot colored */
svg.tbc-gauge,
.tbc-gauge-wrap svg,
canvas#plot,
canvas#scope,
img.ts-badge,
img.ts-badge--sm,
img.vo-brand-badge {
  filter: none !important;
}

/* Gray out decorative media only */
img:not(.ts-badge):not(.ts-badge--sm):not(.vo-brand-badge),
svg:not(.tbc-gauge),
video {
  filter: grayscale(1) !important;
}

/* Column dividers */
.vo-col-left {
  border-right-color: #333 !important;
}


/* ---- restore original card padding; keep box-shadow ---- */
.tbc,
.ts,
.rt-wrap,
.ct-wrap,
section.tbc,
main .tbc {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 30px 60px -30px rgb(255 255 255 / 60%) !important;
  padding: 28px 28px 24px !important;
}

/* Dropdown chevron — must sit ON TOP of dark select background */
select,
.tbc-select,
select.tbc-select,
select.rt-input,
select.ct-input,
.ts select {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: #181818 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9c9c9' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px 8px !important;
  padding-right: 36px !important;
  color: #e8e8e8 !important;
}

/* Scope pitch / time / volts knob captions under the knobs */
.vs-pitch-col .ts-ctl-name,
.vs-pitch-col .ts-ctl-num,
.vs-scope-card .ts-ctl-name,
.vs-scope-card .ts-ctl-num {
  color: #e8e8e8 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.vs-pitch-col .ts-ctl-num {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* ======================================================================
   INSTALL GATE — canonical shared block (identical on every app)
   Source of truth: apps/_shared/css/install-gate.css
   Do not edit a copy inside an individual app; change the shared file
   and re-run sync (or re-append this block to each styles.css).
   Dark theme, self-contained — overrides inline styles, tokens, and
   inherited body fonts so every app matches 1:1.
   ====================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

/* Lock page scroll while the gate is visible */
html.gate-open,
html.gate-open body {
  overflow: hidden !important;
  height: 100% !important;
  touch-action: none !important;
}

/* ---- Root card: force font + color on the whole subtree ---- */
.install-gate,
.install-gate *,
.install-gate *::before,
.install-gate *::after {
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif !important;
  box-sizing: border-box !important;
}

.install-gate {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  padding-top: calc(24px + env(safe-area-inset-top, 0px)) !important;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  background: #000000 !important;
  color: #e8e8e8 !important;
}

.install-gate.is-hidden,
.install-gate[hidden] {
  display: none !important;
}

.install-gate-card {
  max-width: 380px !important;
  width: 100% !important;
  text-align: center !important;
  background: #0d0d0d !important;
  border: 1px solid #333333 !important;
  border-radius: 0 !important;
  padding: 34px 26px 26px !important;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7) !important;
  color: #e8e8e8 !important;
}

.install-gate-icon {
  width: 72px !important;
  height: 72px !important;
  border-radius: 0 !important;
  margin: 0 auto 18px !important;
  display: block !important;
  filter: grayscale(1) !important;
}

/* Titles — display face */
.install-gate-card h2,
.install-gate h2 {
  font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #e8e8e8 !important;
  margin: 0 0 10px !important;
  line-height: 1.25 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

.install-gate-sub,
.install-gate p.install-gate-sub {
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: #c9c9c9 !important;
  line-height: 1.6 !important;
  margin: 0 0 24px !important;
}

/* Primary install button */
.install-gate-btn,
button.install-gate-btn,
#installGateBtn,
.install-gate button.install-gate-btn {
  width: 100% !important;
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
  border-radius: 0 !important;
  padding: 13px 18px !important;
  font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  cursor: pointer !important;
  margin: 0 0 16px !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: background-color 140ms ease !important;
}

.install-gate-btn:hover,
button.install-gate-btn:hover,
#installGateBtn:hover {
  background: #dddddd !important;
  color: #000000 !important;
}

.install-gate-btn[hidden],
#installGateBtn[hidden] {
  display: none !important;
}

/* iOS panel */
.install-gate-ios-panel,
.install-gate #installGateIOSPanel {
  text-align: left !important;
  background: #111111 !important;
  border: 1px solid #333333 !important;
  border-radius: 0 !important;
  padding: 14px 16px 12px !important;
  margin: 0 0 18px !important;
  color: #c9c9c9 !important;
}

.install-gate-ios-panel[hidden],
#installGateIOSPanel[hidden] {
  display: none !important;
}

.install-gate-ios-lead {
  margin: 0 0 10px !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: #e8e8e8 !important;
}

.install-gate-ios-steps {
  margin: 0 0 10px !important;
  padding-left: 20px !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #c9c9c9 !important;
}

.install-gate-ios-steps li {
  margin: 0 0 8px !important;
  color: #c9c9c9 !important;
}

.install-gate-ios-steps li:last-child {
  margin-bottom: 0 !important;
}

.install-gate-ios-steps strong {
  color: #e8e8e8 !important;
  font-weight: 600 !important;
}

.install-gate-ios-steps svg {
  vertical-align: -3px !important;
  margin: 0 2px !important;
  color: #ffffff !important;
  fill: none !important;
}

.install-gate-ios-note {
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #838383 !important;
}

.install-gate-ios-hint,
#installGateIOSHint {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #c9c9c9 !important;
  background: #111111 !important;
  border: 1px solid #333333 !important;
  border-radius: 0 !important;
  padding: 12px 14px !important;
  margin: 0 0 16px !important;
  line-height: 1.6 !important;
}

.install-gate-ios-hint[hidden],
#installGateIOSHint[hidden] {
  display: none !important;
}

.install-gate-ios-hint svg {
  vertical-align: -3px !important;
  margin: 0 2px !important;
  color: #ffffff !important;
}

.install-gate-ios-hint strong {
  color: #e8e8e8 !important;
  font-weight: 600 !important;
}

/* iOS mode hides */
.install-gate.is-ios .install-gate-btn,
.install-gate.is-ios #installGateBtn,
.install-gate.is-ios #installGateAndroidNotice,
.install-gate.is-ios .install-gate-ios-hint,
.install-gate.is-ios #dmPlatformRow,
.install-gate.is-ios .dm-platform-row {
  display: none !important;
}

/* Platform row — beat inline styles on the row and every child */
#dmPlatformRow,
.dm-platform-row,
.install-gate #dmPlatformRow,
.install-gate .dm-platform-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 18px !important;
  text-align: left !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.dm-platform-item,
.install-gate .dm-platform-item,
#dmPlatformIOS,
#dmPlatformAndroid,
#dmPlatformDesktop {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 10px !important;
  background: #111111 !important;
  border: 1px solid #333333 !important;
  padding: 8px 14px !important;
  color: #c9c9c9 !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

/* Override inline color/font on spans/strongs inside platform chips */
.dm-platform-item span,
.dm-platform-item strong,
.install-gate .dm-platform-item span,
.install-gate .dm-platform-item strong,
#dmPlatformIOS span,
#dmPlatformIOS strong,
#dmPlatformAndroid span,
#dmPlatformAndroid strong,
#dmPlatformDesktop span,
#dmPlatformDesktop strong {
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif !important;
  font-size: 12.5px !important;
  color: #c9c9c9 !important;
  background: transparent !important;
}

.dm-platform-item strong,
.install-gate .dm-platform-item strong,
#dmPlatformIOS strong,
#dmPlatformAndroid strong,
#dmPlatformDesktop strong {
  color: #e8e8e8 !important;
  font-weight: 600 !important;
}

.dm-platform-item[hidden],
#dmPlatformIOS[hidden],
#dmPlatformAndroid[hidden],
#dmPlatformDesktop[hidden],
#dmPlatformRow[hidden] {
  display: none !important;
}

/* Android / desktop notice */
.install-gate .tbc-db-notice,
#installGateAndroidNotice,
.install-gate #installGateAndroidNotice {
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
  background: #111111 !important;
  border: 1px solid #333333 !important;
  border-radius: 0 !important;
  padding: 10px 14px !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #c9c9c9 !important;
  margin: 0 0 16px !important;
  text-align: left !important;
}

.install-gate .tbc-db-notice[hidden],
#installGateAndroidNotice[hidden] {
  display: none !important;
}

.install-gate .tbc-db-notice span,
.install-gate .tbc-db-notice strong,
#installGateAndroidNotice span,
#installGateAndroidNotice strong {
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif !important;
  color: #c9c9c9 !important;
  font-size: 12.5px !important;
}

.install-gate .tbc-db-notice strong,
#installGateAndroidNotice strong {
  color: #e8e8e8 !important;
  font-weight: 600 !important;
}

.install-gate .tbc-db-notice svg,
#installGateAndroidNotice svg {
  flex: none !important;
  margin-top: 2px !important;
  color: #ffffff !important;
}

/* Folder tip */
.install-gate-folder-tip,
.install-gate p.install-gate-folder-tip {
  margin: 12px 0 4px !important;
  padding: 10px 12px !important;
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: #c9c9c9 !important;
  background: #111111 !important;
  border: 1px solid #333333 !important;
  border-radius: 0 !important;
  text-align: left !important;
}

.install-gate-folder-tip strong,
.install-gate .install-gate-folder-tip strong {
  color: #e8e8e8 !important;
  font-weight: 600 !important;
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif !important;
}

/* Secondary actions */
.install-gate-skip,
.install-gate-back-btn,
.install-gate button.install-gate-skip,
.install-gate a.install-gate-back-btn {
  display: inline-block !important;
  background: transparent !important;
  border: 1px solid #333333 !important;
  color: #c9c9c9 !important;
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  padding: 6px 14px !important;
  margin: 4px 4px 10px !important;
  line-height: 1.3 !important;
}

.install-gate-skip:hover,
.install-gate-back-btn:hover {
  background: #181818 !important;
  color: #e8e8e8 !important;
}

.install-gate-link,
.install-gate a.install-gate-link {
  display: block !important;
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #aaaaaa !important;
  text-decoration: underline !important;
  margin-bottom: 12px !important;
}

.install-gate-link:hover {
  color: #ffffff !important;
}

/* Version stamp */
.install-gate-version,
#installGateVersion,
.install-gate #installGateVersion {
  margin-top: 14px !important;
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  opacity: 0.55 !important;
  color: #838383 !important;
  line-height: 1.3 !important;
}


/* Keep platform OS logos in full color (Windows blue, etc.) */
.install-gate .dm-platform-item svg,
.install-gate #dmPlatformDesktop svg,
.install-gate #dmPlatformAndroid svg,
.install-gate #dmPlatformIOS svg,
.install-gate .dm-platform-item svg path {
  filter: none !important;
}

@media print {
  .install-gate {
    display: none !important;
  }
}

/* Check for Update — match dark chrome on bias/resistor/capacitor */
#checkUpdateBtn,
button.app-check-update-btn {
  background: #181818 !important;
  color: #c9c9c9 !important;
  border: 1px solid #3a3a3a !important;
}
#checkUpdateBtn:hover,
button.app-check-update-btn:hover {
  background: #222222 !important;
  color: #e8e8e8 !important;
}