/* ======================================================================
   GENERATED FILE -- do not edit directly.
   Rebuilt from css/_head.css (+ css/_extra.css, where present) and
   apps/_shared/css/app-shell.css by apps/_shared/sync-apps.py.
   Edit one of those source files, then re-run the sync script.
   ====================================================================== */

/*
  Tone Stack Calculator — standalone PWA
  ------------------------------------------------------------------
  Root design tokens (from the DiMastro site's styles.css) + the
  shared .tbc card styles + the tone-stack widget's own .ts styles,
  combined into one file, plus an app-shell layer at the bottom.
*/

:root {
  --tbc-bg:            #1c1712;
  --tbc-panel:         #221b15;
  --tbc-panel-raised:  #2a2119;
  --tbc-well:          #16110d;
  --tbc-border:        #3c2f22;
  --tbc-border-soft:   #2f261c;

  --tbc-ink:           #f3ead9;
  --tbc-ink-muted:     #dfd0bd;
  --tbc-ink-faint:     #cd9c60;

  --tbc-glow:          #ff9142;
  --tbc-glow-dim:      #c96a2c;
  --tbc-glow-soft:     rgba(255, 145, 66, 0.16);

  --tbc-cold:          #4da3ff;
  --tbc-safe:          #7cbf8e;
  --tbc-warn:          #e7b84f;
  --tbc-warn-soft:     rgba(231, 184, 79, 0.14);
  --tbc-danger:        #e0522e;
  --tbc-danger-soft:   rgba(224, 82, 46, 0.14);

  --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:    14px;
  --tbc-radius-sm: 8px;
}


.tbc {
  font-family: var(--tbc-font-body);
  color: var(--tbc-ink);
  background:
    radial-gradient(120% 140% at 15% -10%, rgba(44, 33, 23, 0.8) 0%, transparent 55%),
    linear-gradient(175deg, rgba(34, 27, 21, 0.8) 0%, rgba(28, 23, 18, 0.8) 100%);
  border: 1px solid var(--tbc-border);
  border-radius: var(--tbc-radius);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 30px 60px -30px rgba(0, 0, 0, 0.6);
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 28px 24px;
  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: 999px;
  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: var(--tbc-radius-sm);
  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: var(--tbc-radius-sm);
  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(42, 33, 25, 0.8);
  border: 1px solid var(--tbc-border-soft);
  border-radius: var(--tbc-radius-sm);
}

.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: 8px;
  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: var(--tbc-radius-sm);
  overflow: hidden;
  margin: 18px 0;
}

.tbc-ref-col {
  background: rgba(34, 27, 21, 0.8);
  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: var(--tbc-radius-sm);
  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: 640px) {
  .tbc { padding: 20px 16px; }
  .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%; }
}

@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:     var(--tbc-glow);   /* the active trace: hot filament */
  --edit:     var(--tbc-cold);   /* anything you can change */
  --grid:     var(--tbc-border-soft);
  --grid-key: var(--tbc-border);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (prefers-reduced-motion: reduce) {
  .ts *, .ts *::before { transition: none !important; }
}
   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
   to regenerate every app's actual served styles.css. Edits made
   straight to a generated styles.css will be overwritten on next sync.

   Tool-specific widget CSS (the calculator itself) lives in each app's
   own css/_head.css and is untouched by this file or the sync script.
   ====================================================================== */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--tbc-bg);
  color: var(--tbc-ink);
  min-height: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

body {
  font-family: var(--tbc-font-body);
  /* Safe-area padding so content clears the iPhone notch / home
     indicator when running standalone (added to home screen). */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.app-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(env(safe-area-inset-top) + 14px) 18px 14px;
  background: linear-gradient(180deg, rgba(28, 23, 18, 1) 0%, rgba(28, 23, 18, 0.94) 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: 6px;
}

.app-header h1 {
  font-family: var(--tbc-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--tbc-ink);
  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: var(--tbc-ink);
  margin-left: auto;
  white-space: nowrap;
}

.app-header-brand-gta {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--tbc-ink-faint);
}

main.app-main {
  padding: 20px 14px calc(40px + env(safe-area-inset-bottom));
}

/* 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: var(--tbc-radius-sm);
  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: #241a0f;
  border: none;
  border-radius: 999px;
  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%, rgba(255, 145, 66, 0.10) 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: var(--tbc-radius);
  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: 16px;
  margin-bottom: 18px;
}

.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: #241a0f;
  border: none;
  border-radius: 999px;
  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(34, 27, 21, 0.8);
  border: 1px solid var(--tbc-border-soft);
  border-radius: var(--tbc-radius);
  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-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(205, 156, 96, 0.14);
  border: 1px solid rgba(205, 156, 96, 0.35);
  border-radius: 999px;
  text-decoration: none;
}
.install-gate-back-btn:hover {
  background: rgba(205, 156, 96, 0.22);
  color: var(--tbc-ink);
}

.install-gate-skip {
  display: inline-block;
  background: rgba(77, 163, 255, 0.14);
  border: 1px solid rgba(77, 163, 255, 0.35);
  color: var(--tbc-cold);
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 10px;
}
.install-gate-skip:hover { background: rgba(77, 163, 255, 0.22); 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: var(--tbc-radius-sm);
  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
   ------------------------------------------------------------------
   The tone stack widget is wider than the generic shell default, so
   this widens both the widget wrapper and the footer to match once
   installed as a standalone app. Kept out of the shared app-shell.css
   since no other app needs this override. */
.tbc {
  max-width: 1100px;
  padding: 22px 18px 20px;
}

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