/* DiMastro B&W shell — shared across all DiMastro GTA /bw/ pages */

/* DiMastro base + scroll architecture (pure B&W):
   - hero fixed, covers footer while in view
   - nav fixed on top of everything
   - calculator sheet scrolls up over hero
   - footer fixed at bottom, behind hero + sheet; only revealed
     when the white sheet has scrolled fully up past the footer height
*/
*, *::before, *::after { box-sizing: border-box; }

html {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  scroll-behavior: auto;
}

body.dm-bw {
  margin: 0;
  min-height: 100%;
  background: #000 !important;
  color: #c9c9c9 !important;
  font-family: "Inter", system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.5;
}

/* Sharp corners everywhere — kill any rounded cards/inputs from external CSS */
body.dm-bw,
body.dm-bw *,
body.dm-bw *::before,
body.dm-bw *::after {
  border-radius: 0 !important;
}

/* Force pure monochrome on media, EXCEPT the specific functional
   visualizations where color is the content itself: the bias gauge,
   the tube-tester gauge, resistor/capacitor color-code bodies, the
   tone-stack frequency plot, the oscilloscope waveform, and the
   amp-brand badge logos in the knob row. Everything else (photos,
   decorative icons, other diagram SVGs) stays grayscale. */
body.dm-bw img,
body.dm-bw svg,
body.dm-bw canvas,
body.dm-bw video {
  filter: grayscale(1) !important;
}
body.dm-bw svg.tbc-gauge,
body.dm-bw .tbc-gauge-wrap svg,
body.dm-bw svg.gmc-gauge,
body.dm-bw .gmc-gauge-wrap svg,
body.dm-bw #resistorSvg,
body.dm-bw #revSvg,
body.dm-bw #ctCodeSvg,
body.dm-bw #ctColorSvg,
body.dm-bw canvas#plot,
body.dm-bw canvas#scope,
body.dm-bw img.vo-brand-badge,
body.dm-bw .vs-seg-digit-svg,
body.dm-bw img.ts-badge,
body.dm-bw img.ts-badge--sm,
body.dm-bw img[src*="/images/restorations/"],
body.dm-bw img[src*="cap-tap_mod"],
body.dm-bw img.dm-keep-color,
body.dm-bw .dm-platform-item svg {
  filter: none !important;
}

/* —— Nav: always on top —— */
.lc-nav {
  position: fixed;
  top: 0;
  left: 0; right: 0;
  z-index: 150;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 36px; gap: 20px;
  color: #fff;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 100%);
}
.lc-nav a, .lc-nav .lc-nav-meta, .lc-nav .lc-menu-btn { pointer-events: auto; }
.lc-logo {
  font-size: 18px; font-weight: 600; letter-spacing: -0.03em;
  color: #fff; text-decoration: none; white-space: nowrap;
}
.lc-logo sup { display: none; }
.lc-nav-links {
  display: flex; gap: 28px; list-style: none; margin: 0; padding: 0;
}
.lc-nav-links a {
  color: rgba(255,255,255,0.88); text-decoration: none;
  font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
}
.lc-nav-links a:hover { color: #fff; }
.lc-nav-meta {
  display: none;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); white-space: nowrap;
}
.lc-menu-btn {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  margin: 0;
  cursor: pointer;
  color: #fff;
  line-height: 0;
}
.lc-menu-btn svg { display: block; width: 22px; height: 22px; }
.lc-menu-btn .lc-icon-close { display: none; }
.lc-menu-btn.is-open .lc-icon-menu { display: none; }
.lc-menu-btn.is-open .lc-icon-close { display: block; }

/* Mobile full-screen menu panel */
.lc-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 140;
  background: #000;
  color: #fff;
  padding: 88px 28px 40px;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.lc-mobile-menu.is-open { display: flex; }
.lc-mobile-menu a {
  display: block;
  padding: 18px 0;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid #222;
}
.lc-mobile-menu a:hover { color: #ccc; }
.lc-mobile-menu .lc-mobile-meta {
  margin-top: auto;
  padding-top: 28px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #666;
}

@media (max-width: 800px) {
  .lc-nav-links { display: none; }
  .lc-nav-meta { display: none; }
  .lc-menu-btn { display: block; }
  .lc-nav { padding: 14px 18px; top: 0; }
}
body.lc-menu-open { overflow: hidden; }

/* —— Hero: fixed, ABOVE footer so footer stays hidden on load —— */
.lc-hero {
  will-change: transform;
  backface-visibility: hidden;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 5; /* above footer (z 2) so black covers it on initial load */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 120px 36px 56px;
  background: transparent;
  color: #fff;
  overflow: hidden;
  pointer-events: none;
}
.lc-hero a.lc-cta { pointer-events: auto; }
.lc-hero-inner { position: relative; z-index: 1; max-width: 920px; }
.lc-hero-kicker {
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.65); margin: 0 0 16px;
}
.lc-hero h1 {
  margin: 0 0 16px;
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 600; letter-spacing: -0.04em; line-height: 1.05;
  max-width: 14ch;
}
.lc-hero-lead {
  margin: 0 0 28px; max-width: 34em;
  font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.72); font-weight: 400;
}
.lc-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border: 1px solid rgba(255,255,255,0.85);
  color: #fff; text-decoration: none;
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}
.lc-cta:hover { background: #fff; color: #000; }

/* Full viewport spacer: calculator starts fully below the fold */
.lc-hero-spacer {
  display: block;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  flex-shrink: 0;
  pointer-events: none;
  position: relative;
  z-index: 0;
}

/* —— Calculator sheet: scrolls up over hero; covers footer until end ——
   Transparent padding-bottom = footer height so the fixed footer
   is revealed smoothly as the white sheet scrolls fully up. */
.lc-sheet {
  position: relative;
  z-index: 10;
  background: transparent;
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 144px; /* matches doubled footer band — transparent reveal zone */
  pointer-events: none; /* let clicks in the transparent reveal zone fall through to the footer beneath */
}
.lc-sheet-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  background: #000000;
  box-shadow: none;
  border: none;
  border-radius: 0;
  pointer-events: auto; /* the visible white content is still fully interactive */
  min-height: 0vh;
  margin-top: 0 !important;
  transform: none !important;
}
.lc-sheet-pad {
  padding: 48px 36px 64px; max-width: 1120px; margin: 0 auto;
  animation: lc-page-fade-in 140ms ease-out;
}
@keyframes lc-page-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (max-width: 640px) {
  .lc-hero { padding: 100px 18px 40px; }
  .lc-sheet-pad { padding: 28px 18px 48px; }
  .lc-sheet { padding-bottom: 176px; }
}

.lc-section-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: #777; margin: 0 0 8px;
}
.lc-section-title {
  margin: 0 0 28px; font-size: 28px; font-weight: 600; letter-spacing: -0.03em; color: #e8e8e8;
}

/* —— Footer: always fixed at bottom, BEHIND hero + sheet ——
   No opacity/z-index toggling. Covered by hero on load and by the
   white sheet while scrolling; revealed only when the sheet's
   transparent padding-bottom scrolls into the footer band. */
.lc-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1; /* below hero (5) and sheet (10) */
  background: transparent;
  color: #ccc;
  padding: 44px 36px calc(44px + env(safe-area-inset-bottom));
  font-size: 12px; letter-spacing: 0.04em;
  align-items: center;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  transform: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 1px 12px rgba(0,0,0,0.6);
  pointer-events: none;
  opacity: 0;
  /* no transition: snaps instantly at the scroll threshold instead of fading */
}
.lc-footer.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.lc-footer a { color: #eee; text-decoration: none; }
.lc-footer a:hover { color: #fff; }

/* Calculator skin — pure B&W neutrals */
.tbc { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; color: #c9c9c9 !important; }
.tbc-header { display: none !important; }

/* Setup / panel cards: dark panels to match home-page B&W cards */
.tbc-setup,
.tbc-panel,
.tbc-panel-inputs,
.tbc-mode-group,
.vo-col,
.vo-col-left,
.vo-col-right {
  background: #0d0d0d !important;
  color: #c9c9c9 !important;
  border: 1px solid #252525 !important;
  box-shadow: none !important;
}
.tbc-setup *,
.tbc-panel *,
.tbc-panel-inputs *,
.tbc-mode-group * {
  color: inherit;
}
.tbc-setup .tbc-field-label,
.tbc-panel .tbc-field-label,
.tbc-setup .tbc-hint,
.tbc-panel .tbc-hint,
.tbc-setup .tbcp-nudge-hint,
.tbc-panel .tbcp-nudge-hint,
.tbc-setup [data-tbc-el="tubeMeta"] {
  color: #a8a8a8 !important;
}

.tbc-warning {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0 0 32px !important; padding: 16px 18px !important;
  background: #141414 !important;
  border: 1px solid #333 !important;
  color: #c9c9c9 !important; font-size: 13px !important; line-height: 1.5 !important;
}
.tbc-warning strong { color: #fff !important; font-weight: 600; }
.tbc-warning svg { color: #fff !important; }

.vo-desktop-cols {
  display: grid !important;
  grid-template-columns: 1.05fr 0.95fr !important;
  gap: 32px !important;
  align-items: start !important;
  padding: 16px !important;
  background: #141414 !important;
}
.vo-col-left, .vo-col-right {
  background: transparent !important; border: none !important; border-radius: 0 !important;
  padding: 0 !important; border-right: none !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: none !important;
}
.vo-col-left {
  padding-right: 32px !important;
  border-right: 1px solid #333 !important;
}
.vo-col-right { padding-left: 8px !important; }

/* Left column fields fill the full left column — no nested half-width subcolumn */
.vo-col-left .tbc-setup,
.vo-col-left .tbc-panel,
.vo-col-left .tbc-panel-inputs,
.vo-col-left .tbc-mode-group,
.vo-col-left .tbc-field,
.vo-col-left .tbc-input-unit,
.vo-col-left .tbcp-nudge-wrap,
.vo-col-left label,
.vo-col-left .tbc-class-select,
.vo-col-left .tbc-mode-copy,
.vo-col-left .tbc-hint {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  float: none !important;
}
.vo-col-left .tbc-input,
.vo-col-left .tbc-select,
.vo-col-left input.tbc-input,
.vo-col-left select.tbc-select,
.vo-col-left input[type="text"],
.vo-col-left input[type="number"],
.vo-col-left select {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

@media (max-width: 840px) {
  .vo-desktop-cols { grid-template-columns: 1fr !important; gap: 36px !important; }
  .vo-col-left { border-right: none !important; padding-right: 0 !important; border-bottom: 1px solid #333 !important; padding-bottom: 28px !important; }
}

.tbcp-step-label {
  margin: 28px 0 12px !important; padding: 0 !important; border: none !important; background: none !important;
  font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.12em;
  text-transform: uppercase; color: #777 !important;
}
.tbc-field { margin-bottom: 16px !important; width: 100% !important; max-width: none !important; }
.tbc-field-label {
  display: block; margin-bottom: 6px !important;
  font-size: 12px !important; font-weight: 500 !important; color: #a8a8a8 !important;
}
.tbc-hint, .tbcp-nudge-hint { font-size: 12px !important; color: #a8a8a8 !important; }
.tbc-input, .tbc-select, input.tbc-input, select.tbc-select, input[type="text"], input[type="number"], select,
[data-theme="light"] .tbc-input,
[data-theme="light"] .tbc-select,
[data-theme="light"] input.tbc-input,
[data-theme="light"] select.tbc-select,
[data-theme="light"] select.tbc-input,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="number"],
[data-theme="light"] select {
  width: 100% !important; max-width: none !important;
  background: #181818 !important;
  color: #e8e8e8 !important;
  border: 1px solid #3a3a3a !important;
  border-radius: 0 !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
  color-scheme: dark;
}
.tbc-input:focus, .tbc-select:focus, input:focus, select:focus,
[data-theme="light"] .tbc-input:focus,
[data-theme="light"] .tbc-select:focus,
[data-theme="light"] select:focus {
  outline: none !important; border-color: #888 !important; box-shadow: none !important;
}

/* Dropdown option list — prevent black-on-black in the open menu */
.tbc-select option,
select.tbc-select option,
select.tbc-input option,
select option,
[data-theme="light"] .tbc-select option,
[data-theme="light"] select option {
  background: #181818 !important;
  color: #e8e8e8 !important;
}

/* Chevron on selects: light on dark */
.tbc-select,
select.tbc-select,
[data-theme="light"] .tbc-select,
[data-theme="light"] select.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='%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;
  padding-right: 32px !important;
}
/* External CSS: .tbc-panel { display:grid; grid-template-columns:1fr 1fr }
   Force one full-width column — but KEEP mode switching (hidden groups stay hidden). */
.tbc-panel,
#tube-bias-calculator .tbc-panel,
.vo-col-left .tbc-panel {
  display: block !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  max-width: none !important;
}
.tbc-panel-inputs,
#tube-bias-calculator .tbc-panel-inputs,
.vo-col-left .tbc-panel-inputs {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}
.tbc-mode-group:not([hidden]),
#tube-bias-calculator .tbc-mode-group:not([hidden]),
.vo-col-left .tbc-mode-group:not([hidden]) {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}
.tbc-mode-group[hidden],
#tube-bias-calculator .tbc-mode-group[hidden],
.vo-col-left .tbc-mode-group[hidden] {
  display: none !important;
}
.tbc-unit { color: #777 !important; }
.tbcp-nudge-btn {
  background: #181818 !important; border: 1px solid #3a3a3a !important; color: #c9c9c9 !important;
  border-radius: 0 !important; width: 32px; height: 32px; cursor: pointer;
}
.tbcp-nudge-btn:hover { border-color: #888 !important; color: #fff !important; }

/* Mode buttons stay as a compact 2×2 grid across the full left column */
.tbc-modes {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  margin: 8px 0 20px !important;
  width: 100% !important;
  max-width: none !important;
}
.tbc-mode-btn {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #181818 !important; color: #c9c9c9 !important;
  border: 1px solid #3a3a3a !important; border-radius: 0 !important;
  margin: 0 !important;
  padding: 12px 14px !important; font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
  text-align: center !important;
}
.tbc-mode-btn:hover { border-color: #888 !important; color: #fff !important; }
.tbc-mode-btn.is-active {
  background: #fff !important; color: #000 !important;
  border-color: #fff !important;
}

.tbc-export-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px !important; }
.tbc-export-btn {
  background: transparent !important; color: #c9c9c9 !important;
  border: 1px solid #555 !important; border-radius: 0 !important;
  padding: 10px 16px !important; font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.tbc-export-btn:hover { background: #fff !important; color: #000 !important; }

.tbc-readout {
  background: #000 !important; color: #fff !important;
  padding: 24px 20px !important; border-radius: 0 !important; text-align: center;
  position: relative;
}
/* Remove tube photo behind the gauge */
.tbc-tube-frame,
.tbc-tube-photo,
.tbc-readout .tbc-tube-frame,
.tbc-readout img.tbc-tube-photo {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
}
.tbc-gauge-wrap {
  background: transparent !important;
  background-image: none !important;
}
.tbc-num {
  color: #fff !important; font-size: 2.4rem !important; font-weight: 600;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.tbc-big-value { margin: 12px 0; }
.tbc-big-value small {
  display: block; margin-top: 4px;
  font-size: 10px !important; font-weight: 500 !important;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5) !important;
}

.tbcp-safety-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 20px; }
.tbcp-safety-card {
  background: #141414 !important; border: 1px solid #333 !important; border-radius: 0 !important; padding: 16px !important;
}
.tbcp-safety-card-head h3 {
  margin: 0 !important; font-size: 12px !important; font-weight: 600 !important;
  letter-spacing: 0.04em; text-transform: uppercase; color: #fff !important;
}
/* Neutralize any colored safety badges to pure B&W */
.tbcp-safety-badge,
[class*="safety-badge"],
[class*="bias-"] {
  border-radius: 0 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  background: #111 !important;
  color: #fff !important;
  border: 1px solid #333 !important;
}
.tbcp-safety-readout, .tbcp-safety-footnote { font-size: 12.5px !important; color: #838383 !important; }

.vo-full { margin-top: 40px; padding-top: 32px; border-top: 1px solid #333; }
.tbc-bench, details.tbc-bench {
  background: transparent !important; border: 1px solid #333 !important; border-radius: 0 !important;
  margin: 0 0 10px !important; color: #c9c9c9 !important;
}
.tbc-bench summary {
  padding: 14px 16px !important; font-size: 12px !important; font-weight: 600 !important;
  letter-spacing: 0.06em; text-transform: uppercase; color: #fff !important; cursor: pointer;
}
.tbc-bench-prose, .tbc-footer { padding: 12px 16px !important; font-size: 13.5px !important; color: #c9c9c9 !important; line-height: 1.6 !important; }
.tbc-bench-prose h3 { color: #fff !important; font-size: 15px !important; }
/* Tables: dark rows, black header */
.tbc-bench-table,
table.tbc-bench-table,
.tbc-bench table,
[data-theme="light"] .tbc-bench-table,
[data-theme="light"] table.tbc-bench-table,
[data-theme="light"] .tbc-bench table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: #0d0d0d !important;
  color: #e8e8e8 !important;
}
.tbc-bench-table th,
.tbc-bench table th,
[data-theme="light"] .tbc-bench-table th,
[data-theme="light"] .tbc-bench table th {
  background: #000 !important;
  color: #fff !important;
  border-color: #333 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 12px !important;
}
.tbc-bench-table td,
.tbc-bench table td,
.tbc-bench-table tbody tr,
.tbc-bench table tbody tr,
[data-theme="light"] .tbc-bench-table td,
[data-theme="light"] .tbc-bench table td,
[data-theme="light"] .tbc-bench-table tbody tr {
  background: #0d0d0d !important;
  border-color: #333 !important;
  color: #e8e8e8 !important;
  padding: 10px 12px !important;
}
.tbc-bench-table tbody tr:nth-child(even),
.tbc-bench table tbody tr:nth-child(even),
[data-theme="light"] .tbc-bench-table tbody tr:nth-child(even) {
  background: #141414 !important;
}
.tbc-bench-table tbody tr:nth-child(even) td,
.tbc-bench table tbody tr:nth-child(even) td,
[data-theme="light"] .tbc-bench-table tbody tr:nth-child(even) td {
  background: #141414 !important;
  color: #e8e8e8 !important;
}
.tbc-footer--credit { border: none !important; color: #a8a8a8 !important; font-size: 12px !important; }

/* dm-table (guides / restorations) — same readable light text */
.dm-table,
[data-theme="light"] .dm-table {
  background: #0d0d0d !important;
  color: #e8e8e8 !important;
}
.dm-table th,
[data-theme="light"] .dm-table th {
  background: #000 !important;
  color: #fff !important;
}
.dm-table td,
[data-theme="light"] .dm-table td {
  background: #0d0d0d !important;
  color: #e8e8e8 !important;
}
.dm-table tr:nth-child(even) td,
[data-theme="light"] .dm-table tr:nth-child(even) td {
  background: #141414 !important;
  color: #e8e8e8 !important;
}

/* Bench / prose / hints — light text on black sheet
   (these were #000/#333 from the old white-sheet era — invisible on black) */
.tbc-bench,
.tbc-bench *,
.tbc-bench-prose,
.tbc-bench-prose *,
.tbc-footer,
.tbc-footer *,
.tbc-mode-copy,
.tbc-mode-copy *,
.tbc-hint,
.tbc-hint *,
details.tbc-bench p,
details.tbc-bench li,
details.tbc-bench td,
details.tbc-bench span {
  color: #c9c9c9 !important;
}
.tbc-bench h1, .tbc-bench h2, .tbc-bench h3, .tbc-bench h4,
.tbc-bench-prose h1, .tbc-bench-prose h2, .tbc-bench-prose h3, .tbc-bench-prose h4,
.tbc-bench strong, .tbc-bench-prose strong,
.tbc-bench summary,
details.tbc-bench summary {
  color: #ffffff !important;
}
.tbc-bench a, .tbc-bench-prose a, .tbc-footer a {
  color: #e8e8e8 !important;
  text-decoration: underline;
}
.tbc-bench em, .tbc-bench-prose em {
  color: #a8a8a8 !important;
}

/* ======================================================================
   Site-wide token override — forces the existing light-theme design
   tokens ([data-theme="light"], set on <html> for every /bw/ page) to
   pure black / white / neutral gray. Loaded after styles.css + all
   per-tool stylesheets, so these declarations win the cascade.
   NOTE: the bias gauge and tube-tester gauge read --tbc-safe/warn/
   danger/cold/glow/well via getComputedStyle() at render time — those
   two calculators' JS was patched to use literal original colors for
   the gauge specifically, bypassing this override, so their zone
   colors stay intact even though every other badge/table/callout on
   the site reads these same tokens and goes neutral.
   ====================================================================== */
:root,
[data-theme="light"] {
  --tbc-bg:            #000000;
  --tbc-panel:         #0d0d0d;
  --tbc-panel-raised:  #181818;
  --tbc-well:          #111111;
  --tbc-border:        #333333;
  --tbc-border-soft:   #252525;

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

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

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

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

/* Specific hardcoded warm/accent colors baked into styles.css's
   [data-theme="light"] rules (not routed through the tokens above) —
   neutralized individually. */
[data-theme="light"] .dm-table th { background: #000000 !important; color: #ffffff !important; }
[data-theme="light"] .dm-table tr:nth-child(even) td { background: #141414 !important; }
.dm-card-status.is-installed,
[data-theme="light"] .dm-card-status.is-installed {
  background: #181818 !important; color: #c9c9c9 !important; border-color: #333 !important;
}
.dm-card-status.is-not-installed,
[data-theme="light"] .dm-card-status.is-not-installed {
  background: #181818 !important; color: #c9c9c9 !important; border-color: #333 !important;
}
.dm-card-status,
.dm-card-status.is-live,
.dm-card-status.is-guide,
.dm-card-status.is-diy,
.dm-card-status.is-app,
.dm-card-status.is-manual,
.dm-card-status.is-restoration,
.dm-card-status.is-hub,
[data-theme="light"] .dm-card-status,
[data-theme="light"] .dm-card-status.is-live,
[data-theme="light"] .dm-card-status.is-guide,
[data-theme="light"] .dm-card-status.is-diy,
[data-theme="light"] .dm-card-status.is-app,
[data-theme="light"] .dm-card-status.is-manual,
[data-theme="light"] .dm-card-status.is-restoration,
[data-theme="light"] .dm-card-status.is-hub {
  background: #000000 !important; color: #c9c9c9 !important; border-color: #333 !important;
}
[data-theme="light"] .dm-callout,
[data-theme="light"] .dm-callout.is-warn,
[data-theme="light"] .dm-callout.is-info,
.dm-callout,
.dm-callout.is-warn,
.dm-callout.is-info {
  background: #141414 !important; border-color: #333 !important; color: #c9c9c9 !important;
}
[data-theme="light"] .dm-callout strong,
[data-theme="light"] .dm-callout.is-warn strong,
[data-theme="light"] .dm-callout.is-info strong,
[data-theme="light"] .dm-callout-eyebrow,
.dm-callout strong,
.dm-callout.is-warn strong,
.dm-callout.is-info strong,
.dm-callout-eyebrow {
  color: #ffffff !important;
}
[data-theme="light"] .dm-toc-backlink a,
.dm-toc-backlink a {
  color: #c9c9c9 !important; background: #181818 !important; border-color: #333 !important;
}
[data-theme="light"] .dm-article .dm-toc-backlink a:hover,
[data-theme="light"] .dm-theme-toggle:hover,
[data-theme="light"] .dm-recent-chip:hover,
[data-theme="light"] .tbc-export-btn:hover,
.dm-article .dm-toc-backlink a:hover,
.dm-theme-toggle:hover,
.dm-recent-chip:hover {
  color: #000000 !important; background: #ffffff !important; border-color: #ffffff !important;
}
[data-theme="light"] .dm-toc-title,
.dm-toc-title { color: #e8e8e8 !important; }
[data-theme="light"] .dm-navbar-link:hover,
[data-theme="light"] .dm-navbar-link.is-active,
.dm-navbar-link:hover,
.dm-navbar-link.is-active { color: #ffffff !important; }

/* Article schematic SVGs — neutral ink instead of amber/tan */
[data-theme="light"] .dm-article-figure svg .dm-sch-accent,
[data-theme="light"] .dm-article-figure svg .bl-accent,
[data-theme="light"] .dm-article-figure svg .dt-accent {
  stroke: #111111 !important;
}
.dm-article-figure svg .dm-sch-accent,
.dm-article-figure svg .bl-accent,
.dm-article-figure svg .dt-accent {
  stroke: #ffffff !important;
}
.dm-icon-apple, [data-theme="light"] .dm-icon-apple { color: #c9c9c9 !important; }

/* Generic safety-badge / status-pill neutralizer used across several
   toolkit pages (bias, tube tester, tube database, etc.) — the gauges
   themselves are exempted above; this only affects text/border pills.
   Explicitly excludes <img> because "-badge" is also the naming
   convention for the real amp-logo PNGs (.vo-brand-badge, .ts-badge),
   which this was wrongly painting solid black over. */
*:not(img)[class*="-badge"], *:not(img)[class*="badge-"],
.tbcp-safety-badge {
  background: #181818 !important;
  color: #c9c9c9 !important;
  border-color: #333 !important;
}

/* Nav: 9 top-level links now fit tighter — smaller gap/label size on
   desktop, and the hamburger switch-over kicks in earlier so links
   never wrap awkwardly on medium-width laptop screens. */
.lc-nav-links { gap: 16px; }
.lc-nav-links a { font-size: 10.5px; letter-spacing: 0.08em; }
@media (max-width: 1180px) {
  .lc-nav-links { display: none; }
  .lc-nav-meta { display: none; }
  .lc-menu-btn { display: block; }
}

/* ======================================================================
   Tone-stack live trace + edit-marker color. Both are aliased to the
   general --tbc-glow/--tbc-cold tokens (.ts { --live: var(--tbc-glow) })
   which are neutralized to black/gray above for the rest of the site's
   UI — but that made the "hot filament" trace line invisible against
   the CRT's near-black background. Restored as the tool's own scoped
   values, independent of the general token override.
   ====================================================================== */
.ts {
  /* Functional plot colors — NOT B&W (hot filament live + edit probe) */
  --live: #ff9142;
  --edit: #4da3ff;
  --band-1: #8f5c3a;
  --band-2: #d8453c;
  --band-3: #e8843a;
  --band-4: #e2c44a;
  --band-5: #4fa96b;
  --band-6: #4a79c4;
  --band-7: #9d6cc6;
  --band-8: #9c97a8;
}

/* ======================================================================
   Bias / Tone Stack / Scope were designed for a wider working area
   (their two-column layouts, brand-tab strip and amp nameplate all
   need the room) than the standard 1120px article sheet. Restore the
   wider sheet on just these three pages, matching the tool's original
   intended width, with the same responsive step-down the live site
   used before this redesign.
   ====================================================================== */
body:has(#tube-bias-calculator) .lc-sheet-pad,
body:has(#tone-stack-calculator) .lc-sheet-pad,
body:has(#virtual-oscilloscope) .lc-sheet-pad {
  max-width: 1520px;
}
@media (max-width: 980px) {
  body:has(#tube-bias-calculator) .lc-sheet-pad,
  body:has(#tone-stack-calculator) .lc-sheet-pad,
  body:has(#virtual-oscilloscope) .lc-sheet-pad {
    max-width: 1080px;
  }
}

/* ======================================================================
   "Black on black" buttons: several components paint their active/
   selected state as background: var(--amber) [= var(--tbc-glow)] with
   a hardcoded dark literal text color, assuming --tbc-glow stays a
   light amber. Since it's neutralized to black above for the rest of
   the site's chrome, these specific pairs need an explicit light-on-
   dark override instead of inheriting the (now-broken) combination.
   This includes the cookie-consent accept button, which appears on
   every page. */
.tbc-preset-btn.is-active,
.rt-segmented button.active,
.ct-segmented button.active,
.ch-segmented button.active,
.dm-return-btn,
.dm-cookie-btn {
  background: #111111 !important;
  color: #ffffff !important;
}

/* ======================================================================
   Apps page OS install cards — dark B&W treatment matching home cards.
   OS logos keep real color (exempted from grayscale filter).
   ====================================================================== */
.dm-platform-item {
  background: #0d0d0d !important;
  border-color: #252525 !important;
}
.dm-platform-item strong,
.dm-platform-item span {
  color: #c9c9c9 !important;
}

/* ======================================================================
   Hero title color fix. The site's own light-theme CSS has a global
   [data-theme="light"] h1,h2,h3 { color: var(--tbc-ink) !important; }
   rule (for readable article headings on the white sheet) — but since
   the hero <h1> is a bare tag with no color of its own, that rule wins
   over .lc-hero's intended white and renders the hero title as
   near-invisible dark ink on the black hero. Restore white here with
   matching specificity + !important so it wins regardless of load order.
   ====================================================================== */
.lc-hero h1,
[data-theme="light"] .lc-hero h1 {
  color: #ffffff !important;
}

/* ======================================================================
   Amp badges/nameplates and the brand-selector tab icons are real
   transparent PNGs (or CSS text nameplates with no background of their
   own) — but the tab buttons carry a dark "unlit chrome" gradient
   background by design, and it was showing through as a solid black
   box behind the logo. Forced transparent so only the artwork itself
   shows, on whatever the row/tab's real background is underneath.
   The selected tab's own lit-up background (per-brand color) is left
   alone — only the unselected/default state is cleared.
   ====================================================================== */
body.dm-bw .vo-brand-tabs button:not([aria-selected="true"]),
body.dm-bw .ts .ts-tabs button:not([aria-selected="true"]) {
  background: transparent !important;
  border-color: #353535 !important;
  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) !important;
}
body.dm-bw .ts-badge-wrap,
body.dm-bw .ts-badge,
body.dm-bw .ts-panel-name {
  background: transparent !important;
  background-image: none !important;
}

/* ======================================================================
   Remaining orange/black-on-black leftovers from --tbc-glow neutralizing:
   1) "Play Dat Noiz" button — inline style pairs background:var(--tbc-
      glow) [now black] with a hardcoded dark text color = black-on-black.
   2) Scope knob readouts (Frequency/Time-Div/Volts-Div) — hardcoded
      orange text color, unrelated to the token system.
   3) Every calculator's numeric result readout (.tbc-result-value) and
      its label — same hardcoded-orange pattern, site-wide.
   All forced to plain black/gray text, matching the rest of the B&W
   readouts.
   ====================================================================== */
#playToneBtn {
  background: #111111 !important;
  color: #ffffff !important;
}
[data-theme="light"] .vs-pitch-col .ts-ctl-num {
  color: #e8e8e8 !important;
}
[data-theme="light"] .tbc-result-value {
  color: #e8e8e8 !important;
}
[data-theme="light"] .tbc-result-label {
  color: #838383 !important;
}

/* ======================================================================
   Hero background photos (all 4 pages: home, bias, scope, tone stack).
   A plain, permanently position:fixed layer, OUTSIDE .lc-hero entirely
   and with no JS involvement at all — it never moves, never fades,
   full stop, regardless of scroll position.
   The footer sits above it in z-order unconditionally (.lc-footer is
   z-index 1, this layer is 0), so the footer is always visible on top
   of the image rather than hidden behind it.
   Z-order: .lc-hero-bg-fixed (0) < .lc-footer (1) < .lc-hero (5, text
   only, transparent bg) < .lc-sheet (10).
   ====================================================================== */
.lc-hero-bg-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh; /* fallback for browsers without lvh support */
  height: 100lvh; /* locks to largest viewport — ignores iOS Safari toolbar show/hide */
  z-index: 0; /* below .lc-footer (1) — the footer always sits on top of this image, unconditionally */
  overflow: hidden;
  pointer-events: none;
}
.lc-home-bg-image,
.lc-page-bg-image,
.lc-home-bg-slide {
  position: absolute;
  inset: -5% -15%; /* overscan so the scale never reveals an edge */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.lc-page-bg-image {
  animation: lc-home-bg-fade 8s ease-in-out infinite alternate;
}
.lc-home-bg-slides {
  position: absolute;
  inset: 0;
}
.lc-home-bg-slide {
  opacity: 0;
  will-change: opacity, transform;
  animation-fill-mode: both;
}
.lc-home-bg-slide--1 {
  background-image: url("../images/bg_home-01.jpg");
  animation: lc-fade-slide-1 24s infinite ease-in-out;
}
.lc-home-bg-slide--2 {
  background-image: url("../images/bg_tsc-01.jpg");
  animation: lc-fade-slide-2 24s infinite ease-in-out;
}
.lc-home-bg-slide--3 {
  background-image: url("../images/bg_bias-02.jpg");
  animation: lc-fade-slide-3 24s infinite ease-in-out;
}

.lc-rest-bg-slide--1 {
  background-image: url("../images/restorations/vibrolux-reverb-69/vib69-02-doghouse-mallory-detail.jpg");
  animation: lc-fade-slide-1 24s infinite ease-in-out;
}
.lc-rest-bg-slide--2 {
  background-image: url("../images/restorations/deluxe-reverb-71/dr71-12-diag-mallory-label.jpg");
  animation: lc-fade-slide-2 24s infinite ease-in-out;
}
.lc-rest-bg-slide--3 {
  background-image: url("../images/restorations/pro-reverb-80-81/pr8081-12-diag-original-filter-caps.jpg");
  animation: lc-fade-slide-3 24s infinite ease-in-out;
}



.lc-home-bg-overlay,
.lc-page-bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5); /* darkening raster over the photo */
}
.lc-home-bg-image {
  background-image: url("../images/bg_home-01.jpg");
  animation: lc-home-bg-fade 8s ease-in-out infinite alternate;
}
/* Default/fallback photo for every other page's hero — the more
   specific body.lc-bias / lc-scope / lc-tsc rules below override this
   for their own dedicated photos. */
.lc-page-bg-image {
  background-image: url("../images/bg_bench.jpg");
}
body.lc-bias .lc-page-bg-image {
  background-image: url("../images/bg_bias-02.jpg");
}
body.lc-scope .lc-page-bg-image {
  background-image: url("../images/bg_scope-01.jpg");
}
body.lc-tsc .lc-page-bg-image {
  background-image: url("../images/bg_tsc-01.jpg");
}
body.lc-dr71 .lc-page-bg-image {
  background-image: url("../images/restorations/deluxe-reverb-71/dr71-41-final-front3.jpg");
}
body.lc-pro80 .lc-page-bg-image {
  background-image: url("../images/restorations/pro-reverb-80-81/pr8081-30-final-panel-wide.jpg");
}
body.lc-vl69 .lc-page-bg-image {
  background-image: url("../images/restorations/vibrolux-reverb-69/vib69-13-eyelet-board-recapped.jpg");
}
.lc-nobrato-bg-image {
  background-image: url("../images/nobrato.jpg");
}
.lc-nfb-bg-image {
  background-image: url("../images/bg_nfb.jpg");
}

@keyframes lc-home-bg-fade {
  from { opacity: 0.35; transform: scale(1.15); }
  to   { opacity: 1;    transform: scale(1); }
}

/* Seamless overlapping cross-fade keyframes (24s total loop) */
@keyframes lc-fade-slide-1 {
  0%     { opacity: 1; transform: scale(1.18); }
  33%    { opacity: 1; transform: scale(1.05); }
  38%    { opacity: 0; transform: scale(1.0); }
  93%    { opacity: 0; transform: scale(1.18); }
  100%   { opacity: 1; transform: scale(1.18); }
}

@keyframes lc-fade-slide-2 {
  0%     { opacity: 0; transform: scale(1.18); }
  29%    { opacity: 0; transform: scale(1.18); }
  33%    { opacity: 1; transform: scale(1.18); }
  66%    { opacity: 1; transform: scale(1.05); }
  71%    { opacity: 0; transform: scale(1.0); }
  100%   { opacity: 0; transform: scale(1.18); }
}

@keyframes lc-fade-slide-3 {
  0%     { opacity: 0; transform: scale(1.18); }
  62%    { opacity: 0; transform: scale(1.18); }
  66%    { opacity: 1; transform: scale(1.18); }
  93%    { opacity: 1; transform: scale(1.05); }
  100%   { opacity: 0; transform: scale(1.0); }
}

@media (prefers-reduced-motion: reduce) {
  .lc-home-bg-image, .lc-page-bg-image { animation: none; opacity: 1; transform: none; }
  .lc-home-bg-slide { animation: none; opacity: 0; transform: none; }
  .lc-home-bg-slide--1 { opacity: 1; }
}

/* Pre-existing site-wide decorative tube watermark (body::after in the
   original styles.css) — removed per request; not something added by
   this redesign. */
body.dm-bw::after {
  display: none !important;
}

/* ===== Final B&W dark-theme enforcement (match home page cards) ===== */
[data-theme="light"] .tbc-warning,
.tbc-warning,
.tbc-db-notice,
.bl-warn, .ch-warn, .cb-warn,
[class*="-warn"]:not(img) {
  background: #141414 !important;
  border: 1px solid #590000 !important;
  color: #c9c9c9 !important;
}
[data-theme="light"] .tbc-warning strong,
.tbc-warning strong,
.tbc-db-notice strong {
  color: #fff !important;
}
[data-theme="light"] .tbc-warning svg,
.tbc-warning svg {
  color: #fff !important;
}
[data-theme="light"] .tbc-note,
[class*="-note"]:not(img) {
  background: #141414 !important;
  border: 1px solid #593d00 !important;
  color: #c9c9c9 !important;
}
/* Install / platform banners */
.dm-install-banner,
[class*="install"][class*="banner"],
.dm-platform-item {
  background: #0d0d0d !important;
  border: 1px solid #252525 !important;
  color: #c9c9c9 !important;
}
.dm-platform-item strong,
.dm-platform-item span {
  color: #e8e8e8 !important;
}
.dt-caution{
  display:flex; gap:10px; background:rgba(209,88,74,0.08); border:1px solid rgba(209,88,74,0.3);
  border-radius: 0; padding:12px 14px; margin-bottom:28px; font-size:13.5px; color:var(--text-muted); line-height:1.55;
}
.dt-caution b{ color:var(--text); }

/* Generic result / readout cards that were light */
.tbc-result,
.tbc-result-card,
[class*="readout-card"],
[class*="result-panel"] {
  background: #0d0d0d !important;
  border: 1px solid #252525 !important;
  color: #e8e8e8 !important;
}

/* Keep functional gauges colored (already exempted via filter:none) */
/* Everything else stays pure grayscale B&W */


/* ======================================================================
   Smooth page transitions — exit only (enter-from-0 after paint caused a
   blank flash / "loads twice"). New page appears quickly; sheet fade is short.
   ====================================================================== */
html.dm-page-exit body.dm-bw {
  opacity: 0;
  transition: opacity 90ms ease;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  html.dm-page-exit body.dm-bw {
    transition: none !important;
    opacity: 1 !important;
  }
}

/* Styling for zoomable images on figures with the dm-expand class */
.dm-article-figure.dm-expand img {
  cursor: pointer;
  transition: transform 0.3s ease;
}

/* Fullscreen overlay state */
.image-fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  cursor: pointer;
}

.image-fullscreen-overlay img {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
  width: auto !important;
  height: auto !important;
}