/* css/lanes/controls.css — owned by the "controls" lane.
   The control-position instrument and the control-feel settings panel.
   Matte, restrained, aviation-instrument: base.css tokens only, thin lines,
   mono microlabels, one coral marker drawn in the canvas. No glows. */

.bb-ctl {
  position: fixed;
  left: var(--s3);
  bottom: var(--s3);
  z-index: 30;
  width: 184px;
  background: color-mix(in srgb, var(--bg-1) 88%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-family: var(--font-mono);
  color: var(--ink-3);
  user-select: none;
}

.bb-ctl-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) var(--s2);
  border-bottom: 1px solid var(--line);
}

.bb-ctl-title {
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  color: var(--ink-2);
}

.bb-ctl-src {
  font-size: var(--text-2xs);
  color: var(--ink-4);
  margin-left: auto;
}
.bb-ctl-src[data-src="PAD"] { color: var(--ink-2); }

.bb-ctl-gear {
  background: none;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--ink-3);
  font: inherit;
  font-size: var(--text-2xs);
  padding: 1px var(--s1);
  cursor: pointer;
}
.bb-ctl-gear:hover { color: var(--ink); border-color: var(--ink-4); }

.bb-ctl-canvas { display: block; margin: var(--s2) auto var(--s1); }

.bb-ctl-tags {
  display: flex;
  gap: var(--s1);
  padding: var(--s1) var(--s2) var(--s2);
}

.bb-ctl-tag {
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0 var(--s1);
  color: var(--ink-4);
  opacity: 0.55;
}
.bb-ctl-tag.on { opacity: 1; color: var(--bg); background: var(--coral); border-color: var(--coral); }
.bb-ctl-tag[data-tag="at"].on { color: var(--bg); background: var(--amber); border-color: var(--amber); }

/* ------------------------------------------------ settings panel */
.bb-ctl-settings {
  left: calc(var(--s3) + 196px);
  bottom: var(--s3);
  width: 280px;
  max-height: min(72vh, 560px);
  overflow-y: auto;
}

.bb-ctl-body { padding: var(--s2); display: grid; gap: var(--s2); }

.bb-ctl-hint {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--ink-3);
}

.bb-ctl-row {
  display: grid;
  grid-template-columns: 1fr 88px 34px;
  align-items: center;
  gap: var(--s2);
  font-size: var(--text-2xs);
  color: var(--ink-3);
}
.bb-ctl-row input[type="range"] { width: 100%; accent-color: var(--coral); }
.bb-ctl-row output { text-align: right; color: var(--ink-2); }
.bb-ctl-check { grid-template-columns: 1fr auto; }
.bb-ctl-row input[type="checkbox"] { accent-color: var(--coral); }
.bb-ctl-row select {
  grid-column: 2 / 4;
  background: var(--bg-2);
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font: inherit;
  padding: 2px var(--s1);
}

.bb-ctl-reset {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--ink-3);
  font: inherit;
  font-size: var(--text-2xs);
  padding: var(--s1) var(--s2);
  cursor: pointer;
}
.bb-ctl-reset:hover { color: var(--ink); border-color: var(--ink-4); }