/* transport.css — controls for the top bar + the file-ops wall module.
   Bar groups render inside .hw-topbar-host; the file group renders inside
   the "transport-files" wall module body. */

/* --- Top bar: transport clusters --- */
/* The transport module builds groups as tag-over-control stacks; in the bar
   we want tag + control inline, so flip the group to a row. */
.hw-topbar-host .hw-group {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
.hw-topbar-host .hw-tag {
  font-size: 8px;
  letter-spacing: 0.12em;
}

.hw-topbar-host .hw-transport-cluster {
  gap: 5px;
}
.hw-topbar-host .hw-transport-cluster .hw-btn {
  height: 24px;
  min-width: 58px;
  font-size: 10px;
}

.hw-play { background: linear-gradient(180deg, #5E8F53 0%, #3E6B3A 60%, #2C4F2B 100%); }
.hw-play:hover { filter: brightness(1.15); }
.hw-stop { background: linear-gradient(180deg, #B0584E 0%, #7A382F 60%, #5A2A23 100%); }
.hw-stop:hover { filter: brightness(1.15); }

.hw-bpm-group .hw-readout { width: 54px; height: 22px; font-size: 13px; }

.hw-loop-group .hw-btn { height: 22px; min-width: 30px; }

.hw-pattern-group .hw-readout { min-width: 120px; height: 22px; font-size: 11px; }

.hw-status-group { margin-left: auto; }
.hw-status-group .hw-status { min-width: 160px; height: 22px; font-size: 10px; }

/* --- File ops module (on the wall) --- */
.hw-file-group { flex-direction: row; gap: 8px; }
.hw-export.busy { opacity: 0.6; cursor: wait; }