/* =========================================================================
   SensorLab — visual identity: violet, the one hue left free on this
   track. CircuitLab green, ACLab cyan, SemiLab orange, BridgeLab red —
   and this card, which is about turning the world into a voltage, gets
   the colour furthest from all of them.
   ========================================================================= */
:root {
  --bp-bg: #0d0a16;
  --bp-bg2: #120e1f;
  --bp-panel: #191330;
  --bp-panel2: #241b42;
  --bp-line: #382a5c;
  --bp-line2: #4d3b78;
  --bp-ink: #ece7f7;
  --bp-ink-dim: #a294c4;
  --bp-cyan: #845ef7;          /* primary accent */
  --bp-blue: #4dabf7;
  --bp-amber: #ffd43b;
  --bp-mark: #ffd43b;
  --bp-red: #ff8787;
  --bp-green: #2ee6a8;
  --bp-violet: #b197fc;
  --bp-pink: #f472b6;
  --bp-steel: #c3bad6;

  --q-u: #4dabf7;
  --q-i: #ffd43b;
  --q-p: #ff8787;
  --q-q: #2ee6a8;

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

/* Contour lines: the world being measured. */
body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cg fill='none' stroke='%23845ef7' stroke-opacity='0.05' stroke-width='1.3'%3E%3Cpath d='M-10 60 q 50 -34 100 0 t 110 0'/%3E%3Cpath d='M-10 92 q 50 -34 100 0 t 110 0'/%3E%3Cpath d='M-10 124 q 50 -34 100 0 t 110 0'/%3E%3C/g%3E%3Cg fill='%23845ef7' fill-opacity='0.06'%3E%3Ccircle cx='40' cy='45' r='2.5'/%3E%3Ccircle cx='140' cy='139' r='2.5'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(rgba(132, 94, 247, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(132, 94, 247, 0.018) 1px, transparent 1px);
  background-size: 190px 190px, 190px 190px, 190px 190px;
}

/* ------------------------------- SensorLab only ------------------------- */
#curveView, #chainView, #resView {
  background: rgba(6, 4, 12, 0.62);
  border: 1px solid var(--bp-line);
  border-radius: 8px;
  width: 100%;
  height: auto;
  touch-action: manipulation;
}

.sensor-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.45rem; }
.sensor-grid button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem;
  padding: 0.5rem 0.6rem;
  background: var(--bp-panel2); border: 1px solid var(--bp-line);
  border-radius: 8px; color: var(--bp-ink-dim); cursor: pointer;
  font-family: var(--mono); font-size: 0.72rem; text-align: left; transition: 0.15s;
}
.sensor-grid button:hover { border-color: var(--bp-cyan); color: var(--bp-ink); }
.sensor-grid button.on {
  color: var(--bp-cyan); border-color: var(--bp-cyan);
  background: color-mix(in srgb, var(--bp-cyan) 14%, transparent);
}
.sensor-grid button i { font-style: normal; font-size: 0.62rem; opacity: 0.72; }

.param-row {
  display: grid; grid-template-columns: 1fr 5.4rem 3.2rem;
  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%; }

.meas-row { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; align-items: center; }
.meas-row input[type="range"] { width: 100%; accent-color: var(--bp-cyan); }
.meas-big {
  font-family: var(--mono); font-size: 1.15rem; color: var(--bp-cyan);
  white-space: nowrap; text-align: right; min-width: 6.2rem;
}

/* The verdict — which link limits the chain — is the headline of the page. */
.verdict {
  display: flex; gap: 0.7rem; align-items: baseline; flex-wrap: wrap;
  margin-top: 0.6rem; padding: 0.5rem 0.7rem; border-radius: 7px;
  font-family: var(--mono); font-size: 0.78rem;
  border: 1px solid currentColor;
}
.verdict.good { color: var(--bp-green); }
.verdict.warn { color: var(--bp-amber); }
.verdict.bad { color: var(--bp-red); }
.verdict b { color: var(--bp-ink); font-size: 0.95rem; }

.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; }

.curve-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 { color: var(--bp-ink); }

.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; }