/* =========================================================================
   BridgeLab — visual identity: power red on the same dark board as the
   rest of the electronics track. CircuitLab is phosphor green, ACLab scope
   cyan, SemiLab junction orange; this card is the one where things get
   hot enough to destroy themselves, and it looks like it.
   ========================================================================= */
:root {
  --bp-bg: #140a0b;
  --bp-bg2: #1b0e10;
  --bp-panel: #241316;
  --bp-panel2: #321c20;
  --bp-line: #4a2c31;
  --bp-line2: #653b42;
  --bp-ink: #f6e6e8;
  --bp-ink-dim: #b8949a;
  --bp-cyan: #ff6b6b;          /* primary accent: power red */
  --bp-blue: #4dabf7;
  --bp-amber: #ffd43b;
  --bp-mark: #ffd43b;
  --bp-red: #ff8787;
  --bp-green: #2ee6a8;
  --bp-violet: #b197fc;
  --bp-pink: #f472b6;
  --bp-steel: #ccbabd;

  --q-u: #4dabf7;
  --q-i: #ffd43b;
  --q-p: #ff8787;
  --q-bus: #b197fc;

  --page-max: 1520px;
  --calc-col: 430px;
  --learn-col: 300px;
}

/* Heavy copper: wide traces and via stitching, as on a power board. */
body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='176'%3E%3Cg fill='none' stroke='%23ff6b6b' stroke-opacity='0.05' stroke-width='4'%3E%3Cpath d='M0 34h60l22 22h94'/%3E%3Cpath d='M0 130h44l26-26h106'/%3E%3C/g%3E%3Cg fill='%23ff6b6b' fill-opacity='0.06'%3E%3Ccircle cx='24' cy='34' r='3.5'/%3E%3Ccircle cx='44' cy='34' r='3.5'/%3E%3Ccircle cx='24' cy='130' r='3.5'/%3E%3Ccircle cx='150' cy='56' r='3.5'/%3E%3Ccircle cx='150' cy='104' r='3.5'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(rgba(255, 107, 107, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 107, 107, 0.018) 1px, transparent 1px);
  background-size: 176px 176px, 176px 176px, 176px 176px;
}

/* ------------------------------- BridgeLab only ------------------------- */
#bridgeView, #waveView, #lossView, #sweepView, #quadView {
  background: rgba(10, 5, 6, 0.62);
  border: 1px solid var(--bp-line);
  border-radius: 8px;
  width: 100%;
  height: auto;
  touch-action: manipulation;
}

/* The three drive kinds, and the three modulation schemes: both are
   pick-one-of-a-few, so both get the same control. */
.seg-row { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.55rem; }
.seg-row button {
  flex: 1; min-width: 5.5rem;
  font-family: var(--mono); font-size: 0.7rem; cursor: pointer;
  background: var(--bp-panel2); color: var(--bp-ink-dim);
  border: 1px solid var(--bp-line); border-radius: 7px; padding: 0.35rem 0.4rem;
  transition: 0.15s;
}
.seg-row button:hover { color: var(--bp-ink); border-color: var(--bp-cyan); }
.seg-row button.on {
  color: var(--bp-cyan); border-color: var(--bp-cyan);
  background: color-mix(in srgb, var(--bp-cyan) 14%, transparent);
}

.param-row {
  display: grid; grid-template-columns: 1fr 5.4rem 3rem;
  gap: 0.4rem; align-items: center; margin-bottom: 0.35rem;
}
.param-row label { font-family: var(--mono); font-size: 0.76rem; color: var(--bp-ink-dim); }
.param-row .punit { font-family: var(--mono); font-size: 0.72rem; color: var(--bp-ink-dim); }
.param-row input[type="number"] { width: 100%; }

/* Duty gets a slider, because it is the one number people sweep by feel. */
.duty-row { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; align-items: center; }
.duty-row input[type="range"] { width: 100%; accent-color: var(--bp-cyan); }
.duty-big {
  font-family: var(--mono); font-size: 1.15rem; color: var(--bp-cyan);
  white-space: nowrap; text-align: right; min-width: 4.6rem;
}

.op-strip {
  display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: baseline;
  margin-top: 0.55rem; font-family: var(--mono); font-size: 0.74rem; color: var(--bp-ink-dim);
}
.op-strip b { color: var(--bp-ink); font-size: 0.95rem; font-weight: 600; }
.op-strip .tag {
  padding: 0.1rem 0.5rem; border-radius: 4px; font-size: 0.7rem;
  border: 1px solid currentColor;
}
.op-strip .tag.drive { color: var(--bp-cyan); }
.op-strip .tag.regen { color: var(--bp-green); }
.op-strip .tag.hold { color: var(--bp-ink-dim); }

/* The loss breakdown is a stacked bar, because the question is always
   "which of these is the big one". */
.loss-bar { display: flex; height: 26px; border-radius: 5px; overflow: hidden; margin-top: 0.5rem; }
.loss-bar span { display: block; height: 100%; }
.loss-key { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 0.45rem; font-family: var(--mono); font-size: 0.7rem; color: var(--bp-ink-dim); }
.loss-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 0.3rem; vertical-align: -1px; }

.curve-foot, .wave-foot {
  display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center;
  margin-top: 0.5rem; font-family: var(--mono); font-size: 0.72rem; color: var(--bp-ink-dim);
}
.curve-foot b, .wave-foot b { color: var(--bp-ink); }

.note-line { font-family: var(--mono); font-size: 0.74rem; color: var(--bp-ink-dim); margin-top: 0.5rem; line-height: 1.6; }
.note-line b { color: var(--bp-cyan); }

.learn-body .q { font-family: var(--mono); color: var(--bp-cyan); font-weight: 600; }
.learn-body .mini-tbl { margin: 0.7rem auto 0; font-size: 0.78rem; width: auto; min-width: 60%; }
.learn-body .mini-tbl td, .learn-body .mini-tbl th { padding: 0.25rem 0.6rem; }