/* jw_sync.css - control bar for device sync. Scoped under .jws. */
.jws {
  --jws-bg: #15161a; --jws-fg: #e8e8ea; --jws-mute: #9a9aa3; --jws-line: #2c2d33;
  --jws-accent: #ff8a00; --jws-ok: #2fbf71; --jws-warn: #e6b800; --jws-err: #e5484d;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 8px 12px; background: var(--jws-bg); color: var(--jws-fg);
  border: 1px solid var(--jws-line); border-radius: 6px;
  font: 13px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box; max-width: 100%;
}
.jws * { box-sizing: border-box; }
.jws-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.jws-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--jws-mute); flex: none; }
.jws[data-state="on"] .jws-dot { background: var(--jws-ok); box-shadow: 0 0 6px var(--jws-ok); }
.jws[data-state="busy"] .jws-dot, .jws[data-state="scanning"] .jws-dot { background: var(--jws-warn); }
.jws[data-state="error"] .jws-dot, .jws[data-state="stopped"] .jws-dot { background: var(--jws-err); }
.jws-status { color: var(--jws-fg); }
.jws-name { color: var(--jws-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.jws select, .jws input[type="password"] {
  background: #0d0e11; color: var(--jws-fg); border: 1px solid var(--jws-line);
  border-radius: 4px; padding: 5px 6px; font: inherit; min-width: 0;
}
.jws input[type="password"] { width: 170px; }
.jws button { font: inherit; border-radius: 4px; padding: 6px 12px; cursor: pointer; border: 1px solid transparent; }
.jws-connect { background: var(--jws-accent); color: #111; font-weight: 600; }
.jws-connect:disabled { opacity: .6; cursor: wait; }
.jws-stop { background: var(--jws-err); color: #fff; font-weight: 700; letter-spacing: .04em; }
.jws button:focus-visible, .jws input:focus-visible, .jws select:focus-visible { outline: 2px solid var(--jws-accent); outline-offset: 1px; }
.jws-ctl { display: flex; align-items: center; gap: 6px; color: var(--jws-mute); }
.jws-ctl input[type="range"] { width: 110px; accent-color: var(--jws-accent); }
.jws-val { min-width: 56px; color: var(--jws-fg); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .jws { gap: 8px; }
  .jws-row { width: 100%; }
  .jws-ctl input[type="range"] { width: 90px; flex: 1; }
}

.jws[data-state="gated"] .jws-dot { background: var(--jws-mute); }
.jws-gated .jws-connect { background: #3a3b42; color: var(--jws-mute); cursor: not-allowed; }
.jws-gated .jws-status { color: var(--jws-accent); }