/* Reusable controls, all rebuilt in the instrument vocabulary. */

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 1px solid #45525f;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.btn:hover { border-color: var(--amber); color: var(--amber); }
.btn--primary {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--amber-ink);
  font-weight: 700;
}
.btn--primary:hover { background: var(--amber-hi); border-color: var(--amber-hi); color: var(--amber-ink); }

/* filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.chip {
  padding: 6px 13px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.chip:hover { color: var(--ink); border-color: var(--line-2); }
.chip--on { color: var(--amber-ink); background: var(--amber); border-color: var(--amber); }

/* static labels */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  display: inline-block;
  padding: 2px 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* readouts */
.readout { font-family: var(--font-mono); font-size: 13px; color: var(--ink-dim); }
.clock { font-family: var(--font-mono); font-size: 13px; color: var(--ink-dim); }

/* status dot */
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-mute); flex: none; }
.dot--live {
  background: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-glow);
  animation: dot-pulse 2.4s var(--ease) infinite;
}
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--amber-glow); }
  50% { box-shadow: 0 0 0 5px transparent; }
}

/* spec row (key / value) */
.spec-row { display: flex; gap: 14px; align-items: baseline; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.spec-row__key { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--amber-lo); flex: none; }
.spec-row__val { font-family: var(--font-mono); font-size: 13px; color: var(--ink-dim); }

/* copy-to-clipboard */
.copy {
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.copy:hover { color: var(--ink); border-color: var(--line-2); }
.copy--copied { color: var(--amber); border-color: var(--amber); }
.copy--failed { color: var(--danger); border-color: var(--danger); }